Spin to Win for Magento 2 (Adobe Commerce): 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 wants to stay longer on a website ensures more revenue.
now. Read More
Thus, It ensures that the customer wants to stay longer on a website ensures more revenue.
Watch the video to understand the module workflow:-
- The admin creates and manages the spin campaigns in the admin panel.
- The admin manage the attributes of the spin wheel.
- While creating or editing the welcome form and the spin wheel, the admin can also preview it.
- The store owner manage and creates the segments of the spin wheel.
- 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 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, 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 Magento 2 (Adobe Commerce) is installed on the server.
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.
Furthermore, 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 name which will display on the frontend.
Scheduled: The admin scheduled the campaign and set this as ‘Yes’ or ‘No.’
Start Date: The start date of the campaign can be set by the admin accordingly the campaign will display on the user panel.
End Date: Similarly, the end Date of the campaign can be set by the admin.
Status: The admin sets the status of the campaign as Enable or Disable.
Websites: The admin can select the websites to display the campaign like the main website.
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.
After that, on saving the Spin Campaign Information, the other tabs- Form, Spin Wheel, Add Segment, Segments, Layout, Trigger, and 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 and the set color will display on the frontend.
Text Color: The text color of the form is chosen by the admin, and it will reflect on the user’s end.
Brand Logo: Upload your store brand logo by browsing the files. So the customer can check it on their end.
Heading: The admin can set the heading of the Welcome Form.
Description: Here the admin can add the description under the Heading of the Welcome Form to clarify the functions to the customers.
Customer’s Full Name: The admin can enable or disable the customer’s full name. If it enables then the customer need to mention his/her full name.
Customer’s Email Address Label: It is the field, where customers can add their email addresses at the time of registration.
Background Color: Here the admin can choose the background color of the spin Button.
Text Color: The text color of the spin Button.
Button Label: The label on the button. Admin can label the button name so the customer can easily understand that.
Show Progress Meter: The admin may enable or disable this field this will display the progress of the spin meter.
Progress Percentage: The percentage value of the progress meter. It will increase synchronously while customers fill in the details.
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 will display after a successful spin.
Text Color: Set the text color of the Result Form so the content is visible clearly.
Brand Logo: Upload the brand Logo of your company by browsing the files.
Coupon Background Color: The background color of the coupon that will generate after spinning the wheel.
Text color (Coupon): The text color of the coupon to make it more attractive to the users.
Background Color (Coupon Button): The background color of the coupon button so it can clearly visible at the customer end.
Text Color (Coupon Button): Admin will set the text color of the coupon button that will display on the customer panel.
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.
Label (Shop Now Button): The label on the button (shop now).
The admin can preview the configurations of the Welcome and the Result forms under the 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.
After that, under Spin Wheel Form, the admin needs to set the configurations of the spin wheel.
The admin needs to set the following details for the Spin Wheel Form:
Background Color: The background color of the spin wheel. How it will visible on the frontend?
Image: Upload a background image for the spin wheel by browsing the files. So the background color of the wheel looks brighter.
Background Image Repeat Property: The admin may choose any option from the given options.
Show Inner Wheel: Set ‘Yes’ or ‘No’ to show the inner wheel on the frontend.
Inner Radius: Define the Inner Radius of the inner wheel, if show inner wheel is set as ‘Yes.’
Center Color: The color on the center of the spin wheel.
Center Logo: Upload the center logo as per your choice by browsing the files or you can choose any color.
Pin Image: Choose or browse the pin image which points to the segments while spinning the wheel.
Stroke Color: The color of the stroke which divides the wheel into parts.
Segment Font Size: The font size of the wheel segment.
Text Direction: The direction of the segment text is clockwise or anticlockwise.
Result Segment Text Color: The text color of the result segment shows after wheel rotation.
Segment Styles: Add the 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.
However, 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 to label the coupon code discount.
Heading: It appears on the Result Form after spinning the wheel.
Description: It appears in the Result Form under the Heading, description of the won label.
Limit: How many times customer can spin the wheel? The number of times the segment shall occur.
Gravity: The maximum number of chances for 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 the 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.
The segments of the spin wheel that the admin adds under the Add Segment will be visible in the Segments tab as shown in the image below.
The tabular representation includes details such as ID, Type, Label, Heading, Limit, Availed, Gravity, Position, and Action as shown below.
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 chooses a spin wheel view from the dropdown list.
Wheel View: The view of the wheel that 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 scrolling to x%, etc.
For instance, if the 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 the 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 of the coupon by making a 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 that 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 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 pinpoints 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 of the coupon, the customer can log in 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 the usual way.
On clicking the Won Coupon button, the customer can view the coupon code as shown below.
On 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 that 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 the 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 lost 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 appearing 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 (Adobe Commerce) Spin to Win module. If you still have any issues, feel free to add a ticket and let us know your views on our Webkul Support System.
Current Product Version - 4.0.1
Supported Framework Version - 2.2.x,2.3.x,2.4.x