Skip to main content

Popup component

Add interactive popups to your items

Anna Voloshchuk avatar
Written by Anna Voloshchuk
Updated yesterday

Available for e-Detailers / e-Detailer briefs / landing pages / landing page briefs

The POP-UP component allows you to show additional information on demand. You can place several components or a block into the pop-up and even beyond its container without visibility loss.

You can set the pop-up opening:

  • When entering a slide/item. For this, select the Open on enter checkbox on the Properties tab.

  • Upon clicking a component with the previously assigned Open pop-up action.

To add POP-UP to your item, drag it from the Components tab on the elements panel to the item layout. To customize the pop-up, select it on the layout and go to its Properties tab.

You can add several popups to the item/slide and enter an individual name for each of them in the COMPONENT NAME field. When assigning the Open pop-up action to your item components, you can select the required pop-up by name from the LABEL list.

Also, you can configure the popup component position and style, add actions and animation to it on the dedicated Editor tabs.

Configure popups in e-Detailers and their briefs

You can configure the pop-up component in the following way:

  • Name the component.

  • Select whether to show the close button.

  • Save the close button icon to your Library with the button.

    The file is stored in the size and format used in the content item type.

    Its name is generated automatically. If the image metadata doesn't contain a human-readable name, the system generates one using the word "editor" and a unique ID.

  • Add a custom close button icon if needed.

  • Choose the icon position from the drop-down list.

  • Activate the pop-up opening on slide enter.

  • Select whether to close the pop-up on the outside tap.

  • Select the Show overlay checkbox to gray out the slide.

You can view the layers of the pop-up and manage components placed in it on the Tree tab. Moreover, you can align all components inside the pop-up with smart guides.

Configure popups in landing pages and their briefs

You can configure the pop-up component in the following way:

  • Name the component.

  • Set the background color.

  • Select whether to show the close button.

  • Add a custom close button icon if needed.

  • Save the close button icon to your Library with the button.

    The file is stored in the size and format used in the content item type.

    Its name is generated automatically. If the image metadata doesn't contain a human-readable name, the system generates one using the word "editor" and a unique ID.

  • Update or add texts on the close button icon using the EDIT IMAGE TEXT button.

  • Set the close button width, in pixels.

  • Choose the icon position from the drop-down list.

  • Assign the animation type.

  • Select whether to close the pop-up on the outside tap.

  • Activate the pop-up opening on slide enter.

  • Set the corner radius in pixels.

  • Set the opening delay value in milliseconds.

Did this answer your question?