Content Blocks – Pop-ups

The new Pop-Up Content Block lets you present important information to your visitors by showing a little box on the screen, based on a number of different conditions. Working with pop-ups is no different than working with Content Blocks Hooks.

Creating a new pop-up is extremely simple. Just navigate to the Content Blocks section, then create a new pop-up template. If done correctly, you should 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. Trigger Condition – 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. Additional Close Trigger – This one lets you automatically close the pop-up if a certain action is performed.
   • On form submit automatically closes the pop-up if a form is detected inside the pop-up, has a submit action linked to it and if it is triggered.
   • On button click lets you select a .class that might be linked to a button and will close the pop-up if it’s clicked.
4. Relaunch Trigger – 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.
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. 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.
7. Pop-up Position – Nine options available here, letting you display the pop-up in any place you might want.
8. 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.
9. 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.
10. Pop-up Visibility – Lets you easily show or hide the pop-up on specific device types.

Design Controls

1. Padding – Lets you specify the padding inside the pop-up container.
2. Border Radius – Round those borders with a nice control.
3. Shadow – Add a shadow to the pop-up
4. Pop-up Offset – Lets you specify the distance of the pop-up from the viewport.
5. Scroll Lock – Locks the page behind the pop-up from being scrolled.
6. Container Overflow – Decide how to handle contents that overflow the pop-up size.
7. Close Button – Choose how the pop-up close button looks and feels like.
8. Pop-up Background – Choose background colour for the pop-up’s contents, if it hasn’t been previously specified.
9. 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