How to add spinning wheel to a website?

Spinning Wheel/ Wheel of Fortune

In previous articles, we explained How to add an event calendar to a website? or How to add number counter to website? In this tutorial, we will show you another function/widget from Elfsight. This widget will help you add the popular online Spinning Wheel/Wheel of Fortune to your website. The main advantage of all widgets from Elfsight is the possibility of their wide use in various online editors (Webnode, Weebly, WordPress…).

Spinning Wheel widget allows you to attract and engage the visitors to your website in an interactive way, increases the sales of your e-shop and helps you to easily collect new e-mail addresses. Who can resist a Wheel of Fortune with the promise of winning? Even the biggest skeptics will surely like to take a spin.

This randomized carousel offers a wide degree of customization and personalization. It is responsive, it adapts to the device (computer, tablet, mobile). Wpromotions.eu appreciates the possibility to set a different “falling chance” for each win and the possibility to reopen the wheel popup after closing.

Let’s do it!

Spinning Wheel – Free VS Premium

Spinning Wheel that we describe in this tutorial is for free. The external service Elfsight offers in its free version (LITE) the possibility to create 1 widget without purchase.

If you need more than 1 widget, it is necessary to purchase one of the Premium tariffs offered by this service.

The price starts at 6 USD/month. True, you will often come across various actions which reduces the cost of the service.

Spinning Wheel – Templates

External service Elfsight currently offers 11 Spinning Wheel templates to choose from. All templates offer a wide range of customization and personalization.

All Elfsight templates are responsive – they adapt to the device (computer, tablet, mobile). They are modern and user-friendly.

How to Add Spinning Wheel to a Website in Webnode? 

1. Go to the official website https://elfsight.com/, open the Widgets tab and select Spinning Wheel.

2. Click on Continue with this template.

3. In the first step, under the Content section, you can set all the content components of the spinning wheel. Elfsight allows you to rename the title (1) of the wheel, change the text (2), remove/add the need to enter an email to spin the wheel (3), add your logo (4) or insert the footer text (5). 

You can also add another prize under the Content section by clicking Add Prize. When creating a new price, you enter the Prize Name (1), Heading (2), Text (3), Promocode (4), Action Button Text (5), Action Button Link (6) and Footer text (7).

Crucial aspect of Spinning Wheel widget is the possibility to set the Chance (8) with which probability the given prize will fall. The lower the percentage you set, the smaller the chance of winning this prize.

The last option is to set the color of the given price (9).

Most of the settings are visible to the customer after the given prize has fallen.

4. Under the Settings section, you can set when the popup window with the Spinning Wheel will appear – Show Popup (1). You have several options to choose from: Instantly, After Delay, On Scroll or On Exit Intent.

You can also set Pages (2), subpages of your website on which the wheel of fortune will be displayed, and/or Devices (3), on which devices the carousel will be displayed.

Under Schedule (4) you can set which day and from-to hours the spinning wheel will be displayed on your website. A great advantage is that you have the option to repeat the setting. That is, the wheel can be displayed on the website e.g. every day between 15:00 and 21:00.

The last option to set is Language (5).

5. Under the Notifications section, you can decide if an e-mail notification to the winner/client will be sent – Price Confirmation to Client (1) or if an e-mail notification to the owner of the website will be sent – Owner Notification (2). You enter the owner’s e-mail in the field Owner Email (3).

6. The Theme section offers you the possibility of wider personalization by setting the Background color (1), Text Color (2) and Font (4), as well as setting the overall color scale Accent Color (3) – the color of the button, the default color of the spinning wheel…

7. If you are done with the modifications, click on Add to website for free.

The service will ask you to log in. You can use your existing Google or Facebook account or log in with your email.

8. Click the Publish button in the upper right corner and copy the necessary HTML code using Copy Code.

9. Log into the Webnode editor and enter the code according to the services you have purchased in Webnode:

10. Done – after inserting the code, just publish the changes with the Publish button in the top bar. You will see the Spinning Wheel widget in the published version of your website.

A Few Words at the End

Spinning Wheel by Elfsight is a quick and effective way to increase your sales. The modern and responsive design of this widget, plus the promise of a win will definitely make it easier to collect e-mail addresses and increase the visitor’s interaction and engagement with your website/e-shop.

Spinning Wheel – FAQ

Can the user reopen the spinning wheel popup after it has been closed?

Yes. If the user has closed the popup window with the spinning wheel and wants to open it again, it is possible. You must assure that the Reopen Button option is active under the Settings section.

Where can I rename the text as “Spin Now”, “No, Thank you”, “Enter your email”, etc.?

Texts as “Spin Now”, “No, Thank you” or “Enter your email” can be changed under Settings – Edit texts.

Do I need technical knowledge to add an Elfsight widget to my website?

No, you don’t need technical knowledge at all. Read this tutorial and you’ll definitely be able to do it! Fingers crossed!

Do I have to enter a credit card number?

No – Elfsight service does not require a credit card to be filled in when using the Free (LITE) version.

More awesome tutorials