How to Add a Spin Wheel to a Website

A spinning wheel is a fun and interactive way to engage your website visitors while encouraging them to take action. Whether you’re offering discounts, giveaways, promotional offers, or other rewards, a spinning wheel can help increase participation and create a more memorable experience.

With Jotform’s Spinning Wheel Widget, you can customize prizes, personalize the widget’s appearance, and choose how visitors interact with it, all without writing a single line of code. Once everything is set up, simply embed it on your website to start engaging your visitors.

Creating Your Spinning Wheel Widget Embed Code

Before you can add the Spinning Wheel Widget to your website, you’ll first need to customize its appearance, set up your prize segments, and configure how visitors interact with it. This is how it’s done:

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

2. In the menu that opens up, click on 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 Website Widgets, under the General tab in the Widget Properties panel on the right side of the page, configure the following options:
   • Heading — Show or hide the heading section displayed at the top of the spinning wheel.
   • Heading Text — Customize the main title displayed above the spinning wheel to introduce your promotion or encourage visitors to participate.
   • Description — Add a short description below the heading to explain how the spinning wheel works, highlight the available prizes, or provide any additional instructions.

6. Then, scroll down and click each Prize Segment to configure its settings:
   • Add Prize — Adds a new prize segment to the spinning wheel.
   • Prize Name (First Field)  — Edit this to specify the text displayed on the wheel segment and in the winning result when a visitor lands on that prize.
   • Promo Code (Second Field) — Use this to store the coupon or redemption code associated with the prize. Visitors can use this code to claim their reward after winning.
   • High Chance Price — Toggle this on to mark the prize as a high-probability reward. 
   • Chance (Third Field) — Set up the percentage chance of landing on this prize. Higher values make the prize more likely to be won. The sum of all prize chances equals 100%.
   • Segment Color — Utilize this to control the color of the prize segment on the wheel, making it easier to distinguish different prizes or match your brand colors.
   • Up — Click this to move the selected prize one position higher in the prize list, changing its placement on the wheel.
   • Down — This moves the selected prize one position lower in the prize list.
   • Duplicate (Duplicate Icon) — Click on it to create an exact copy of the selected prize, including its label, promo code, chance, and color. This is useful when creating similar prizes.
   • Delete (Trash Icon) — Use this to permanently remove the selected prize segment from the wheel.

7. Next, scroll down and continue to configure these options:
   • Require Email — Require visitors to enter their email address before spinning the wheel. This is useful for collecting leads or growing your mailing list.
   • Spin Button Text — Customize the text displayed on the button visitors click to spin the wheel.
   • Result Title — Set the title displayed after the spin is complete, such as Congratulations! or Better Luck Next Time!.
   • Result Message — Customize the message shown after the spin to provide additional information about the prize or outcome.
   • Show Reward Code — Display a reward or coupon code to visitors after they win a prize.
   • Claim Reward Button — Show a button that lets visitors claim or redeem their prize.

8. Now, scroll down to the bottom and set up these things:
   • Result Button Text — Customize the text displayed on the reward or result button.
   • Result Button URL — Specify the page visitors are taken to when they click the result button, such as a checkout page or promotional landing page.
   • Open in New Tab — Choose whether the result button opens its destination in a new browser tab.

9. Moving on, switch to the Styles tab and manage the following options:
   • Theme — Choose a pre-designed theme to quickly change the overall appearance of the spinning wheel.
   • Card Corners — Adjust how rounded the corners of the widget card appear.
   • Card Colors
     • Surface — Set the color of the card or content area surrounding the spinning wheel.
     • Text — Choose the primary color used for text throughout the widget.
     • Muted Text — Customize the color of secondary or less prominent text.

10. Then, scroll down to the bottom and set up these other options:
    • Wheels Colors
      • Primary — Choose the primary color used on the spinning wheel segments.
      • Secondary — Choose the secondary color used to alternate wheel segments.
      • Accent — Set the accent color used for highlights and decorative elements.
      • Button — Choose the background color of the spin button.
      • Button Text — Set the color of the text displayed on the spin button.
    • Jotform Branding — Show or hide Jotform branding on the widget, depending on your plan and preferences.
    • Custom CSS — Apply your own CSS styles for advanced customization beyond the built-in settings.

11. Following that, switch to the Layout tab and manage these options:
    • Placement — Choose where the spinning wheel appears on your website.
    • Spin Limit — 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 duration provides quicker results.
    • Show on Desktop — Choose whether the widget is displayed on desktop devices.
    • Show on Mobile — Choose whether the widget is displayed on mobile devices.
    • Wheel Sound — Enable or disable the spinning sound effect to make the experience more interactive.

That’s it. You’ve finished creating your Spinning Wheel Widget. The next step is to get its embed code and embed it on your website.

Getting Your Spinning Wheel Widget Embed Code

Once you’ve finished customizing your Spinning Wheel Widget, the next step is to get its embed code so you can add it to your website. Here’s what to do next:

1. In Website Widgets, in the pink navigation bar at the top of the page, click on Publish.

2. Then, click on Copy Code.
3. Or, if your website is built on a supported platform, click on Platforms in the menu on the left. 

4. Next, in the Search bar at the top of the Platforms page, search for the specific platform.

5. For this example, we’ll use the Framer platform. Click on its icon.

6. Finally, click on Copy Code, and you’re done.

That’s it. Simply paste the embed code into your website, and the widget will automatically appear for your visitors, giving them a fun and interactive way to engage with your content and win prizes. Take a look at the screenshot below to see how it appears on a sample website.