Popups

This section covers the container type Popup, which is a group that hovers above all other elements on the screen

The Popup group type is a a group that is displayed above all other elements and is centered on the screen regardless of the scrolling position of the page. They can be set up to hide or blur the page below. As such, they are a useful way to bring an important message or forms to the user's attention immediately.

Typical use cases for popups include:

• Error messages and alerts

• Registration forms

• Contact/Feedback forms

• Newsletter Signup forms

• Promotional offers and discounts

Popups can be used to bring attention to your users immediately. In this example we're encouraging users to complete their profile.

Showing and hiding popups

Popups are never visible by default and cannot be displayed using conditions. In this way they are a bit different from other groups.

Popups are displayed using one of two actions:

• You can use the Show an element action to show the popup. Bubble automatically applies a slight fade animation to the group when it's displayed and hidden

• Your second option is to use the Animate an element action to pick what kind of animation you want to use to display the popup

Using the Show an element action the popup will automatically fade in.

Custom events for popups

A workflow consists of an even and a set of actions. The event is used to determine when the collection of actions should run.

Adding a popup to a page gives you two more events that you can use to trigger a workflow:

Popups give you access to two new events that trigger whenever the popup is opened or closed.

• A popup is closed will trigger every time a specific popup is closed using the Hide an element or Animate an element actions

• A popup is opened will trigger every time a specific popup is closed using the Show an element or Animate an element actions

The events will trigger every time the popups is opened or closed (as opposed to just the first time). A typical scenario where an event like this is useful is to reset the content of the popup after it's closed.

Popups and security

While popups can be set up to cover the content of the page with a specific color or a blur filter, it should not be considered a secure way to hide sensitive information. A popup can be hidden by a tech-savvy user, revealing the content below.

Other ways to learn

Core reference: popup settings

In the core reference section, you'll find all the settings associated with popups.

Reference: Popups

Video lessons

• How to use the popup element

• How to trigger workflows from popup events