How to Add Surprise Box Gamification on The Popup

Popupsmart's Surprise Box is a gamification element that lets visitors click a gift box to reveal a reward, discount, or message. It is designed to make campaigns more interactive and can help increase engagement and conversions.

What is the Surprise Box Gamification?

The Surprise Box adds a clickable gift box to your popup. When a visitor interacts with it, one of your predefined outcomes is shown based on the probability values you assign.

You can use it to offer:

• Discount codes
• Special rewards
• "No luck" outcomes
• Different follow-up actions after the result

How to add the Surprise Box element

Surprise Box settings

Reward Smart Tag

This field defines the smart tag for the reward code.

For example, if you enter game_coupon, Popupsmart creates this smart tag:

{{game_coupon}}

Use this smart tag to display the winning coupon code in the next step or result step of your campaign.

Reward Label Smart Tag

This field defines the smart tag for the reward label.

For example, if you enter game_label, Popupsmart creates this smart tag:

{{game_label}}

Use this smart tag to show the reward name or label, such as:

• 10% Off
• Free Shipping
• No Luck

Box image

You can choose the box image shown in the popup. Popupsmart lets you:

• Select from predefined gift box images
• Upload your own image

Supported file types: jpg, png, webp, gif

Maximum file size: 10 MB

Desktop and Mobile size

You can adjust the Surprise Box size separately for Desktop and Mobile. Use the size slider to control how large the box appears on each device.

Game settings

In the Surprise Box Game Settings window, you define the possible outcomes visitors can get. Each option includes the following fields:

Weighting factor

The Weighting factor determines the chance of winning that option. You can enter a value between 0 and 100. Popupsmart also shows the percentage next to each row.

Example:

• Option 1: 34
• Option 2: 33
• Option 3: 33

This means each outcome has approximately the displayed chance of being selected.

Label

The Label is the name of the result shown for that option.

Examples:

• 10% Off
• No Luck
• 25% Off

This value can also be shown by using the reward label smart tag.

Discount code

The Discount code is the reward code tied to that option. This value is connected to the reward smart tag {{game_coupon}}.

If the selected option includes a coupon code, you can display it in the next step of the campaign.

Success Action

The Success Action defines what happens after the result is shown or selected. Choose the popup step you want to show for each option from the dropdown menu.

Maximum number of options

You can add up to 5 options in a Surprise Box game. To create another outcome, click Add option until you reach the limit.

Important: show the winner result in your campaign

Popupsmart reminds you of this in the setup modal:

• Add the smart tag for the coupon: {{game_coupon}}
• Add the smart tag for the label: {{game_label}}

You can place these smart tags in:

• The current step
• A new step in your campaign

This is how visitors will see the result they won.

Example setup

Here is a simple example:

In this setup, visitors have:

• A 34% chance to win 10% off
• A 33% chance to get no reward
• A 33% chance to win 25% off

Best practices

• Keep your reward labels short and clear.
• Double-check that your coupon codes are correct.
• Make sure your smart tags are added to the result step.
• Use a balanced weighting setup unless you want a rare reward.
• Test both desktop and mobile appearance before publishing.

Summary

The Surprise Box element helps you create a simple reward-based game inside your popup. You can customize the box image, define up to 5 outcomes, assign win probabilities, and display the winning reward with smart tags.

If you have further questions, please feel free to contact us!