How to Add a Spinning Wheel to Your Website

With Jotform’s Spinning Wheel Widget, you can add an interactive wheel to your website and let visitors spin for discounts, coupons, rewards, or other offers. Customize each segment, embed the wheel, and turn promotions, giveaways, and lead generation into a more engaging experience.

Before you can add the Spinning Wheel widget to your website, you’ll first need to enter your data, customize how it looks, and copy the embed code for it. This is how it’s done:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for the Spinning Wheel.
4. Then, in the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, set up these properties:
   • Heading — Show or hide the heading section displayed at the top of the Spinning Wheel.
   • Description — Add a short description below the heading to explain how the Spinning Wheel works, highlight the available prizes, or provide any additional instructions.
   •  Prize Segment — Manage the prize segments available in the wheel.
     • Add Prize — Add a new prize segment to the wheel.
     • Pencil icon — Edit the selected prize segment.
     • Duplicate icon — Create a copy of the selected prize segment.
     • Trash Can icon — Delete the selected prize segment.
6. Next, click on the Pencil icon beside each segments to edit its settings.

7. Then, configure the following settings for the prize segment:
   • Prize Title — Enter the name of the prize to display on the wheel.
   • Coupon Code — Add the coupon code associated with the prize. 
8. Now, click on the Back button at the top-right of the Edit menu to return to the General tab. 

9. Next, scroll down at the bottom of the window and continue with these settings:
   • Customize Win Chances — Turn this on to adjust the chance of winning each prize instead of keeping them equal. 
   • Require Email — Turn this on to collect visitors’ email addresses before they can spin the wheel. 
   • Spin Button Text — Add a short call to action that appears on the button before the wheel spins.
   • Result Title — Enter the heading that appears after the wheel stops spinning. 
   • Result Message — Add a message to display after the wheel stops spinning.
   • Show Reward Code — Enable this to display the winning promo code when one is available.
   • Claim Reward Button — Turn this on to show a button visitors can click to claim their reward after winning.

10. Then, scroll down and configure the following settings:
    • Result Button Text — Enter the text to display on the button visitors click to claim their reward.
    • Result Button URL — Add the webpage URL where visitors will be directed after clicking the button.
    • Open in New Tab — Turn this on to open the URL in a new browser tab.

11. Now, under the Styles tab, customize these properties:
    • Theme — Click on the Downward Arrow icon and choose a pre-designed theme to quickly change the appearance of the Spinning Wheel.
    • Corners — Adjust how rounded the corners of the widget card appear.
    • Jotform Branding — Show or hide Jotform branding on the widget, depending on your subscription plan.
    • Font — Toggle this on to select and match your website’s font.
    • Custom CSS — Turn this on to add custom CSS code and apply advanced styling to the widget.

12. Then, under the Layout tab, configure the following settings:
    • Placement — Choose where the Spinning Wheel appears on your website.
    • Spin Limit — Click on the Downward Arrow icon and control how many times a visitor can spin the wheel.
    • Spin Duration — Adjust how long the wheel spins before it lands on a prize. A longer duration creates more excitement, while a shorter one gives quicker results.
    • Wheel Sound — Enable or disable the spinning sound effect to make the experience more interactive.
    • Devices to Display On — Click on the Downward Arrow icon and select whether the Announcement bar appears on desktop devices, mobile devices, or both.
13. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

14. Next, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
15. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

16. Then, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily. 

17. Now, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Spinning Wheel widget will appear on your website with the design and settings you selected for it. See the screenshot below for an example of how it looks:

Discover

Website Widgets

Supercharge your website with interactive widgets that empower visitors to take action.

Discover Now