Magento 2 Spin and Win Extension- User Manual

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11.  The online merchant can select the number of slices that he wants to show on the wheel. Admin can also configure the slices accordingly.
  12. 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.
  13. 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/mailchimp-api:^2.2

2. composer require knowband/constantcontact:1.0.0

3. composer require mobiledetect/mobiledetectlib:^2.8

4. composer require geoip2/geoip2:^2.9.0

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

Magento-2-Spin-and-Win-General-settings

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.

Magento-2-Spin-and-Win-General-settings

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:

Magento-2-Spin-and-Win-theme

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:

Magento-2-Spin-and-Win-pull-out-tab

3. Display Logo

Admin can set the logo if he wants to show it on the spin and win popup.

Magento-2-Spin-and-Win-display-logo

After successful settings, this will be reflected in the website’s front-end interface as shown below:

Magento-2-Spin-and-Win-theme

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.

Magento-2-Spin-and-Win-meter

On the spin and win popup, this will look like that:

Magento-2-Spin-and-Win-progress meter

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.

Magento-2-Spin-and-Win-display-settings

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:

Magento-2-Spin-and-Win-activation-day

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.

Magento-2-Spin-and-Win-look-and-feel

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:

Magento-2-Spin-and-Win-look-and-feel-theme-scheduling

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:

Magento-2-Spin-and-Win-look-and-feel-theme-scheduling

  • 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:

Magento-2-Spin-and-Win-look-and-feel-theme-scheduling

 

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:

Magneto-2-Spin-and-Win-theme-scheduling-4

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.

Magneto-2-Spin-and-Win-text-settings

 

The changes made here will be reflected in the front-end as shown below:

Magneto-2-Spin-and-Win-theme

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.

Magneto-2-Spin-and-Win-slice-settings

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.

Magneto-2-Spin-and-Win-email-marketing

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.Magneto-2-Spin-and-Win-email-settings

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.

Magneto-2-Spin-and-Win-statistics

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.

Magneto-2-Spin-and-Win-user-list

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.

Magneto-2-Spin-and-Win-schedulimg-theme

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:

Magneto-2-Spin-and-Win-next-time

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.

magento-2-spin-and-win-fire-work

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/

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *