How to Create a Fortune Wheel


Create a visually appealing and interactive spinning wheel on your website or campaign page. The Fortune Wheel can be customized to feature various promotions, discounts, and prizes that visitors can win by simply clicking to spin. This gamification element enhances user engagement and significantly boosts conversion rates by adding a fun, game-like experience to your promotions.


Here’s an example of a popup wheel in action:


fortune wheel example



  • Enhanced Engagement: The interactive nature of the Fortune Wheel keeps users on your site longer.

  • Increased Conversion Rates: It adds a playful element to promotions, encouraging more participation.

  • Customizable Features: Tailor the wheel to match specific campaigns with custom labels, colors, and offers.


To Create a Fortune wheel


Customizing the 1st screen


Step 1: Creating a Fortune Wheel Campaign 


  • On the dashboard, navigate to the “Campaigns” tab in the sidebar on the left. This will take you to the campaigns page, where you can manage or create new campaigns.

  • Click the "+ New Campaign" button on the top right of the campaigns page to initiate creating a new campaign from scratch.


adding new campaign


Step 2: Configure Your Campaign


  • Click the “Multi Screen” option to select it as your popup type.

  • Select the Popup Size from the sizes available.

  • Select the Position of the popup on the screen.


custommize popup layout


Step 3: Customizing background and Border Elements


To customize the Background 


  • Under the “Background” section, select the “Color” tab. Click on the color box next to “Color” to open the color picker. 

  • Enter the hex code #a2cfe2 (for reference) into the color picker or use the picker to choose the desired shade of blue. This will set your background to the specified color. 


To configure the Border


  • Adjust the “Border Width” slider to set the border width. 

  • Adjust the “Corner Radius” slider to set the radius, giving your border rounded corners.

  • Choose the style of the border by clicking on the dropdown menu under “Style” and selecting “Solid” if it's not already selected.

  • Set the Border Color by entering #e6e6e6 (for reference) in the color picker.



customizing background and border


Step 4: Customizing Text Elements 


  • In the “Elements” panel, click on the “Text” icon. Drag and drop the text element to the desired location on your popup.

  • Click and enter the desired text content into the editable area. You can customize the font, size, color, and alignment as per your requirements.


add text elements


Step 5: Adding the Fortune Wheel Element 


  • Return to the “Elements” panel and click the “Wheel” icon. Drag and drop the wheel element onto the popup, positioning it where you want the spin wheel to appear.

  • Navigate to Coupon and select the coupon side as “Wheel Generated Coupon.”


adding wheel


Step 6: Customizing Fortune Wheel Setting


  • Navigate to Fortune Wheel and click to expand the customization options. 

  • Click on the text field under the 'Label' column to add or edit the labels for each wheel slice. Labels are the visible text on the wheel that users will see, such as "10% OFF", "5% OFF", etc.

  • Enter each label's promotion or discount code in the 'Code' column. These codes will be displayed to users when they land on a particular slice, for instance, "WELCOME10" for 10% off.

  • Set the probability for each slice to be selected by entering a number in the 'Weightage' column. This is typically a representation of the chance in percentage. Ensure that the total of all weightages equals 100% for a fair distribution of probabilities.

  • Use the actions column to add or remove slices from the wheel. The '−' symbol is used to delete a slice, while the '+' symbol is to add a new one.


fortune wheel


Step 5: Adding an Email Field


  • Click on the “+ Add New Field” button located at the top left of the “Input Fields” section.

  • From the list of field types that appear, select the “Email” option. After selecting the “Email” option, a new email field will be added to your form.

  • If the email field is mandatory, ensure to check the “Required” box at the bottom to make the field mandatory for form submissions.


addig email field


Step 6: Adding the Submit Button


  • Locate the “Button” icon and click to select it. Then drag and drop it onto your popup where you want your CTA to appear.

  • Enter the text for your CTA, such as “Claim Your Offer.”


adding CTA text


Customizing the 2nd screen


Step 1: Add and Customize Text

  • Under “Elements,” click on the “Text” icon in the left sidebar. Drag the text element to the popup screen where you want the text to appear.

  • Click on the newly added text box to edit the content.

  • Type in your desired text, such as a congratulatory message or details about the discount.


add text elements


Step 2: Add a Coupon Code:

  • In the “Elements” section, click the “Coupon” icon and drag the coupon element to the desired location on your popup screen.

  • Once placed, click on the coupon box to customize the content.


adding coupon code


Step 3:  Carefully review your campaign. Make adjustments as needed, and once satisfied, click “Save and exit.”


Your Fortune Wheel is now created. If you encounter any issues or have any questions, feel free to contact our support team.



Related Articles:

  • How to Create Overlays for Mobile Devices
  • How to Set up a Countdown Timer Overlay
  • How to Use Overlays for Retargeting & Boosting Conversions
© 2005 - 2024 ProProfs