This article will help you implement a Searchie pop-out element from your widgets for your website.
What you will need:
Step 1
From the main Searchie dashboard click into the widgets tab highlighted on the left side of your screen.
Step 2
Click into the widget that you've created previously that you'd like to use for your pop-out widget. If you haven't created a widget already click here.
Step 3
From here, click into the 'embed' portion of the widget highlighted below.
Step 4
Now click over to the pop-out widget interface and it will provide you code that you can integrate into your website.
You will have options like full height, popout widget and whether to make the widget slide in from the right or left side of your screen. Tweaking these will change the code for you to use. Be sure to add the top portion of code to the <head> of your page and the bottom code where you want your button to appear. More instructions for the widget code is available below including a Kajabi example.
Widget Code
- WIDGET_HASH: This is the Hash ID for your widget, you can find this in your widget URL(https://app.searchie.io/widgets/HASH)
- ACCENT_COLOR: This is the same accent hex colour you would use for your widget
- BACKGROUND_COLOR: This is the same background hex colour you would use for your widget
Default Example Code:
<script>
(function(w,d,s,i,a,b) {
w._searchie = {widget:i,accent:a, background:b};var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async = true;j.src='https://app.searchie.io/js/js-popup.js';f.parentNode.insertBefore(j,f);
})(window, document, 'script', 'WIDGET_HASH', '#ACCENT_COLOR', '#BACKGROUND_COLOR');
</script>
<a href="javascript:window._searchie.toggle()">Click Here</a>
Kajabi Example: (Note: Only works in "Welcome Body" -> "Code")
<script>
(function(w,d,s,i,a,b) {
w._searchie = {widget:i,accent:a, background:b};var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async = true;j.src='https://app.searchie.io/js/js-popup.js';f.parentNode.insertBefore(j,f);
})(window, document, 'script', 'WIDGET_HASH', '#ACCENT_COLOR', '#BACKGROUND_COLOR');
</script>
<a href="javascript:window._searchie.toggle()" class="btn btn-cta btn--block btn--solid btn--med" style="display: inline-block;background: #EEEEEE !important; border-color: #EEEEEE !important;color:#000000 !important;">SEARCH VIDEOS</a>
Comments
0 comments
Please sign in to leave a comment.