Create and edit popups¶
Create a new popup¶
- Navigate to Popups
- Click the “Add Popup“ button
- Select a popup you want to create
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.
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.
The tab shows the additional configuration of the popup depending on the type you selected. Every popup has different configuration 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:
- 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.
A “trigger“ is an event on the website, which opens the popup. You can select from these triggers:
- Only if you want to open the popup programmatically.
- When a visitor enters the website.
- When a visitor is about to leave the website (i.e. exit intent).
- When a visitor clicks a specific element (you must configure a CSS class).
- When a visitor scrolls a configured amount.
- When a custom event is emitted using the Wiry JS SDK.
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.