Content Blocks – Pop-ups

The new Pop-Up Content Block enables you to present crucial information to your visitors by displaying a small box on the screen, contingent on various conditions. Interacting with pop-ups is essentially the same as working with Content Blocks Hooks.

Creating a new pop-up is a breeze. Simply navigate to the Content Blocks section and click on the “Create New Pop-Up Template” button. If you’ve done it right, you’ll be presented with the Pop Up editor.

Granular Controls

1. Display Conditions – Here you select where the pop-up will trigger. There are a couple of options available, which you can find out more about in the Conditional Manager article.
2. Launch Trigger – Here you can set a few options on how to trigger the pop-up, once the conditions have been met –
   • The first option, on scroll, will display the pop-up based on the user’s scrolling interaction. You can choose either when the user scrolls down the page, or upwards, and even set the number of pixels the page has to travel before the pop-up displays. On scroll to element lets you select a specific class from the content of the page that will trigger the pop-up.
   • The second option is pretty self explanatory, it will display the pop-up as soon as the page is done loading.
   • Next, we have the after inactivity setting, which will display the pop-up if the browser detects there has been no activity from the user in the past few seconds, which you can set to your liking.
   • After X Time will display the pop-up after a number of seconds have passed. This will ignore any type of interaction from the user and will display the pop-up no matter what after the duration has passed.
   • The last option is pretty interesting. On Page Exit Intent will detect if the user tries to leave the webpage and display the pop-up as soon as the mouse cursor leaves the webpage viewport, useful in case you want to retain the visitors more on your website.
   • After X Pages will let you display the pop-up after the user has navigated a pre-set number of pages, irrelevant of their actions.
   • On page exit intent will trigger the pop-up if the mouse cursor has left the viewport area of the browser. Please note that this option only works on desktop devices.
3. Relaunch Trigger (Present when automated triggers are used) – Here, you can set the pop-up’s “triggered” cookie to expire after a few days and have it relaunched, even if it has been previously closed by the visitor.
4. Close Actions – This one lets you automatically close the pop-up if a certain action is performed.
   • On Close Button Click: This closes the pop-up when the X button is clicked.
   • On ESC Button Press: This closes the pop-up when the Esc key is pressed on the keyboard.
   • On Custom Action: Here you can select a custom action to close the pop-up. Form Submit lets you automatically close the pop-up if a form is embedded into it and is submitted, while Button Click lets you designate any element from inside the pop-up with a specific CSS class to act as the close button.
5. Pop-up Animation – We have a few basic options here such as fade in or out, or a zoom effect. There’s also a beautiful slide effect, which lets you display the pop-up as coming from any direction of the screen.
6. Load content with AJAX – This is a more advanced option that comes in handy if you have many pop-ups implemented and they take up space inside the markup of the page. The option changes the loading mechanism of the contents of those and makes them load on-demand. Please note that this option is experimental and it might not work in every single situation.
7. Dynamic Content Preview – Comes in handy if the pop-up is pulling any dynamic data from the display conditions. You can preview how things might look like right inside the editor.
8. Pop-up Visibility – Lets you easily show or hide the pop-up on specific device types.

Design Controls

1. Pop-up Size – Three predefined sizes, but of course, you can easily choose a custom size, which will let you define the size you wish, including device specific sizes.
2. Pop-up Position – Nine options available here, letting you display the pop-up in any place you might want.
3. Scroll Lock – Option that you can use to prevent the scrolling of the page behind the pop-up.
4. Pop-up Offset – Lets you specify the distance of the pop-up from the viewport.
5. Shadow – Add a shadow to the pop-up
6. Padding – Lets you specify the padding inside the pop-up container.
7. Border Radius – Round those borders with a nice control.
8. Container Overflow – Decide how to handle contents that overflow the pop-up size.
9. Close Button – Choose how the pop-up close button looks and feels like.
10. Pop-up Background – Choose background colour for the pop-up’s contents, if it hasn’t been previously specified.
11. Pop-up Backdrop Background – Adds a backdrop layer to the pop-up, preventing the user from interacting with the page behind it.

Video Resources

Explore additional resources via our video tutorials page.

• Exploring the Pop-up Content Block
• Diving deeper with pop-ups, exploring example marketing implementation