Adding your Instagram widget to your Kajabi website is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your website.
What Is Kajabi?
Kajabi is a platform that aims to help entrepreneurs succeed in the creator economy.
It’s one of the most popular places to create and sell online courses, and the solution offers multiple options for creators to monetize their skills.
Kajabi also offers analytical tools to help creators determine whether their current strategy is working and where they could potentially enjoy more success by pivoting slightly.
It includes an elegant website builder to create beautiful websites that are fully integrated with everything in your business. For the purpose of this tutorial we are going to use the website builder to display our Snapwidget widgets.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences. For this purpose we have created 2 pages to allow us to add our snippet. The pages only contain a heading and footer.
Adding pages to your website does not form part of this tutorial. Feel free to follow the process at How to Add Pages to Your Website.
Let's start adding your widget snippet to a page.
A. The Grid Display.
Click on Pages and select Customize for the page you want to add your widget to.
The editor opens up and displays your page in edit mode allowing you to add sections as required.
As mentioned before, we have created pages containing only a header and footer. We will now insert the required section to allow adding your snippet.
Click on +Add Section.
Scroll down on the provided list of sections and select Custom Code under CUSTOM.
Click on Add, this will add the Custom Code section to your page.
Click on Custom Code in the left sidebar. This will provide an editor text box in the left sidebar.
You can set the width to the number of columns you want the widget to be displayed in. The maximum is 12 columns. Due to the 100% width setting of the iframe, the widget will then fill the whole area provide by the number of columns.
Insert your snippet in the Code text box overwriting any existing code. You can enlarge the text area vertically by dragging the corner handle at the right-hand bottom.
This will display your widget as follows in the preview display.
By changing the column setting to e.g. 8 columns, it will display larger.
Please note - if you make the width too small then you won’t be able to click on an item in the grid and your social media buttons will also not be displayed properly.
The way your widget will be displayed is a combination of iframe width and number of columns selected. The preferred combination is leaving the iframe width at 100% and selecting the required number of columns.
Your live website will then be displayed as follows.
If you click on any one of the items in the grid it will open up in a lightbox.
B. The Slideshow Display
As mentioned above, the process for adding the snippets is the same for both widget types.
The standard responsive Slideshow widget contains the following snippet.
If you add your standard responsive Slideshow snippet to your page in a 6-column width, it will be displayed as follows.
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed.
To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.
Create a non-responsive Slideshow widget on your Snapwidget dashboard. The iframe width and height is not important, you can set them to 200px each.
We are now going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive Slideshow widget contains the following:
Make the following changes to the snippet.
Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).
<div id=”Wrapper” style=”width: 60%; margin: 0 auto;”> (this sets the Wrapper to 60% of available width and center-justified. With this width setting we can change the width of the widget to any width we want).
Please Note - As with the Grid display, if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly.
<div id="Container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;"> (this sets the area used to display the iframe to 100% of the Wrapper width as well as height = 100% of the width).
Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;).
This will then display the widget as follows.
The widget will then also be responsive.
C. Adding your widget snippet to a blog post.
Adding a Blog post does not form part of this tutorial. To add a Blog post or modify/delete an existing post, follow the Kajabi instructions on how to add a Blog post.
If you want to add your widget to the main Blog page you use the process as indicated above for a web page. There is a difference when adding your widget to a specific individual Blog post.
Please Note - when adding your widget to a Blog post there is no column setting as when you add it to a web page via Custom Code. The code is added via a Code editor to the Post Details text box (i.e. where your description / details of the post is normally be entered) which places some restrictions on the allowed content. All restrictions regarding the width of the widget also apply when adding your widget to a Blog post.
On the left sidebar, click on Blog to select the Blog management page.
From the list of Blog posts, select the one you want to add your widget to.
To add your snippet code, click on the Source code item on the Post Details toolbar. This will open a Source code text box allowing you to add your snippet.
You will notice the header that we have added to the Post Details is displayed here as <h5>Grid Display</h5> indicating that we have used the <h5>Header format for this header.
When adding a snippet containing a link to a .css file or a link to a .js file, the editor does some clean-up.
It strips the
line from the snippet and adds //<![CDATA[ // ]]> between each <script> and </script> tag. It adds a width and height setting to the iframe style setup. It also adds a <p>..</p> (paragraph) tag around the iframe part of the snippet.
e.g., the standard Responsive Pro Grid widget contains the following snippet.
When you insert it into the Blog post as code it becomes
The //<![CDATA[ // ]]> that it adds between the <script>..</script> tags can be ignored. The editor creates an XML CDATA section with no contents. The width and height setting that was added to the iframe style setup should be left as is because if you remove it, the editor will just put it back. The <p>..</p> paragraph tags added to the iframe code also have no effect.
The issue that we have to attend to here is the missing link to the css file. If that is not processed then the Lightbox display won’t work properly.
Luckily, Kajabi allows us to add Custom CSS to our pages.
The Blog Post page is where the Blog listing appears with links to the posts. We are going to add the Custom CSS code to the Blog post page. It will then apply to all Blog posts meaning you won't have to add it again.
Select Pages in the left sidebar menu.
Click on Customize on the Blog Post page.
Select the Settings tab in the left sidebar and click on Custom Code.
This will provide the option to add Custom CSS code as well as Custom JavaScript code.
We will only add our link to the external Snapwidget CSS file in the CSS Code text box. To be able to do this we have to use the Import rule with the format =
@import url('url');. Enter the following line into the CSS Code text box and click on Save.@import url('https://snapwidget.com/stylesheets/snapwidget-lightbox.css');
Your Blog post will now be displayed as follows and the Lightbox display also works.
