Skip to content

Create and edit popups

Popups

Create a new popup

  1. Navigate to Popups
  2. Click the “Add Popup“ button
  3. Select a popup you want to create

Editing view

When creating or editing a popup, you are presented with the popup configuration view. This view allows you to change many configuration properties of a popup.

On the left-hand side, you can change the texts in the popup (highlighted by a gray dashed line). On the right-hand side, you can configure the behavior.

Select popup

Popup options

Every popup has a name and optional description. The live toggle indicates, whether to show the popup on your website or not. If the popup is not live, it will be shown only on the Playground (or if the Wiry JS SDK is set in the testing mode).

Popups must be Live to be shown on your website

A popup must be live and active to be shown on your website. You can preview and test your “in progress“ popups on the Playground.

Config options

Config options

The tab shows the additional configuration of the popup depending on the type you selected. Every popup has different configuration options.

Display options

Display options

Here you can configure the visual properties, such as the position on the page, size, style, animation, etc.

There are some less obvious options:

Persistent
A persistent popup cannot be closed by clicking on the backdrop. It can be closed only by clicking the close button or by submitting an action.
Fullscreen on small devices
Whether to display the popup in fullscreen on small devices (mobile) no matter what size you selected for larger screens.
Prevent page scroll when open
By default, when a popup is open, the website is still scrollable. In some cases, you might want to “freeze“ the website while the popup is open.

Trigger options

Trigger options

A “trigger“ is an event on the website, which opens the popup. You can select from these triggers:

None
Only if you want to open the popup programmatically.
Enter
When a visitor enters the website.
Exit
When a visitor is about to leave the website (i.e. exit intent).
Click
When a visitor clicks a specific element (you must configure a CSS class).
Scroll
When a visitor scrolls a configured amount.
Custom
When a custom event is emitted using the Wiry JS SDK.

Targeting options

Trigger options

You can limit the popup only to a specific website or page. You can also configure more complex targeting using “Conditions“, allowing you to target a specific country, language, browser, or time.