Skip to main content
Sign in

Searchie Pop-out Widget

Andrew Ferraccioli
  • Updated

This article will help you implement a Searchie pop-out element from your widgets for your website. 

What you will need:

  1. A Searchie Account
  2. To Have Created a Widget

Step 1 

From the main Searchie dashboard click into the widgets tab highlighted on the left side of your screen.

Screenshot_2019-10-29_at_13__2_.png

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.

Screenshot_2019-10-29_at_13__1_.png

Step 3

From here, click into the 'embed' portion of the widget highlighted below.

Screenshot_2019-10-29_at_13__3_.png

Step 4

Now click over to the pop-out widget interface and it will provide you code that you can integrate into your website.

Screenshot_2019-10-29_at_13__4_.png

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>

 

 

Related articles

Comments

0 comments

Please sign in to leave a comment.