In the dynamic landscape of web development, creating an engaging and interactive user experience is paramount. It's crucial to harness the power of animated UI/UX and leverage interactivity in your web content.

Kajabi has built in video features like auto-playing a video, play for sound button, etcetera but kajabi does not provide any way to style them from its page builder. Moreover Kajabi allows us to add forms as popups in two-step optin and exit popup but that popup acquires the entire window.

So in this article i will explain how we can add animation, styling and interactivity to unmute, play/pause buttons and video block itself with an overlay effect to make it look more intriguing. And also add form as a popup but with a slight twist - Embedding the form within the video element which is the highlight of this project. We will be using in-built video and form blocks and its features.

What You Get

• In this project, I integrate custom UI elements and overlay over Kajabi videos to enhance the overall user experience. These UI elements and their styling customizable by end-users, add a layer of ownership to the video content.

  
  

• The highlight of the project is the implementation of interactive forms as video popups. These forms intelligently appear during video pauses and at specific timestamps, ensuring user interaction at strategic points. The form, acting as a popup within the video element, not only streamlines the submission process but also maintains the user's focus within the multimedia environment. On submission the form does not appear on any conditions stated above and you get to perform the actions necessary for your business like redirecting user to thank you page, checkout page, or any url you need to.

  
  

• You as the end user gets to add the overlay colour and add the UI elements in the form of images just changing few lines of code

You can define some styling here on the root which is in the top of the css file.

Here you can insert links for your particular images.

So, let's get to the steps involved into making this

1. Adding Custom Code Block

Add a custom code block to the section that contains the video and add this code <div class="bmm-video" timestamp="5"></div>. The class is responsible for this feature. The timestamp here is the time in seconds in which you want your form to appear. This gives you the freedom to strategically engage the user at the time you feel is important in your video content.

2. Adding the Form Block

Add a form block inside the section as well. Style the form according to your branding. Check the Video Player Controls under player settings to select which controls you want your viewer to have.

Like if you want the video to play in the background when page loads check the autoplay box. When user interacts with the video for the first time the video starts to play from the beginning.

Remember to hide the form in desktop and mobile layout under block settings by checking the box so as to hide it on initial load and display it as a popup when user interacts with the video.

3. Adding Custom Css & Js

The last and the final step is to add the related css and js code inside the custom code section provided under the settings tab.

Repeat this step and add custom code and form block in the section where you need this effect.

And that’s actually it. Yes, it is that easy to add the effects which could act as a recipe to increased user satisfaction and a higher likelihood of achieving the desired conversion or interaction goals for your business. Thank you for reading and following. Let's continue to push the boundaries, creating digital experiences that resonate with users on a deeper level.

Final Words

In a world bombarded with information, capturing user attention is a challenge. The incorporation of interactive elements and animated UI elements on a website is instrumental in fostering user engagement and enhancing the overall user experience.

By providing users with opportunities to interact with the content, such as through animated UI elements, dynamic forms, smooth transition, or an engaging video overlay, websites can captivate and retain visitor attention. They enhance the overall aesthetic, converting the brand’s personality, drawing users into a more intuitive and enjoyable digital experience.