1. Design
  2. Design School - Advanced Designs

How to Guide: Design Tutorial - Grabber Game with Typeform handoff

Ever wanted more people to fill in your feedback surveys? Well why not invite them to play a Grabber game after their purchase and then have this push them to your survey with an extra incentive to fill it in.

Requirements

Before getting started you will need to have a BeeLiked Account and have upgraded to the Premium 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 Unwrap the Gift promotion   (not sure how? Then follow this guide to create your first promotion). 

Screenshot 2025-01-31 at 16.23.05

Step 2

a) Select this Ready Made design from the available designs

Screenshot 2025-01-31 at 16.24.29

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. 

Step 3

  • A) Add Prizes:

Click anywhere on the Gabber Machine to open its settings. 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. 

 And you can of course upload your own images to any of the other folders in the Media Library.

Screenshot 2025-01-31 at 16.30.11 Screenshot 2025-01-31 at 16.32.37

 

Screenshot 2025-01-31 at 16.36.05

 

Screenshot 2025-01-31 at 16.37.28

 

 

  • 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. 

Screenshot 2025-01-31 at 16.43.05

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 fieldScreenshot 2025-01-31 at 16.44.31

To make the maths easy, we'll work on the assumption that there will be 10,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)

10% off

22.13% 2220
15% off 2.50% 250
20% off 0.25% 20
50% off 0.13% 10
Grand Prize 75% 7500

Tip

If you want the Grabber Game to drop a prize or fail to pick up a prize, then you must leave the 'Prize Media' image to blank.

It usual that you would use a default losing segment to be entry to a prize draw - it's just a far nicer way to say it than to give them nothing.

There's another reason for creating this losing segment -  if you are unsure of the number of entries you'll have, then with a default losing segment,  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

Screenshot 2025-01-31 at 16.51.48

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

Screenshot 2025-01-31 at 16.56.51

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.

 

Advanced

If you would like to link entrants to a Typeform and pass through data collected from this promotion, so as not to have them fill in the same info, then read this section. (if not, feel free to skip). 

Step 1

First we need to create an alternative button to display in the Result Messages, this means that we have to hide the existing default button with some CSS in the Theme > Advanced. Paste this into your Stylesheet:

.step-share .next-btn{
  display:none;

Screenshot 2025-01-31 at 21.38.18

Step 2

Now the default 'finish' button is hidden in your Result Messages, you'll need to create a new one. 

To do this, go to the Results Page of your promotion and click on the Result Message that show to open the settings. Open the first Result Message and click Source as shown below

Screenshot 2025-01-31 at 21.41.29

You will see the html source code for all the content you currently have in this Result Message.

We are now going to add some more HTML below the existing HTML code to create a new button and point that new button to a live Typeform page which has been set live on your own Typeform Account to accept hidden data fields. (You must first familiarise yourself with this article from Typeform about hidden fields and set up your Typeform.

The code we used to point to our own Typeform was as follows:
You must replace the URL with the URL for your own Typeform.

<p style="margin-left:auto;text-align:center;">
    <a style="background-color:#FF8025;border-radius:8px;border:1px solid transparent;color:#ffffff;margin-bottom:0;margin-right:auto;margin-top:0;padding:12px 36px;text-decoration:none;" href="https://beeliked.typeform.com/to/smbBLos8#email={{entrantField(‘email’)}}&amp;first_name={{entrantField('first-name','First Name')}}&amp;last_name={{entrantField(‘last-name’)}}&amp;pronoun={{entrantField(‘gender-1’)}">Enter our Sweepstake</a>
</p>

Screenshot 2025-01-31 at 21.53.23

Note: Currently within the Builder the 'hidden' default button will continue to show as the custom CSS you added to the Theme doesn't get applied  to the Builder view. However, if you click Preview and go through the entry steps, you will find that the default button has been hidden and only one button shows. 

So don't be alarmed by this double button in the Builder

Screenshot 2025-01-31 at 21.59.23

If you get stuck, do reach out to our Support team who will be happy to assist.

 


 

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.

Screenshot 2025-01-31 at 17.01.23

Now select one of the other background images found in the Ready Made folder in the Media Library, or upload your own (to one of the other folders). 

Screenshot 2025-01-31 at 22.02.38

The size of the background image is best when it is approx 2000 x 1200. You can always find the size of an image in the Media Library by selecting it and then hovering over the image thumbnail as shown above.

Step 2

If you would like to change any aspect of the Grabber Machine colors or designs then you click on the Grabber Game in either the Start Page or Lucky Draw page and in the Settings that appear, click on Machine Details. Here you can change between different machine designs and then change the colors and the imagery. 

Screenshot 2025-01-31 at 22.05.05