This article will help you add a Searchie pop-out widget to a page within your Kajabi product.
What you will need:
Note: The widget will be operated by a custom button that must be placed in the Welcome Body Editor. For a more simple integration, check out the Universal Pop-out article.
Step 1 - Access your Product
Once you have logged into your Kajabi account, navigate to your product page by clicking 'Products'.
Here you will see a list of your products. Click the course you want to add Searchie to.
Step 2 - Product Overview and Customization
Here is the product overview page, click the ‘Customize’ button at the top of the page underneath the title of your product.
You can click the 'Customize' button that appears when you hover over the centre section of the screen, or you can click the little palette icon in the bottom right under the 'THEME NAME' header section.
Step 3 - Welcome Body Editor
We now want to access the Welcome Body Editor, and we can do so in a couple of ways.
The first way is to click 'Welcome Body' on the left sidebar under ‘Sections’.
The second way to access the Welcome Body Editor is to hover over the ‘Welcome Body’ section of your product in the preview on the right side of the screen. An ‘Edit’ option should appear when you move your mouse over that section- click it.
Step 4 - Code Block
You will have noticed that the Sections menu has changed to the Welcome Body Editor. Click ‘Add Content’.
The next view gives you a range of content types to choose from, select ‘Code’ under the little gear icon.
Step 5 - Add Pop-out Widget: Welcome Body Code
Now that we have added a code block to our Welcome Body, we’re going to add the widget to the site via this block of code. First, click the newly created code block.
Moving on to adding the widget. See Pop-out Widget for how to navigate Searchie and find the relevant code. Go ahead and copy and paste the widget code into the editor on Kajabi, as shown below.
Ok, hang on here, things get a little tricky. The default button code found under the line 'Add this code where you want your button' in the window where you also copied the widget code, doesn't fit the Kajabi Premier theme stylistically. Instead, scroll to the bottom of the Pop-out Widget help article and copy the 2nd paragraph contained between, and including, the <a> and </a>.
See the two screenshots below for clarification.
Paste this button code in your code block editor on Kajabi below the code you pasted for the widget itself.
Step 6 - Confirm Working Widget
Click on the ‘Preview’ button in the upper-left of your screen next to the ‘Back’ button.
Click that new ‘Search Videos’ button and the Searchie pop-out should be there!