Magento 2 Spin to Win: Nowadays, engaging customers with the website and providing them a matchless user experience has become an imperative task to make a mark in the e-commerce world.
Magento 2 Spin to Win is an extremely interactive module striving to engage its customers by providing them a unique spin wheel gaming technique to avail the offers on products.
The admin can create different campaigns and create a spin wheel that displays on the frontend in its split or full view.
On spinning the wheel and winning the spin, the customers receive a coupon code, which they can avail of on their very next purchase.
This module ensures that the customer will want to stay longer and spend more time on a website, thus boosting the sales and more revenue generation.
Watch the video to understand the module workflow:-
- The admin creates and manages the spin campaigns in the admin panel.
- The attributes of the spin wheel are managed by the admin.
- While creating or editing the welcome form and the spin wheel, the admin can also preview it.
- Segments of the spin wheel are created and managed by the admin.
- The admin sets the positions of the segments on a spin wheel.
- For a segment, the Gravity or probability of appearing must be set by the admin.
- The admin can add an expiry date of the coupon code.
- The admin has to manage the layout of the spin wheel.
- A trigger option for a spin wheel is present in the admin specified pages for the customer.
- On clicking the trigger, the spin wheel shall pop up for the customers.
- The Report section includes the report and statistics for each spin campaign.
- On winning the spin, the customer will receive a coupon code, which can be availed while making a purchase.
- Customers will get coupon data on the e-mail and as well as on the frontend.
Customers will get a zip folder. Then they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.
After the successful installation, you have to run these commands in the Magento2 root directory.
First command –
php bin/magento setup:upgrade
Second Command –
php bin/magento setup:di:compile
Third Command –
php bin/magento setup:static-content:deploy
For translating the module language, navigate through src/app/code/Webkul/SpinToWin/i18n and edit the en_US.csv file.
Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.
Then upload it to the path src/app/code/Webkul/SpinToWin/i18n where the Magento2 is installed on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.
The admin can set the permission under General Settings as follows:
Email Validation: The admin can set this field as ‘Yes’ or ‘No’.
- If set as ‘Yes,’ the customer can use the coupon code by logging in with the email id, that the customer uses to spin the wheel.
- If set as ‘No,’ an error message- “Cannot Apply Coupon” shall display, if a customer logs in with a different email id.
Manage Email: The admin needs to add the email from which the Spin to Win notification is sent to customer on winning the spin.
Send Coupon Code to Customer: The admin may choose from any of the given default template or custom template options to send the coupon code to the customers.
- The admin may customize templates by navigating through Marketing > Communication > Email Template > Add New Template.
Creating New Campaign
As the configurations of the module is set, the admin can create a new campaign by navigating through Spin to Win > Add New Campaign.
On clicking the Add New Campaign button, the admin will find the Information tab under Spin to Win Details option.
The admin will have to configure the Spin Campaign Information by filling in the details such as- Campaign Name, Status, Start and End Date, etc.
The admin can configure the Spin Campaign Information settings as under:
Campaign Name: The admin can configure the name of the campaign.
Scheduled: The admin can set this as ‘Yes’ or ‘No.’
Start Date: Start Date of campaign can be set by the admin.
End Date: End Date of campaign can be set by the admin.
Status: The admin sets the status of the campaign as Enabled or Disabled.
Websites: The admin can select the websites to display the campaign.
Priority: The priority of the campaign can be set by the admin.
As the admin saves the information, a success message- “Spin Campaign data has been saved successfully” displays.
Also, on saving the Spin Campaign Information, the other tabs- Form, Spin Wheel, Add Segment, Segments, Layout, Trigger, Report will display.
Under the Form tab the admin has to configure the Welcome and the Result Form.
In the Edit Form of the Welcome Form, the admin can set the following-
Background color: The background color of the Welcome form.
Text Color: Text color of the Welcome form.
Brand Logo: Upload brand logo by browsing the files.
Heading: The heading of the Welcome Form.
Description: Description which is under the Heading of the Welcome Form.
Customer’s Full Name: The admin can enable or disable the customer’s full name.
Customer’s Email Address Label: Field where customer’s can add their email address.
Background Color: The background color of the Button.
Text Color: The text color of the Button.
Button Label: The label on the button.
Show Progress Meter: The admin may enable or disable this field.
Progress Percentage: The percentage value of the progress meter.
Progress Label: The label of the progress meter.
The admin has to configure the settings of the Result Form, which is present under the Welcome Form.
The Edit Form of the Result Form includes the following details, which the admin has to configure-
Background Color: The background color of the Result Form.
Text Color: The text color of the Result Form.
Brand Logo: Upload brand Logo by browsing the files.
Coupon Background Color: The background color of the coupon.
Text color (Coupon): The text color of the coupon.
Background Color (Coupon Button): The background color of the coupon button.
Text Color (Coupon Button): The text color of the coupon button.
Button Background Color (Shop Now): The background color of the shop now button.
Text Color (Shop Now Button): The background color of the shop now button.
The admin can preview the configurations of the Welcome and the Result forms under Preview Form given on the sides of the respective forms as shown in the above images.
Next, the admin needs to navigate to the Spin Wheel tab.
Under Spin Wheel Form, the admin needs to set the configurations of the spin wheel.
The admin needs to set the following details for th Spin Wheel Form:
Background Color: The background color of the spin wheel.
Image: Upload background image for the spin wheel by browsing the files.
Background Image Repeat Property: The admin may choose any option from the given options.
Show Inner Wheel: Set ‘Yes’ or ‘No’ for show inner wheel.
Inner Radius: Define the Inner Radius, if show inner wheel is set as ‘Yes.’
Center Color: The color on the center of the spin wheel.
Center Logo: Upload center logo by browsing the files.
Pin Image: Choose or browse the pin image which points the segments while spinning the wheel.
Stroke Color: The color of the stroke.
Segment Font Size: The font size of the segment.
Text Direction: The direction of the segment text.
Result Segment Text Color: The text color of the result segment.
Segment Styles: Add background and text color of the segment.
On configuring the settings the admin has to save the settings so as to view the preview under Preview Form.
On clicking the “Click Here to Preview” button, the spin wheel as shown in the image below, pops up.
Note: Once the admin creates the segments, only then the segments will be visible on previewing the spin wheel.
After the configurations of the Spin Wheel are set, the admin has to configure the Information section under the Add Segment tab as shown in the image below.
The admin will have to configure the following details under the Information section:
Label: It is shown on the spin wheel.
Heading: It appears on the Result Form.
Description: It appears in the Result Form under the Heading.
Limit: The number of times the segment shall occur.
Gravity: The maximum number of chances of a segment to occur.
Position: Position of the segment on the spin wheel.
Type: The admin may choose to set this field as Win or Lose.
- If set as “Win,” the configurations for ‘Win’ shall display under ‘Apply the rule only if the following conditions are met’ section, which the admin has to set.
- This section will not appear if the admin chooses the “Lose” option against the Type field.
Apply the rule only if the following conditions are met
The admin configures the following details under the Action section:
Apply: Apply discount rule which admin offers on winning the spin.
Discount Amount: As per the rule set, the admin sets an appropriate discount amount.
Maximum Qty Discount is Applied to: The admin sets the maximum quantity to which the discount will be applicable.
Discount Quantity Step(Buy X): The admin sets the Discount Quantity for the specific discount rule.
Discard Subsequent Rules: The admin set this field as ‘Yes’ or ‘No.’
Expiry Date: For a coupon code, the admin can add an expiry date.
Under the Layout tab, the admin configures the layout of the spin wheel.
The admin configures the following fields under Layout Configuration:
View: The admin choose a spin wheel view from the dropdown list.
Wheel View: The view of the wheel which the admin may set as ‘Split’ or ‘Full.’
Trigger Button Position: The admin may choose to set the trigger button position as Top Right, Botton Right, Top Left, etc.
To set the configurations of the Trigger tab, the admin will have to configure the fields under the Visibility and the Spin to Win Button.
The admin can configure the Visibility section as follows:
Spin Wheel Visibility: For this field, the admin may choose on which page such as Home Page, Login Page, Registration Page, etc. will display.
Spin to Win Button Visibility: This is applicable only if the Show Spin to Win Button is set to “Yes”. The admin can choose Home Page, Login Page, Category Page, etc. to display the Spin to Win Button.
Show Spin Wheel on Event: The admin may choose options such as Immediately, After x seconds, When scroll to x%, etc.
For instance, if admin chooses the “Home page” and “When scroll to x%,”, when the customer scrolls the homepage to x%, (let’s say, 3%), then the spin to wheel shall appear.
Spin to Win Button
The admin can configure the Spin to Win Button section as follows:
Show Spin to Win button: The admin may set this field as ‘Yes’ or ‘No.’
Button Label: A label for the Spin to Win button may be set by the admin, for instance, “Spin to Win.”
Background Color: The admin can set the background color of the Spin to Win button.
Text Color: The text color of the Spin to Win button is set by the admin.
Spin to Win Image: The admin can browse the files for the spin to win image.
Won Coupon Button
The admin can configure the Spin to Win Button section as follows:
Show Won Coupon Button: The admin can set this field as ‘Yes’ or ‘No.’
Button Label: The Label of the Button such as “Won Button.”
Background Color: The Background Color of the “Won Button.”
Text Color: The Color of the Text of the Won Button.
The customers avail the coupon by making purchase, which they receive on winning the spin.
Under the Report tab, a statistical view, including the details such as Total Spins, Total Wins, Total Orders and Total Sales will be present as shown in the image below.
A tabular representation which includes details such as ID, Name, Email, Spin Time, Result, Status and Coupon code is present as shown below.
Front-End Functionality- Spin to Win
The customers will either find the spin wheel in its Full View or the Split View, in the frontend.
Spin Wheel- Full View
The Spin to Win wheel in its Full View will be as shown in the image below.
Spin Wheel- Split View
The Split View of the Spin to Win wheel is shown in the image below.
The Spin to Win Trigger is also present on the bottom right of the page. The customer can simply click on the trigger to view the spin wheel.
The customer may tend to either win the spin, or lose the spin.
The explanation for Winning the Spin and Losing the Spin scenarios are present in the following sections.
Winning the Spin
The customer will find the spin wheel in its split or the full view form. In the image below, the spin wheel is in its split view.
The customer will have to enter the email address in the Email Address field in order to spin the wheel.
After adding the email address, the customer needs to click on the Spin Wheel button to spin the wheel.
As the wheel stops, the pin shall be pointing on a segment.
In the image below, the pin points at 10% off, which is a Win condition.
The coupon code, along with the message (Hi Five! You Won the Spin!) shall display as shown in the image below.
To avail the coupon, the customer can login with the same email address which the customer used to spin the wheel.
On winning the spin and receiving the coupon, the Spin to Win Trigger which is present in the Homepage will change to Won Coupon Trigger as shown in the image below.
The customer can choose any product(s) from the collection page and make a purchase in a usual way.
On clicking the Won Coupon button, the customer can view the coupon code as shown below.
In the Checkout page, the customer can enter the coupon code in the Apply Discount Code tab as shown in the image below.
Under Order Summary, the customer can view the amount of discount availed with the coupon.
The customers will find the coupon code with Discount under Order Summary as shown below.
On navigating to the order id of the order which the customer places under My Orders, the customer will find the coupon code with Discount.
Losing the Spin
There may be chances when the customer can even lose the spin.
The customer has to add the email address under Email Address and click on Spin Wheel button to spin the wheel.
The spin wheel stops on “Better Luck Next Time,” which is a Lose Condition.
As no coupon shall display for a lose condition, a message (Oops! Hard Luck!) notifying the customer about losing the spin will display as shown in the image below.
- The probability of a segment to appear more times will depend on the Gravity which is set by the admin for a respective segment.
- For instance, if for Segment_1 admin sets the gravity as 30, and for Segment_2, the admin sets the gravity as 100, it is likely that Segment_2 will appear more number times.
That’s all for the Magento 2 Spin to Win module. If you face any issue, feel free to raise the issue and add a ticket at webkul.uvdesk.com
Current Product Version - 4.0.0
Supported Framework Version - 2.0.x, 2.1.x, 2.2.x, 2.3.x