How to setup the spin-a-wheel template

Wheel of Fortune (aka Spin-a-wheel) Pop-up template provides a fun, game-like interactive experience for visitors on your site. Visitors can spin the wheel for a chance to win specific discounts or rewards (e.g., free shipping or percent off next purchase). With a “chance to win” an enticing offer on the table, visitors are more likely to participate, thereby increasing the likelihood to sign-up or to make a purchase, making the spin-a-wheel template one of the best performing pop-up designs for online retailers.

Select the Spin-a-wheel template

Step 1. Start by creating a new pop-up. In the design settings, you can pick the spin-a-wheel template.

Step 2. Follow thru the next steps and define how the pop-up will be triggered.

For example, after you picked the "On exit - unknown visitors", you can set additional criteria based on how the visitors will be chosen. For details on how each trigger works, please see our guide on Dynamic Pop-up.

After you choose select you can work on customizing the spin-wheel pop-up.

Customize the Spin-Wheel Pop-up

Within the pop-up builder, you can customize various elements of the spin-wheel template, including:

Pop background image by uploading an image or adding a URL link to the image file
Design settings provide you the flexibility to modify the background color, button style, and text.
Under Popup settings, you can customize the different slices of the wheel, designate a name for the pop-up and the list to which the subscribers will be added to. Detailed steps on customizing the Wheel are below.
Trigger settings allow you to adjust when and how the template will be displayed to your website visitors.

Within Pop-up Settings, you can fully customize the behavior of the wheel. Click on "Open Wheel of Fortune Settings" to access the setup screen.

Step 1. Customize the Wheel design

The default Wheel of Fortune comes with 6 slices; however, the number of slices can be easily adjusted. To add a new slice, simply scroll down, click "Add Slice" and a brand new slice of the pie will be added. To remove one, click the red "Trash Bin" button on the corresponding slice.

For each slice, you can fully customize the color, text, and resulting action or message when the pointer lands on the slice.

Currently, there are 2 resulting actions to choose from when a visitor spins and lands on a slice:

a) Show Message - A message will be displayed at the end of the spin. You can type in the Result Text within the corresponding text box. If you are using a coupon code, you can add the code directly to the message section as well for it to be displayed.

b) Redirect to URL - Alternatively, the visitor landing on this slice can be redirected to a specific URL address.

Each visitor who lands on a different slice can be placed into a different list. You can designate the list here within each slice.

Finally, to change the color of the text on a slice, click on the "Colors" tab to change the font color.

Don't forget to "Apply Changes" towards the bottom of the page in order to save all your changes.

Step 2. Design the Sign-up form

To spin the wheel, the visitor will need to enter their email address. On the right side of the template is the email capture form. You can customize the sign-up form in terms of text, color, and Call-to-action button under the "Sign-up form" tab.

Step 3. Adjust the Behavior of the Wheel

Perhaps you would not like to see a disappointed customer leave your site after landing on a "No Luck" spin. In this case, you have the option to designate the “default winner” for all visitors to ensure everyone wins.

Under "Advanced Settings", you can select the winner to be random or of a specific choice. The Random option gives each slice an equal chance. Whereas selecting any of the Slice text will ensure that visitor who spins the wheel will always land on the designated winner.

Furthermore, you can change the Font style of the wheel by adjusting the font size, direction, arch and the spacing between the characters.

Finally: Preview, Save and Activate

Last but least, don't forget to preview your pop-up, then click the "Save changes" button on the upper right side of the editor, turn on the activation button and just click again the "Save changes" button and your pop-up is ready!