spin the weel for discount source code

Spin Wheel for Discount Project

What is the Spin Wheel for Discount?

The Spin Wheel for Discount is a user-friendly web application that lets you create a visually appealing spin wheel with different discount options. This interactive element can be a great way to boost engagement, drive sales, and add a touch of fun to your website or online store.

This is a free project that you can learn from and even build upon to create your own product. Here is a basic example that you can test:

See the Pen Spin Wheel for Discount by Terry (@codinginbarn) on CodePen.

Getting Started:

  1. Download the Code: Head over to the GitHub repository: https://github.com/codinginbarn/Spin-Wheel-for-Discount. Download the code files, including the HTML, CSS, and JavaScript files.
  2. There are two different versions. One has the option to store a value into users browser localstorage which prevents multiple spins. If you inspect the (wheel.js) file, you will see the (const SPIN_EXPIRY_TIME_SECONDS = 45;) and some notes.
  3. Customize the Wheel:
    • Edit the HTML (discount-wheel.html or discount-wheel-one-spin.html):
      • rewards Array: This array defines the discount options on the wheel. Customize the labelmessage, and weight properties for each discount.
      • wheelImage: Replace the placeholder image with your desired wheel image.
      • spinButton: Customize the button text and appearance.
    • Edit the CSS (style.css):
      • Adjust the colors, fonts, and overall styling of the spin wheel to match your website’s design.
    • Edit the JavaScript (wheel.js or wheel_no_storage.js):
      • spinWheel() Function: This function handles the spin logic. You can modify the spin duration and other parameters as needed.
      • updateSpinCount() Function: This function manages the number of spins allowed. You can adjust the initial spin count and the logic for updating it.
  4. Upload the Files: Upload the modified HTML, CSS, and JavaScript files to your web server.

Using the Spin Wheel:

  1. Display the Spin Wheel: When a user visits your website, display the spin wheel prominently.
  2. Encourage Participation: Use clear calls to action to encourage users to spin the wheel.
  3. Reward Winners: When a user spins the wheel, display the winning discount message.
  4. Track Results: Monitor the number of spins, the distribution of discounts, and the impact on sales to optimize your spin wheel strategy.

Tips for Success:

  • Offer Attractive Discounts: Ensure the discounts offered are enticing enough to encourage participation.
  • Limit Spins: Consider limiting the number of spins per user to maintain fairness and prevent abuse.
  • Promote the Spin Wheel: Use pop-ups, banners, or social media to promote the spin wheel and drive traffic.
  • A/B Test: Experiment with different spin wheel designs, discount options, and promotion strategies to find what works best for your audience.


The Spin Wheel for Discount is a simple yet effective tool for engaging customers and boosting sales. By following these steps, you can easily set up and use the spin wheel to create a fun and rewarding experience for your visitors. Remember to customize the wheel to match your brand and optimize it for SEO to maximize its impact.

You have full rights to the Spin Wheel for Discount code. The only restriction is shown in the license file: our info must remain in all future code modifications and our linik is in the .js files.. You must credit us in the .js code files but you do no have to credit us on your HTML pages.

Scroll to Top