Jan 23, 2024
By default kajabi allows adding a two-step opt-in popup and an exit popup. But what if you need to display other content like a quiz as a popup, maybe inform them of an upcoming event, or redirect to some other site?
Well I Ahmer Raza have a solution. So let’s dive in to know the why’s and how’s in this article.
Popups have become an integral part of web design and digital marketing strategies, offering a dynamic way to engage with website visitors and capture their attention. Well-designed popups strategically placed on your site can significantly increase conversion rates. Whether it's guiding visitors to subscribe, make a purchase, or sign up for a webinar, popups act as effective calls-to-action. This engagement helps in building a connection with your audience, fostering trust and loyalty.
Well in this document we will get to know how to integrate multiple popups in your kajabi website or landing page. There are very few steps involved and are easy to follow. So, let’s get started:
Let’s say you have a section in a page which has a call to action button on it or you have added a button on that section on click of which you want to connect a popup. Add your Button content and add a single line from us. for eg: Call To Action <span class="identifier">popup1</span>. The text before the span element is the text that shows up on the button and the span element is the important part here. The content between the span span element (popup1 in our case) is important as we will discuss in the next step.
Note: Make sure the button action is set to Go to a Url and the url text part should be left empty.
First thing to note here is popups here are nothing but just normal sections inside of kajabi. So create a section that you want to appear as a popup on the click of that particular button. Add whatever content you want to display on the popup, style it the way you want. To make this work though you need to add a custom code block in the section and paste this div inside for eg; <div class="popup1"></div>. Now keeping in mind the highlighted text from step 1 and in this step, these two texts could be anything you want but it must be the same to connect the popup with the button. By that i mean that the content here inside class quotes and content between span element from earlier step must be the same.
Note: Remember to hide the section ( our popup ) in desktop and mobile so as to not appear on load.
The final step to this is to add the related css and js code inside the custom code section provided in the customizer (Settings tab —-> Custom code).
And you are done creating a popup for your site. Don't forget to save all of your work :) Repeat these steps to create popups further.
By using multiple popups with personalised content, you create a tailored experience for each user segment adding an element of fun to your website.. This personalization enhances the overall user journey and satisfaction. In conclusion, the use of multiple popups on your Kajabi site goes beyond mere promotional tactics. It's a strategic approach to delivering the right message to the right audience at the right time. By understanding the diverse needs of your visitors and implementing various popups accordingly, you can optimise user engagement, boost conversions, and create a more interactive and effective online market presence.