Installation
Before installing the extension, please make sure to Backup your web directory and store database
You will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/pub/extensions/magedelight-base.zip and unzip the package file into the root folder of your Magento 2 installation.
Root Directory is - "app/code/magedelight/#YourExtensionName#"
- Unzip the extension package file into the root folder of your Magento 2 installation.
- Connect to SSH console of your server:
- Navigate to the root folder of your Magento 2 setup
Run command as per below sequence,
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
- log out from the backend and log in again
If you are using Magento 2.3 or later then you do not need to activate license. Extension will be activated with silent activation mechanism and does not require activation keys to be entered manually.
Installation with Composer
Composer repository using this command:
composer config repositories.magedelight-repo composer https://packages.magedelight.com/
Replace repo public key and private key with your public and private key
composer config http-basic.gitlab.magedelight.com $PUBLIC_KEY $PRIVATE_KEY
composer require mage_delight/spin-wheel-module
composer require hyva-themes/magento2-magedelight-spin-wheel
To obtain your public and private keys, please navigate to the "My Account" section. In the "Download Extension Packages" tab, you will find the keys available for your access.
Backend Configuration (Admin side)
| Field | Description |
|---|---|
| Enable SpinWheel | Enables or disables the Spin Wheel functionality on the storefront. When enabled, users will see the spin wheel popup based on configured conditions. |
| SpinWheel Offers | Section to configure reward segments displayed on the spin wheel. Each row represents one slice of the wheel. |
| Offer Label | Defines the display text shown on the spin wheel segment (e.g., 10% OFF, $50 OFF). |
| Offer Coupon | Specifies the coupon code assigned to the selected offer. This coupon will be provided to the user upon winning. |
| Priority | Determines the probability of an offer being selected. Higher values increase the chances of that offer being won. |
| Color | Sets the visual color of the wheel segment for better differentiation and UI presentation. |
| Action | Allows deletion of a specific offer row from the configuration. |
| Add Offer | Adds a new offer row to define an additional wheel segment. |
| Field | Description |
|---|---|
| Email Sender | Selects the sender identity used for Spin Wheel notification emails. This defines the “From” name and email address visible to recipients. |
| Email Template | Specifies the email template sent to customers after they spin the wheel. Templates can be customized from Marketing → Communications → Email Templates. |
| Email CC | Allows adding additional recipients (carbon copy) who will receive the same email. Multiple email addresses should be separated by commas. |
| Email BCC | Allows adding hidden recipients (blind carbon copy) who will receive the email without being visible to other recipients. Multiple email addresses should be separated by commas. |
To display the Spin Wheel on any CMS page or block, use the following code snippet:
{{block class="Magedelight\SpinWheel\Block\Wheel"template="Magedelight_SpinWheel::wheel.phtml"}}
Backend Functionality
Spin Wheel Results Management
- The Spin Wheel Results section allows administrators to view and manage all user interactions with the spin wheel. It captures customer details along with the reward (coupon) they received. This helps in tracking participation, analyzing campaign performance, and managing collected lead data.
| Field | Description |
|---|---|
| Actions | Allows bulk actions to be applied to selected records. |
| Select Checkbox | Used to select one or multiple records for bulk operations. |
| ID | Unique identifier for each spin wheel entry. |
| FirstName | Displays the first name of the user who participated. |
| LastName | Displays the last name of the user. |
| Shows the email address provided by the user. | |
| Phone | Displays the contact number entered by the user. |
| Company | Shows the company name provided (if applicable). |
| Designation | Displays the user’s designation or role (if provided). |
| Offer Code | Indicates the coupon code won by the user. |
| Created At | Displays the date when the spin action was performed. |
| Action | Provides option to delete a specific record. |
| Filters | Allows filtering and searching of records for easy data management. |
| Columns | Enables customization of visible columns in the grid. |
| Pagination | Controls the number of records displayed per page and navigation between pages. |
Email Template Customization for Spin Wheel
- Users can customize the Spin Wheel email notification template from the Magento Admin panel via Marketing → Communications → Email Templates. By loading the default template, users can modify the subject and content to match their branding or communication style. Any changes made here will be reflected in the emails sent to customers after they spin the wheel.
| Field | Description |
|---|---|
| Template | Selects the default Spin Wheel email template to load for editing. |
| Load Template | Loads the selected template into the editor for customization. |
| Currently Used For | Displays the configuration path where the template is currently applied. |
| Template Name | Defines a unique name for the customized email template. |
| Template Subject | Specifies the subject line of the email. Supports dynamic variables. |
| Insert Variable | Allows insertion of dynamic variables (e.g., offer code, store name) into the template. |
| Template Content | Main editor to modify the email body using HTML and dynamic variables. |
| Template Styles | Allows adding custom CSS for styling the email template. |
| Convert to Plain Text | Converts the HTML template into a plain text version. |
| Preview Template | Displays a preview of the email before saving. |
| Save Template | Saves the customized template for use in Spin Wheel notifications. |
Frontend Functionality
Spin Wheel Entry Form
The Spin Wheel entry form is displayed on the storefront to collect user details before allowing participation. It ensures that customer information is captured for lead generation and reward distribution. Once the required details are submitted, the user can proceed to spin the wheel and receive an offer.
- Displays a user-friendly form to collect participant details before spinning
- Captures essential information such as first name, last name, email, phone, company, and designation
- Ensures data collection for marketing and lead management purposes
- “Continue to Spin” button initiates the spin wheel process after form submission
- Prevents access to the spin wheel until required details are provided
- Designed with a clean and responsive layout for better user experience
Spin Wheel Interaction
After submitting the required details, users are redirected to the interactive spin wheel interface. This screen allows users to actively participate by spinning the wheel and instantly receiving a reward based on predefined configurations. The experience is designed to be engaging, visually appealing, and easy to use.
- Displays a personalized message (e.g., user name) to enhance engagement
- Shows a dynamic spin wheel with multiple reward segments configured in the admin
- Each segment represents a specific offer or coupon
- Central “Spin” button initiates the spinning action
- Uses weighted logic (based on admin configuration) to determine the winning segment
- Provides a visually interactive and gamified experience for users
- Ensures smooth transition from form submission to reward interaction
- Designed to encourage participation and improve user engagement
Spin Wheel Result Display
After the user clicks the “Spin” button, the wheel rotates and lands on a reward based on the configured probability. Once the spin is completed, a result screen is displayed showing the winning offer along with a confirmation message. This provides immediate feedback and enhances user satisfaction.
- Displays a congratulatory message after the spin is completed
- Shows the user’s name for a personalized experience
- Highlights the winning reward or discount clearly (e.g., 20% OFF)
- Confirms that the coupon code will be sent via email
- “Spin Again” button allows users to participate again (based on configuration)
- Provides instant feedback to maintain engagement and excitement
- Ensures a smooth transition from spinning action to result display
Thank you for choosing MageDelight!