1.0 Introduction
Knowband Magento 2 Spin and Win Extension is an alluring time-triggered gamified interface. The Magento 2 gamified popup offers an intuitive and fun-filled interface to your store visitors. The gamified approach motivates them to provide their email ids without annoying them with the conventional subscription popups.
Magento 2 Spin and Win extension by Knowband not just boosts the shopping experience of the customers, it even has a direct impact on the sale volume of the site. Magento 2 Spin and Win plugin offer coupons and discounts in a different, but better way. Magento 2 Spin and Win subscription pop-up incorporate a Wheelio or roulette wheel in the front-end of the site. The store visitors are required to enter their email IDs in order to spin the wheel. The wheel rotates with the admin defined labels on them and the customers get coupons associated with the coupon code.
In the updated version, there are some advanced features in Magento 2 Spin and Win module. The online merchant can now show a progress meter on the spin and win popup. In the slice settings option, the online merchant can now select the number of slices that he wants to show on the wheel. Apart from this, the online merchant can new schedule the themes for any specific time duration. This way, the online merchant can schedule themes for a special occasion like Christmas, New Year, Halloween in advance. Store owners can now easily export the customer list as a CSV file.
1.1 Features offered by Magento2 Spin and Win plugin:
- The Knowband’s Magento 2 Spin and Win module can be used at the three places, that is, at the entry or exit of the customers or when they scroll down.
- The Magento2 Spin and Win extension even allow the store admin to set the type of store visitors who can view the spin wheel interface.
- Magento 2 Spin and Win subscription pop-up offer email recheck option. The admin can avoid redundancy of the email IDs by enabling this feature.
- Magento 2 Exit intent pop-up comes with a number of pre-designed themes and wheel designs. The store admin can choose the one in accordance with their site theme and occasion like Christmas, Easter, Thanksgiving, Black Friday etc.
- The spin wheel of Magento 2 Spin and Win plugin can even be customized at a few button clicks. Thus, it can be easily made to blend with the theme of the website.
- The custom CSS option in the admin interface of Magento 2 Spin and Win extension allows the merchants to change the look and feel of the wheel design accordingly.
- The feature-rich Magento 2 Spin and Win module reduce the manual effort of the store admin. The Magento 2 email integrator syncs the captured details with the MailChimp, Klaviyo and Constant Contact account of the store admin.
- The Magento 2 interactive popup extension comes with a number of email templates. This makes it even easier for the store admin to send promotional triggers to the customers.
- The admin gets full access to manage the discounts being offered. The admin can customize the slices of the spin wheel from the back-end of the Magento2 Spin and Win extension.
- Even the possibility of a slice appearing once the wheel is rotated can be fixed from the admin interface of Magento 2 Spin and Win plugin.
- The online merchant can select the number of slices that he wants to show on the wheel. Admin can also configure the slices accordingly.
- In the updated version of the Magento 2 spin and win module, the online merchant can also show a progress Meter on the spin and win popup.
- In the updated version, there is a theme scheduling option for the admin. The online merchant can easily set up the themes and duration for which he wants to show the particular theme.
2.0 Installation
- Buy the Magento 2 Spin and Win module from KnowBand.
- The package has a zipped file that contains the user manual and the source code of Mobile App Builder Extension. Unzip the package.
- Create a folder{Magentoroot}/app/code/
Knowband/Spinandwin - Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: https://filezilla-project.org/)
. - Now run below commands to install the plugin:
1. composer require drewm/
2. composer require knowband/
3. composer require mobiledetect/
4. composer require geoip2/
5. php bin/magento setup:upgrade
6. php bin/magento setup:di:compile
7. php bin/magento setup:static-content:deploy
8. php bin/magento cache:clean
3.0 Admin Panel
The web admin interface of Magento 2 responsive pop-up offers easy customization option to the store admin. The spin wheel can be configured and managed in a few simple steps. Magento 2 Spin and Win Module have 8 setting tabs. They are mentioned below:
- General Settings
- Display Settings
- Look and Feel Settings
- Theme Scheduling
- Text Settings
- Slice Settings
- Email Marketing
- Email Setting
- Statistics
- User List
Let us discuss the various customization options that are discussed in detail.
3.1 General Settings
The General settings of the Magento 2 Spin and Win module allow the store admin to make the basic configuration settings. The various fields in this tab are discussed below.
1. Enable the extension
Enable this feature in order to show the wheel in the front-end of the site. If enabled, the spin wheel will be displayed on the website as shown in the image below:
2. Show Pull-out tab
The site visitors can remove the spin wheel from the screen of the website by clicking on the ‘No I do not feel lucky’ button. In order to bring the wheel back to the site, the customers get an option of the pull-out button. This button will be displayed only if this feature is enabled from the back-end of Magento 2 entry/exit popup module. Once this link is clicked, the wheel will display and the pull-out tab can be seen as shown below:
3. Display Logo
Admin can set the logo if he wants to show it on the spin and win popup.
After successful settings, this will be reflected in the website’s front-end interface as shown below:
4. Email Recheck
The store admin can check the duplicity of email IDs entered in the Magento 2 subscription pop-up by enabling this option. If enabled, the customers will not be allowed to rotate the wheel with the same email ID. This makes sure that one email id can avail the offer only once. Thus, Magento 2 email subscription popup makes it easier for the store admin to increase their subscriber base.
5. Enable Wheel Sound
Enable this option if you want a wheel sound on the website front-end.
6. Show Fireworks
You can enable this option for showing fireworks to the users on winning a discount.
7. Show Customer name
Admin can show customers first name, last name, full name on the spin wheel if he wishes to do so. Admin can select none option if he doesn’t want to show the customer’s name.
8. Require Customer name
Admin can show a field in which customers need to enter their name along with the email details.
9. Wheel Display Interval
Fix the number of days after which you want the pop-up to appear on the website. By default, it is set to 0 which means the wheel will be displayed all the time.
10. Show Progress meter
Admin can also show a progress meter on the spin and win popup. for this, the admin needs to enable the option and set progress percentage along with the progress text.
On the spin and win popup, this will look like that:
11.Custom CSS
The admin gets to make changes in the appearance by entering the custom CSS code in this section of the Magento 2 extension.
12.Custom JS
The admin can enter custom JavaScript in this section.
3.2 Display Setting
This tab of Magento2 Spin and Win subscription popup allows the admin to manage the appearance of wheelio as per the requirement.
The various customization options are discussed in details below:
1. Minimum Screen Size
Select the minimum standard size of the screen with which the wheel displayed in the front-end will be compatible. The wheel will work seamlessly on all the screen size larger than the selected one.
2. Maximum Display Frequency
Select the frequency of wheel display from the drop-down list.
3. Hide Spin Wheel After
Select when you want to hide the wheel from the drop-down list.
4. Set Time Interval
Enable this function if you want to display the spin wheel for a particular time period. Once enabled, the admin will be required to select the start and end time as shown in the image below:
Enter the date in the prescribed format, that is, mm/dd/yy as well as the time in both the sections. The wheel will be displayed only in between the selected duration set.
5. Whom to Show
Choose the visitor type to whom you want to show the spin wheel. You can either select all the visitors, or the new visitors or returning visitors to your site.
6. When to Show
Choose the time which you think is feasible for displaying the wheel by selecting one option from the drop-down list.
7. GEO Location
Select the GEO location where you want to display the Magento 2 interactive subscriber pop-up. Selecting the default option of worldwide will display the Magento 2 Spin and Win Exit Intent extension at every place where the website is being viewed.
3.3 Look and Feel Settings
The Magento 2 store admin can change the look and feel or appearance of the spin wheel subscription popup from this tab of Magento 2 spin and win module.
Here are some of the ways in which you can change the look and feel of the Magento 2 spin and win an extension.
1. Theme
The Magento2 spin and win module offer default front-end themes for the store owner to choose from. The admin can select the desired one from the drop-down list. This spin and win module now offer some great and elegant looking site themes for Christmas, Easter, Thanksgiving etc.
2. Theme Preview
Admin can preview the theme from here.
3. Wheel Design
Along with the front-end themes, the Magento2 spin and win plugin offer wheel designs as well. The e-merchants can choose the desired one from the drop-down menu in this section.
4. Wheel Preview
The selected wheel design can be previewed here.
5. Wheel Color
Set the wheel color from here.
6. Wheel Text Color
Select the text color of the wheel.
7. Wheel Background Color
The background color of the wheel can be changed by selected the desired shade from the color chart.
8. Font Color
The color of the texts written on the wheel can be changed from here.
9. Button Background Color
The background color of the buttons on the spin wheel can be changed from here.
10. ‘Try Your Luck’ button text color
Select the button text color for ‘Try Your Luck’ text.
11. ‘No, I do not Feel Lucky’ text color
Change the font color of the button by selecting the shade from here.
3.4 Theme Scheduling
The online store merchant can schedule theme as per the requirements. In the theme scheduling section, there are various customization options as shown below:
Admin can activate or deactivate theme scheduling functionality.
3.4.1 Steps to Add new Schedule
For adding new scheduler, the admin needs to click on Add new Schedule button as shown below:
After clicking on this button, the admin will get several customization options as shown below:
- Schedule Status: Admin can enable status from the admin interface of Magento 2 spin and win module.
- From date: Enter the date and time from which you want to schedule the theme.
- To Date: Enter the date and time till that you want to show this theme.
- Theme: Select the theme from the available drop-down. Theme preview option is also available for viewing the theme type.
- Wheel Design: Select the wheel design from the available options of Drop-down.
- Wheel Color: Select the wheel color from the available color picker tool.
- Wheel Text color and Background Color: Select the preferred color from these available color options.
- Font Color: Select the font color from the color picker tool.
- Button Background color: Select button background color.
- ‘Try Your Luck’ Button text color: Enter the text color for ‘Try Your Luck’ button
- No, I do not feel lucky text Color: Set the color for “No, I do not feel lucky” text.
3.4.2 Steps to Update Schedule
Admin just needs to click on the “Edit ” button for editing and schedule from the admin interface as shown below:
3.4.3 Steps to Delete Schedule
Admin just needs to click on the “delete” button for removing any schedule from the list as shown below:
3.5 Text Setting
The text displayed on the wheel background can be changed and saved from this tab of Magento 2 spin and win pop-up module.
The changes made here will be reflected in the front-end as shown below:
3.6 Slice Settings
The slices of the wheel are where the offers are displayed. The admin can customize all the 12 slices of the wheel.
Select Number of Slices: Admin can select the number of slices that he wants in the wheel. There is an option to choose 6, 8 or 12 slices as per the requirements.
The slice setting tab of Magento 2 spin and win module consists of 4 sections.
- Slice Label: Enter the unique name of the slice that will be displayed on the website.
- Coupon Type: Select the type of offer you are giving. You can either select a fixed discount or percentage discount type.
- Coupon Value: Enter the value of the coupon being offered here.
- Gravity: This section specifies the possibility of a particular slice being selected after the spin. Enter the desired value in the Gravity column accordingly. This value cannot be greater than 100 or less than 1. Moreover, the sum of the value of all the 12 slices should not exceed 100.
3.7 Email Marketing
The Magento2 email integration extension has an inbuilt email integrator. The email ids of the store visitors captured by the plugin are automatically added to the MailChimp, Constant Contact and Klaviyo accounts of the store owner.
Enable the respective integrator, enter the API Key of your account and select the list of the email ids. The Magento 2 MailChimp Integrator, Magento 2 Klaviyo Integrator and Magento 2 Constant Contact Integrator will sync the email details of the customers in the respective account of the store admin.
3.8 Email Settings
This tab of the Magento 2 Spin and Win extension allows the admin to display the coupons in three ways. The coupon can either be displayed only on the wheel or can be sent to the customer’s email or can be shown in the email as well as the wheel. The admin can select an option from the drop-down list of Coupon Display Options.
Magento 2 Spin and Win plugin offer a number of default Email Templates. The admin can select the desired theme and can also customize the email content.
3.9 Statistics
The Magento 2 Spin and Win module offer the statistical report of the number of coupons that are generated along with the number of coupons that were used and the ones that were left unused. The store admin can view the country-wise stats, Devices, and coupon code generated and coupon status from the statistics report.
The same report is generated in tabular as well as in the graphical format. The report can be filtered by selecting the dates.
3.10 User List
The online store merchant can view the list of the customers who participated in the spin and win the game. Admin can also export the details. The customer list can be exported as a CSV file.
4.0 Store Front-end
Once the Magento 2 Spin and Win extension is enabled and all the configuration options are fixed, the responsive pop-up will be displayed in the front end of the Magento 2 eCommerce store.
The store visitors can spin the wheel by entering their email ids. In case, the customer wins nothing, the ‘Next time’ button will be flashed as shown below:
Once the customer wins a discount, the coupon will be generated. This coupon can be used to get the offered discount on the checkout page.
Disclaimer: In case the “Spin and Win” wheel popup does not display at the front, kindly clear the cache or delete the cookies. Sometimes cookies prevent the popup from displaying at front.
Module Link: https://www.knowband.com/magento-2-spin-and-win
Admin Demo Link: https://goo.gl/ja4zDt
Front Demo Link: https://spinwinma2.knowband.com/