5.5. Lucky spin wheel
Last updated
Last updated
The Lucky spin wheel widget is an engaging tool designed to boost customer interaction, delivering a fun and creative experience. You can easily drag and drop or click to add it to your editing page, making it an excellent choice for promotional campaigns, events, or customer appreciation programs.
To set up the Lucky spin wheel, click on the wheel you want to edit on the screen, then use the quick settings panel to adjust its content and settings.
To configure the List of result, follow these steps:
Step 1: Click on the spin wheel you want to edit on the screen ⇒ Select the Content Editor from the Quick Settings Panel.
Step 2: Click Add field ⇒ Select the newly added field labeled New coupon.
Step 3: When the Field settings popup appears, customize the following details:
Coupon name: the text displayed on the spin wheel.
Coupon code: the discount code customers receive after spinning the wheel.
Probability %: the likelihood of landing on each section of the spin wheel.
Note: When a new field is added, the system will automatically generate a random Coupon Name and Coupon Code, which can be fully customized to meet your requirements.
The system uses a default popup to display the result notifications. When customizing the notification content, pay attention to the following dynamic values:
{{coupon_text}} This will be replaced by the actual name of the coupon.
{{coupon_code}} This will be replaced by the specific coupon code.
{{spin_turn_left}} This will display the remaining number of spins.
These dynamic values will be replaced with real data during actual application usage. You can refer to the following image for visual guidance:
You can adjust the number of spins each customer is allowed to use on your lucky spin wheel. When the spins are exhausted, the system will display a notification based on the content you have configured.
You can freely customize the background and button styles to match your desired design preferences.
To access the Design Editor, click on the spin wheel you wish to modify on the screen and select Design from the quick settings bar.
Align: Align the spin wheel to the top, bottom, left, right, center, or evenly across. See details here.
Size: Adjust the width, height, and the spacing between the spin wheel and the section margins. See details here.
Display on: Choose the devices where the spin wheel will appear (Desktop, Mobile).
Typography: Customize the text properties on the spin wheel. See details here.
To access the Advanced Editor, click on the spin wheel you wish to modify on the screen and select Advanced from the quick settings bar.
Animation: Add animations to the spin wheel to make it more engaging and dynamic. See details here.
Desktop/Mobile sync design: Configure whether the design of the spin wheel is synchronized across desktop and mobile views. See details here.
Position type: Select an appropriate positioning style to optimize your webpage and deliver the best user experience. See details here.
Custom advance: Modify the appearance and behavior of the spin wheel using custom CSS classes and styles. See details here.
