This guide will show you how to customize the Spin Wheel plugin to meet your specific needs, ensuring it aligns with your goals and enhances website engagement effectively.
Explore The Spin Wheel – An interactive spinning wheel that offers coupons
Boost your website engagement and drive more sales with 🎁 Spin Wheel, the best spin wheel popup WordPress plugin. Offer your visitors a fun, gamified experience by letting them spin to win exclusive discounts and coupons. This interactive tool is perfect for growing your email list and enhancing customer loyalty.
With extensive customization options, advanced display settings, and robust spam protection, Spin Wheel makes it easy to create captivating offers that boost conversions and keep users coming back.
After customizing the backend, reload your website to display the Spin Wheel on the front end. Enter your name and email in the respective fields, then click the Spin the Wheel(Get Lucky) button.
After spinning your wheel, you will get the coupon code as the above screenshot, and the winner information(Name, Email, Coupon, etc) will be found in the Backend Entries tab section.
How to Setup and Download the Spin Wheel Plugin
To use the Spin Wheel plugin, you should need to download the plugin first. You can easily find the plugin on the WordPress.org site. Don’t worry about it. We have attached a download link here. Just visit the link and download the plugin. Here is the download link. After downloading and activating the plugin, just follow the below steps.
Let’s start to customize the plugin
After installing and activating the Spin Wheel plugin, The plugin will appear on your WP plugin dashboard. From here you can easily customize the plugin. Here you will get the 7 tabs section to customize the plugin. Like as – Settings, Style, Coupons, Form, Win Info, Lost Info, and Entries.
Explore the Settings Tabs section
The Settings tab for the Spin Wheel plugin offers crucial configuration options to set up your Spin Wheel campaign. It includes visibility controls for responsive devices and options to manage display visibility. This section provides essential features to help you build and tailor your Spin Wheel campaign effectively. Let’s dive into customizing the Settings tab to get started.
Come to the Settings tabs section, you will get the below options to customize the section.
1. Campaign Name: Set a unique name for your Spin Wheel campaign to easily identify and manage different campaigns. In this example, the campaign name is Happy Offers, but you can choose a name that fits your specific needs and goals.
2. Status: Within the Status feature, you will get two switcher buttons. One is Enable Wheel Popup, and the other is Development Mode.
Enable Wheel Popup: Use the switcher button to enable or disable the Wheel Popup on your website. When enabled, the Spin Wheel will appear as a popup, offering visitors an interactive experience.
Development Mode: This feature is useful when building or testing your Spin Wheel system. Enabling the switcher ensures the popup appears on your website after every reload, allowing you to easily review and verify changes. This is especially helpful during the development phase. Once you’ve completed your setup, be sure to disable development mode. Otherwise, the popup will appear after every reload of your website.
3. Which Devices Will This Popup Appear: This option allows you to control the visibility of the Spin Wheel popup on specific devices such as Desktop, Tablet, and Mobile. Simply enable or disable the switcher buttons to show or hide the popup on your chosen devices.
4. Spam Protection:
Email Coupon: By enabling the Email Coupon switcher button, you won’t receive the coupon code immediately after spinning the wheel. Instead, the coupon will be automatically sent to the subscriber’s email who fills out the form, streamlining the process.
Invisible reCAPTCHA (Coming Soon): Enhance security and prevent spam on your Spin Wheel popup by integrating Google’s reCAPTCHA, which works silently in the background to verify users without interrupting their experience. The Feature will be coming soon.
Double Opt-In (Coming Soon): Add an extra layer of verification to ensure that email addresses are valid. This feature requires users to confirm their subscription, enhancing the quality of your email list and reducing spam. This Feature also will be coming soon.
5. WooCommerce: The Woocommerce option lets you bring the woocommerce coupon code from your Woocommerce plugin and this Woocommerce Coupon sync automatically within the Spin Wheel plugin coupon settings. Just enable the Woocommerce option switcher button and hit the save button. After that go to the Spin Wheel plugin coupon settings > hit the sync WC coupon button and also hit the save button then the Woocommerce Coupon sync automatically on your Spin Wheel coupon section. Please see the below screenshot.
Note: You must need to install and activate the Woocommerce plugin and If you don’t have any Woocommerce Coupons then please create or generate some coupons first. Just follow the below screenshot and create or generate the Woocommerce coupons.
Describe the display Rules
The Display Rules section allows you to control when and how the Spin Wheel popup appears to visitors. Here are the key options:
5. When to show the Popup / Campaign: You can select from various display options:
On Page Load: The popup appears immediately when the web page loads. The spin wheel popup will appear after every reload of your website. Here you also set the Show Popup After Visitor Spends Time. This setting allows you to specify the amount of time a visitor must spend on the page before the Spin Wheel popup appears.
On Exit: The popup triggers when a user attempts to leave the page. Before leaving the website the popup will appear for the visited users.
On Scroll: This setting allows the Spin Wheel popup to activate once the user scrolls down a specified percentage of the page. You can customize the “Show on Scroll” percentage; for example, if set to 50%, the popup will appear after the visitor has scrolled halfway down the webpage. This feature encourages user engagement by timing the popup to coincide with their browsing behavior.
On Inactivity: This setting triggers the Spin Wheel popup after the user has been inactive for a specified duration. If a visitor doesn’t interact with the page during this specified time, the popup will appear, encouraging them to engage with the offer. This feature effectively draws the attention of users who might have lost focus, prompting them to return and take action. You can customize the inactive time from this section.
On Click (Pro Feature): You can shown the Spin Wheel popup by using the On Click Event. If you select the On Click event then you will get a custom CSS selector option. You can easily add any Class or ID as a selector to show the spin wheel. If you use ID as a selector then Please use the “#” before the ID and If you use Class as a selector then Please use the “.” before the class.
Referrer (Pro Feature): The Referrer option lets you show the spin wheel popup for the visitors who are coming from that referrer. In the Contains field, you can keep any kind of domain or media link (like – facebook.com, Instagram, Twitter, Bdthemes.com, etc) as the referrer.
For example- if you set the display option as Referrer and put the Facebook link in the contains field then only your Facebook visitors can see the Spin Wheel popup through your shared Facebook link.
Let’s explore the other display rules-
6. When the Popup will Reappear for the same Visitor: From here you can set a counter of days for reappearing the popup for the same visitor. If you set the day as-2 then after 2 days later the popup will appear for the same visitor.
7. When the popup will show or hide: This option enables you to specify custom dates and times for displaying or hiding the Spin Wheel popup. It’s essential to ensure that the website server time aligns with the popup’s scheduled showtime. If the times are not synchronized, the popup may not display correctly. Therefore, always verify that the website server time matches the popup’s start and end times to ensure proper functionality.
8. Advanced Conditions: The Advanced Conditions section allows you to set specific criteria for displaying the Spin Wheel popup. You can configure:
User Role: Allows you to display the popup for users with specific roles, such as Administrator, Author, Contributor, Editor, or Subscriber.
User Status: You can display the popup based on whether a user is Logged In or Logged Out.
Duplicate Filters ( Pro Feature): This option allows you to filter duplicate entries for the same user. You can filter the duplicate entries by using the user’s email and IP address. The IP address feature will come soon.
Page Filtering ( Pro Feature): You can set specific pages to display the Spin Wheel Popup from here. For example – here we set some specific pages like – Cart, Shop, Checkout, and Zoloblocks. The Spin Wheel popup only appears for the selected pages.
Use the Add Condition button to create new conditions and the Delete icon to remove them. Click Save Settings to apply your changes.
Explore the Style Tab Section
The Style Tab enables you to customize the visual appearance of your popup or campaign. You can adjust item backgrounds, configure visibility triggers, and arrange your promotional items. This section is essential for creating an engaging and visually appealing experience for your users.
Come to the Style Tab sections, you will get the below options to customize the Style Tab section.
1. Item Color: This option lets you change the Item color to your working demand.
2. Clone Item: This option lets you Copy the Item. If you want to duplicate any item then just hit the Clone Item button.
3. Delete Item: Remove any unwanted items from your list with a simple click.
4. Add Item: This option lets you Add the new Item.
5. Reset Item: Restore items to their default settings if needed.
6. Save Settings: Save your item configurations to ensure that all changes are applied successfully.
7. Presets (Pro Feature): The Presets feature gives you some ready-made or predesign spin wheel styles for the Target Image and Overlay Image. Let’s describe these features-
Target image
Inside the Target image, you will get a Default image and some Examples images. You can choose any one of them to style the Target image of the spin wheel. Here you also get a Custom Image option and you can easily set a custom image for the spin wheel Target image. Just keep the Image URL inside the custom image field.
Note: For the custom image, we recommend you resize or customize(Image height and width) the custom image first so that it looks fine or adjustable with the Spin wheel. You can use any JPEG, PNG, or SVG image for the custom image.
Overlay Image
Inside the Overlay image, you will get a Default overlay and some Example Overlay. You can choose any one of them to style the Overlay image of the spin wheel. Here you also get a Custom Image option and you can easily set a custom image for the spin wheel Overlay image. Just keep the Image URL inside the custom image field.
Note: For the custom image, we recommend you resize or customize(Image height and width) the custom image first so that it looks fine or adjustable with the Spin wheel. You can use any JPEG, PNG, or SVG image for the custom image.
Customize the Coupon Tab Section
The Coupons section in the Spin Wheel settings allows you to configure and manage discount codes for your campaign.
This Tabs section allows you to generate your demanding coupon code for the spin wheel winners. At first, you will get an error message”Please Modify / Save Coupon”. Just hit the save button or modify any coupon then the error message will disappear from your Coupons tabs section.
Let’s explore the Coupon tabs section in detail-
1. Label: This option lets you set/change the Coupon Label. Set or change the coupon label for clear identification.
2. Discount Code: Create or modify discount codes for promotions. You can create any Discount code from here.
3. Max Available Wins(Pro Feature): Max Available Wins is the maximum number of times a coupon can be won. For example – If you set the maximum available win number as 10 then after 10 times wins, the coupon will expire and be removed automatically from the spin wheel popup.
4. Win button: Enable or disable the win switcher button to show or hide the coupon code from the Spin Wheel. For example, if you disable the 50% discount coupon code then the 50% discount coupon code will hide from the spin.
5. Probability: Set the chance of winning a discount coupon. You can set specific Probability for the specific coupons. Values range from 0 to 100, where higher numbers increase the chances of being selected.
6. Add button: Quickly add new discount coupon codes to your list by hitting the Add button.
7. Delete: Remove unwanted discount coupon codes easily.
8. Save Settings: Saves all the changes made to the coupons and applies them to the active campaign.
Customize the Form Tab Section
The Form tab section allows you to tailor the Spin Wheel submit form to fit your specific requirements. Within this section, you’ll find the following subsections: Container, Title, Description, Form, and Button. Let’s describe form subsections.
In the Container subsection, you will get the below options-
1. Background Color: This option allows you to customize the background color of your popup using a gradient effect. You can choose between Linear and Radial gradient types, and adjust the angle of the gradient to achieve the desired look. This feature helps create a visually appealing backdrop that enhances the overall aesthetic of your campaign.
In the Title subsection, you have the following customization options:
1. Text: The Text field option lets you keep or change the title text to your needs.
2. Text Color: Change the color of the title text to match your design.
3. Alignment: You can set the Title Alignment as – Left, Center, and Right.
4. Font Size: Customize the font size for the title to make it more visually appealing.
In the Description subsection, you have several options to customize the text and appearance of your Spin Wheel form description:
1. Text: Keep or modify the description text to provide clear instructions or context for users.
2. Text Color: Change the color of the description text to match your branding or enhance visibility.
3. Alignment: Set the alignment of the description text to Left, Center, or Right, allowing for a tailored layout.
4. Font Size: Adjust the font size of the description to ensure readability and impact.
Come to the Form subsection, you will get the below options-
1. Text Color: This option lets you change the Form Text color.
2. Background Color: This option lets you change the form Background color.
3. Border Color: This option lets you change the border color of the form.
4. Font Size: This option lets you set the font size for the Form.
In the Button subsection, you have the following customization options:
1. Text Color: Change the color of the text on the button to enhance visibility and match your branding.
2. Background Color: Adjust the background color of the button to create a visually appealing and engaging call to action.
3. Border Color: Modify the border color of the button to add definition and style.
4. Alignment: Set the button alignment to Left, Center, Right, or Justified to suit your layout preferences.
5. Font Size: Customize the font size of the button text to ensure readability and visual impact.
Customize the Win Info Section
The Win Info section allows you to customize the win form that appears after a user spins the wheel. A key feature here is the use of Curly Brackets, which dynamically display the discount coupon instead of static text.
For example, if you want to show the message “Hey, You got 30% OFF, Congrats” after the spin, you would write “Hey, You got {{prize}}.” The text inside the curly brackets, “prize,” will automatically be replaced with the dynamic discount coupon (e.g., “30% OFF”).
Hey, You got {{prize}} Congrats = Hey, You got 30% OFF Congrats,
you won {{prize}}, let’s enjoy the Deal. = Congrats, you won 30% OFF, let’s enjoy the Deal.
Note: If you want to show static Text then you don’t need to use the Curly brackets.
Backend screenshot for the curly brackets-
Frontend screenshot for the curly brackets-
Come to the Win Info section, you’ll find the following subsections: Title, Description, Form, and Button. Let’s describe those subsections.
Come to the Title subsection, you will get the below options-
1. Text: The Text field option lets you keep or change the title text to your needs. Here you can use the Curly brackets to show the dynamic discount coupon text and if you want then you also can use the static text for the Win Info Tabs form Title.
2. Text Color: This option lets you change the Text color for the Title.
3. Alignment: You can set the Title Alignment as – Left, Center, and Right.
4. Font Size: This option lets you set the font size for the Title.
Come to the Description subsection, you will get the below options-
1. Text: The Text field option lets you keep or change the Description text.
2. Text Color: This option lets you change the Description Text color.
3. Alignment: You can set the Description Alignment as – Left, Center, and Right.
4. Font Size: This option lets you set the font size for the Description.
Come to the Form subsection, you will get the below options-
1. Text Color: This option lets you change the Form Text color.
2. Background Color: This option lets you change the form Background color.
3. Border Color: This option lets you change the border color of the form.
4. Font Size: This option lets you set the font size for the Form.
Come to the Button subsection, you will get the below options-
1. Text Color: This option lets you change the Button Text color.
2. Background Color: This option lets you change the Button Background color.
3. Border Color: This option lets you change the Button Border color.
4. Font Size: This option lets you set the font size for the Button.
Customize the Lost Info Section
Come to the Lost Info section, you’ll find the following subsections: Title, Description, and Button. Let’s describe those subsections.
In the Title subsection, you can customize the following:
1. Text: Adjust or replace the title text to suit your specific needs.
2. Text Color: Change the color of the title text to match your design preferences.
3. Alignment: You can set the Title Alignment as – Left, Center, and Right.
4. Font Size: This option lets you set the font size for the Title.
Come to the Description subsection, you will get the below options-
1. Text: The Text field option lets you keep or change the Description text.
2. Text Color: This option lets you change the Description Text color.
3. Alignment: You can set the Description Alignment as – Left, Center, and Right.
4. Font Size: This option lets you set the font size for the Description.
Come to the Button subsection, you will get the below options-
1. Text Color: This option lets you change the Button Text color.
2. Background Color: This option lets you change the Button Background color.
3. Border Color: This option lets you change the Button Border color.
4. Alignment: You can set the button Alignment as – Left, Center, Right, and justified.
5. Font Size: This option lets you set the font size for the Button.
Customize the Entries Section
The Entries section of the Spin Wheel allows you to view, manage, and export participant details and their interactions with your campaign.
Key features include:
1. Campaign: You will get the Campaign name here.
2. Name: View the names of participants who entered and won the Spin Wheel coupon.
3. Email: Access the email addresses associated with each entry for follow-up or communication.
4. Coupon: See the specific coupon codes won by participants, including discounts or offers.
5. Created At: Check the timestamp of when each entry was submitted, providing context for participation.
6. Action: You can delete the Entries participant’s data from here.
7. Download CSV (Pro Feature): This option lets you download the participant’s campaign data as a CSV file. Exports all entries into a CSV file for offline analysis, reporting, or integration with other tools.
All done! You have successfully customized the Spin Wheel Plugin on your website.
Video Assist
The Demo and Video will come soon. Thanks for staying with us.