Our step by step guide to designing your perfect Mystery Box promotion - a game that challenges people to pick one winning box from a carousel of possible options.
Requirements
Before getting started you will need to have a BeeLiked Account and have upgraded to the Standard Plan. Only with this plan will you be able to complete all the customizations needed. See our pricing page.
Step 1
Click the Create Promotion button to create a Mystery Box promotion (not sure how? Then follow this guide to create your first promotion).
Step 2
a) Select this Ready Made design from the available designs
Follow the steps to create this promotion by giving it a name and then proceeding to the Builder where you will be able to customize it.
Now you have the base promotion, we can set about transforming it into 'Lost Teddy Drama'.
Step 3
First we're going to make a few updates to the possible prizes (and non prizes) that people can win when entering this promotion. To keep this simple in how we refer to these prize options, we'll refer to them as Prize Options.
Click anywhere on the row of boxes to open the Mystery Box settings.
This Ready Made design has three prize options already set. We called them Prize 1, Prize 2 and Unlucky.
- A) Add Prizes:
To start this customization ,we'll rename the existing ones and add some more. We'll have 4 prizes and reserve a final Prize for a Lucky Dip or Sweepstakes.
Simply click to open each of the Prize Options and make the changes to the label and any texts and image changes you want. We've added other image options in the Ready Made folder in the image library.
- B) Set Prize Quantities:
Now that we have more prize options, we'll also now set some Prize Quantities for each of these.
First switch on the option to limit the prize quantities. You'll need to click on the boxes on the Start Page or Lucky draw page to open the settings.
With this now ON, click on the individual Prize Options and on opening them you will see that each of your Prize Options will have a Quantity field.
To make the maths easy, we'll work on the assumption that there will be 1,000 entries in total. 25% will win a prize and 75% will get the 'Lucky Dip' or losing prize option and from this one winner will be chosen at random with the Winner Spinner.
| Segment Label | % Results | Quantity (for prize probabilities) | Total Cost |
| $10 | 22.13% | 222 | $2220 |
| $20 | 2.50% | 25 | $500 |
| $50 | 0.25% | 2 | $100 |
| $100 | 0.13% | 1 | $100 |
| Lucky Dip | 75% | 750 | 1 x $100 |
Tip
Your Losing Prize Option is important if you think that the total number of entries might be exceeded as BeeLiked will increment the Losing Prize Option quantities once the total number of 'winner' Prize Options are used up. In this way, you don't need to know exactly how many entrants you expect, only how many prizes you wish to give.
If you want to choose winners at random as part of a Sweepstakes, you can do so using the Winner Spinner.
Step 4
Now that we've changed the segments, we also have to change the Result Messages. This is really important to do as it is the final message your entrant receives and tells them what prize they got and how to redeem it.
Here is a tutorial video that explains how to map your Segments to Result Messages.
TIP:
Result Message also can pull in gift card codes / discount codes if you've added them to the Coupon Collections. Here's an article that explains about adding Coupons to a Collection.
If you'd like to customize the Result Message to include a highlighted section for a coupon or gift card code or link, here's some html code you can copy and paste into the Result Message Source.
<div style="background-color:#f1f1f1;border:1px solid transparent;color:#333333;font-size:12px;margin:10px auto;padding:8px;text-align:center;">
COUPON CODE
</div>
The Text 'COUPON CODE' would be replaced with the placeholder code from your Coupon Collection so when someone enters and receives this result message, BeeLiked will retrieve the next available coupon to show them and then record their details in the database so you know who got what codes.
Custom Design
Here's a quick lesson on changing up the design.
With BeeLiked you can keep things simple and just add logos and change texts and colors, or you can go to town adding your own images and creating custom CSS to define behavior. It all depends on the time you have and your digital know-how.
Step 1
Just to change up the design a bit, we're going to start by changing the background image. Head to Theme > Background. To change the image hover over the background image for the buttons to appear, then click the middle pencil icon. The Media Library will open.
Select an alternative image from the Ready Made folder, or add your own to one of the other folders and insert in place of the existing image.
Step 2
Let's leave the color of the boxes as they are. Of course you can change them if you want. However, let's add some animations to the boxes.
and then let's change the lid so they look more like the kind of cardboard box that you'd use when moving house.
Step 3: Animate image entrances from the top
This step is a bit more advanced and is totally optional.
We're going to add some additional imagery to the promotion page and animate.
Grab the URLs from your Media Library for the images below:
|
|
Then copy the HTML code below and enter the two URLs into its corresponding place in the code replacing the bold text below.
<div class="pendulum">
<img class="image-right" src="lost-picture-frame-image-url">
</div>
<div class="floating">
<img class="image-left" src="pendulum-image-url">
</div>
Now in the Builder (where you are editing the Mystery Box promotion), click anywhere on the Template Header section (any page)
and open the Editor for that section. Click on Source
and then under any existing code showing, paste the HTML code (with the URLs) and click SAVE.
Finally, you will need to add the following CSS to your promotion's Theme > Advanced.
.pendulum {
position: fixed;
top: 50px;
right: 4%;
width: 288px;
height: 322px;
transform-origin: top center;
animation: pendulum 4s infinite ease-in-out;
}
.floating {
position: absolute;
top: -400px;
left: 4%;
width: 538px; height: 370px;
animation: entry 4s ease-in-out 1, floating 8s infinite ease-in-out 4s;
}
.image-right, .image-left {
width: 100%;
}
@media (max-width: 2000px) {
.image-right, .image-left {
width: 88%;
}
}
@media (max-width: 1440px) {
.floating {
left: -80px;
}
}
@media (max-width: 1240px) {
.floating {
left: -160px;
}
}
@media (max-width: 720px) {
.pendulum, .floating {
display: none;
}
}
@keyframes pendulum {
0% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
100% { transform: rotate(-2deg); }
}
@keyframes entry {
0% { top: -400px; }
100% { top: -60px; }
}
@keyframes floating {
0%, 100% { top: -60px; }
50% { top: -80px; }
}
Step 4: Animate image entrances from the bottom
You can animate any object in your promotion with a little bit of CSS code. We'll create a simple animation of the bear so he drops from the top.
Go to your Media Library and grab the URL for the following image (or any other image you wish to use instead).
|
Scroll to the bottom of your promotion and find the section Start Page Bottom Content.
Click this section to open the editor and now click on Source.
Paste the following HTML code in the Bottom Content of your promotion page, remember to replace the placeholder 'image-to-animate' with the URL of the image:
<div class="banner">
<div class="content">
<img src="Image-to-animate">
</div>
</div>
Now open THEME > ADVANCED
And paste and SAVE the following CSS into an empty row at the top or bottom of the existing content.
/** FOOTER BANNER **/
.banner{
width: 100%;
position: absolute;
bottom: 0;
}
.banner .content{
width: 100%;
max-width:350px;
margin: 0 auto !important;
animation: bounce-in-top 1.1s 2s both;
}
@keyframes bounce-in-top {
0% {
transform: translateY(-500px);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: translateY(0);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: translateY(-65px);
animation-timing-function: ease-in;
}
72% {
transform: translateY(0);
animation-timing-function: ease-out;
}
81% {
transform: translateY(-28px);
animation-timing-function: ease-in;
}
90% {
transform: translateY(0);
animation-timing-function: ease-out;
}
95% {
transform: translateY(-8px);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0);
animation-timing-function: ease-out;
}
}
/** END FOOTER BANNER **/
That's it, you should have an animated image that appears when the page loads. To try it out click on Preview.
TIP
If you are feeling adventurous and want to try another animation, you need to change this CSS only, getting new CSS for the animation from:
https://animista.net/play/entrances
Where to use your Mystery Box promotion?
You can use the Mystery Box promotion for any purpose from lead generation to customer or employee rewards. We've created the following presentational decks to showcase some of the many different use cases: