Mystery Box is a gamified first step that shows visitors a row of closed boxes and invites them to pick one to reveal their discount. Like Spin-to-Win, Scratch-Off, Pick a card, and Plinko, it makes the opt-in moment feel like a fun, low-effort interaction rather than a standard signup form. It takes one tap to play, so it works well as the first step of a new campaign or as an added step in an existing popup flow.
š”Tip: Starting a new popup? Lia can build it for you with a Mystery Box as the first step. On the Choose a template step, select building with Lia and write "Start with a mystery box that reveals the discount." See How to build a popup with Lia.
How to add Mystery Box
There are two ways to add Mystery Box to your popup:
From Scratch: When creating a new popup, go to the First step stage of Build a popup and select Mystery box ("Pick a mystery box to reveal a hidden discount"). It starts with a pre-configured layout: a "Pick one to reveal your discount" headline and three boxes.
To an Existing Popup: Open your popup in the editor, click the + (Add a step) icon at the end of the step bar, and select First step > Mystery box. This adds a complete step with the headline and boxes. You can then drag and drop the step into position. To make it your first step, drag it to the top, then delete your old first step by right-clicking the step name and selecting Delete. If that old first step is a Mini Quiz whose answers feed your ESP flows or segmentation, keep the quiz and add Mystery Box as an extra step instead.
š”Note: Like Spin-to-Win and Pick a card, Mystery Box performs best when it's the central focus of its step. We recommend avoiding competing calls to action on the same screen.
Set up rewards
Each box is a button that sends the visitor to a step, usually your email or phone sign-up. The discount code comes from the reward step at the end of that path. Unlike Spin-to-Win or Plinko, there are no winning probabilities to set: what a visitor gets depends only on which step their box leads to.
Select a box on the canvas to open its settings in the right-hand sidebar.
In the Actions section, find the Go to step action. By default, every box is set to Next step. Change it to a specific step to send that box somewhere else.
Set the reward on the reward step at the end of that box's path (for example, 10% off, free shipping, or a flat dollar amount).
Single reward: Leave every box pointing to the same next step. Every visitor gets the same offer, no matter which box they pick. This is the default setup and the simplest way to run a mystery discount.
Different rewards per box: Give each box its own path: point it to its own sign-up step, and end that path with a reward step set to that box's reward. This way, the success screen and discount code always match the box the visitor picked. To build each path quickly, clone your existing sign-up and reward steps.
š”Tip: Boxes always appear in the same order. If you give each box its own reward and want to keep visitors guessing, select the container that holds the boxes and turn on Randomize child order. Each visitor then sees the boxes in a shuffled order, which stays the same for them on repeat visits in that browser. The editor always shows the original order.
Customize the boxes
By default, the boxes use your popup's accent color and show a question mark. To match your brand, select a box and open Styles to customize:
Box Text: The "?" on each box can be replaced with your own text, such as a number or a short word.
Box Colors: Background and text color. Pick a text color with strong contrast against the box background.
Size and Shape: Width and height under Size, and corner radius under Rounded corners.
Hover State: Boxes grow slightly and fade a little when a visitor hovers over them. To change this, switch the state at the top of Styles from Default state to Hovered.
Headline: Edit the "Pick one to reveal your discount" text and its font, size, and color.
Layout: Spacing and alignment of the row of boxes on both desktop and mobile.
To add a box, select one and choose Clone from its āÆ menu, so the copy keeps the same style and click action. To remove one, delete it. Three boxes is the default.
š”Tip: Want to restyle the boxes without digging through settings? Lia, Alia's built-in AI assistant, can change box colors, icons, or layout for you with no CSS required. For example, ask Lia to "turn the boxes into gift boxes with my brand colors." See Getting started with Lia.
What visitors see
When the popup opens, the headline and boxes fade in. The visitor taps or clicks one box to play.
Once a box is picked:
The visitor moves to the step connected to that box, usually your sign-up step.
After they sign up, they see the code from the reward step on that box's path.
Before publishing, open the Publish dropdown and select Review popup to have Lia check your popup for consistency. Then use Preview mode to test on both desktop and mobile. Click each box at least once to confirm it leads to the right step and reward.
Publish your campaign
Once you're happy with your boxes, rewards, and styling, click Publish in the top right corner, or set up an A/B test to compare Mystery Box against your current first step. When testing, change only the first step so you get a clean read on Mystery Box itself. You can track its performance alongside your other campaigns from your Alia dashboard.
FAQ
Does every visitor get the same discount?
By default, yes. Every box goes to the same next step, so whichever box a visitor picks, they get the same reward.
Can each box give a different discount?
Yes. Give each box its own path through sign-up to its own reward step. See Set up rewards above.
Can I use more or fewer than three boxes?
Yes. Clone a box to add one, or delete a box to remove it. After changing the number of boxes, check Preview on mobile to make sure they still fit.