How to add and customize interactive pop-up elements
With SendPulse's pop-up builder, you can create smart pop-ups that appear based on predefined scenarios. Use interactive pop-up elements to gamify data collection and enhance user experience.
Select a template to use as is or customize it. Alternatively, you can create your own template using ready-made elements and increase user engagement.
In this article, we will talk about how to add and set up interactive pop-up elements.
Getting started
To add an interactive element to a pop-up, select a project from the list or click Create project. Then, click Add pop-up, choose a template, or create a new pop-up.
In the builder, select an interactive element: Scratch card, Pick a gift, Dice, or Slot machine.
Read also: How to create a smart pop-up.
First, select a variable to store website visitors’ dice roll outcomes and related data, or create a new one.
Scratch card
This element adds an area where users must type in their contact information and scratch the virtual card to reveal a promo code./p>
Customize the element in the following sections.
| Text | Enter a scratch area text. |
| Promo code | Enter a promo code that appears after the card is scratched. Users can apply this code to claim discounts or other offers on your website. You can add multiple promo codes that will be randomly distributed among users. |
| Style | Select a scratch card style. You can select a rectangular or round shape and a golden or silver color. |
Pick a gift
This interactive element adds a gift box that users can open to get a promo code.
Gifts will unlock once users share their contact information through an entry field. To collect this information, make sure to add a required entry field.
Add the Pick a gift element and configure its settings.
| Promo code |
Add one or more promo codes. After a user opens the gift box, a random promo code from your list will appear. You can enter a promo code of up to 20 characters. |
| Style | Select a gift box design. |
| Size | Select a gift box size: small (S), medium (M), or large (L). |
Dice
This interactive element adds a virtual die that users can roll to win a promo code after sharing their contact data.
Customize the element in the following sections.
| Pop-up text | Enter the text appearing below your dice. You can format it using the toolbar. |
| Number of dice | Select the number of dice appearing in your pop-up. |
| Maximum winning value | Enter the maximum value website visitors can roll. Your dice will not roll a greater value.
The maximum available value depends on the number of dice you selected (6 for one die, 12 for 2 dice, and 18 for 3 dice). |
| Post-roll text | Enter the text appearing after the roll. You can edit this text for every outcome individually. |
You can also customize the Face and Pip color of your dice or use default pop-up style settings.
Slot machine
This interactive element adds a slot machine that users can spin to win a promo code.
Customize the element in the following sections.
| Style | Select a slot machine design. Select the Play unmuted checkbox to add a sound. |
| Number of spin attempts | Enter a number of spins a user can make. |
| Winning combination | Select a winning combination of 2 or 3 identical elements in a row. |
| Promo code | Enter the promo code that will appear if a user wins. To add multiple promo codes, click Add promo code under the input field.
Promo codes will be distributed randomly. |
| Button text | Enter a slot machine button text. |
Next, add spin result texts.
| Pre-spin text | Enter the text that will appear before spinning. |
| Winning text | Enter the text that will appear if a user wins. |
| Out-of-spins text | Enter the text that will appear when a user is out of spin attempts and does not win. |
Spin-to-win
This element adds a wheel that your website visitors can spin to win bonuses, discounts, or gifts.
Select or create a variable that will store the value of the sector where the wheel stops. Add sectors and customize their styles. Adjust your sectors’ probability, add text, and select a wheel position relative to your pop-up.
Read more: How to set up the Spin-to-win pop-up element.
Last Updated: 12.03.2025
or