Breakdance Builder Basics: Popup on Page Scroll

The Popup on Page Scroll functionality is a dynamic feature that can enhance user engagement. In this tutorial, using Breakdance Builder, you will learn how to create a popup that appears as a page is scrolled down.

Prerequisites

Please make sure you have the following installed and activated:

• Breakdance Builder

Trigger a Popup on Page Scroll

1. Navigate to Breakdance > Popups and click on ‘Add Popup’.
   
2. Fill in the following information:
   • Title: E.g. Page Scroll Popup Demo
   • Location: E.g. Everywhere
   • Popup Opens When: Page Scroll
   • Scrolls to: Choose between ‘Percent’ (appear after a defined percentage of page scroll) and ‘Selector’ (specific page element)
     
3. Click on ‘Add popup’.
4. Edit your popup with Breakdance to design your popup, or paste a pre-designed layout (in this example a popup was already built).
   
5. Test the popup by scrolling on your webpage to ensure it triggers correctly.
   
6. (For the Selector option) Enter the ID or class of the trigger element in the Popup settings.
   
7. Update the ID of your target element in the page settings to match (do not use the #).
   
8. Test the popup if everything works as intended.

Official Documentation

• Breakdance Builder Documentation

Breakdance Builder Popup on Page Scroll – Conclusion

This tutorial detailed the process of creating a ‘Popup on Page Scroll’ using Breakdance Builder, showcasing both percentage-based and selector-based triggers for enhanced user interaction.