How to Create Spin Wheel Popups to Boost Engagement in WooCommerce

The WebToffee eCommerce Marketing Automation app allows you to gamify your store using Spin Wheel popups that reward visitors with interactive discounts. To get started, navigate to Forms and Widgets > Popup and embed forms in the web app, and select a ‘Fortune Wheel’ template. You can customize the number of slices, set win probabilities for different coupons, and design the wheel to match your store’s colors. Once finished, simply click ‘Publish’ to let your customers spin for rewards and boost your conversions. Let’s go through the step-by-step process in this article.

As listed in the introduction, you can add a spin wheel pop-up to gamify the shopping experience for users.

• From the Marketing sidebar, go to Forms and Widgets > Popup and embed forms.
• Click “Create New Campaign.”

Fortune wheel templates are categorized under welcome, exit intent pop-ups, and embed forms.

• Select a template that best suits your campaign goal and click ‘Use Template’.

• After you select a template, configure your Campaign Settings, including triggers, display frequency, and targeting conditions.
• This step is similar to the setup for other pop-up campaigns.

• Click Edit template to access the pop-up editor. Here you can customize the appearance and content of your pop-up.

• Let’s take the fortune wheel customization step by step.
• Click on the Fortune Wheel block in the edit window to open its customization panel on the right.

Configure Wheel Settings

1. Wheel Structure

• Number of slices: Adjust how many slices appear on the wheel.
• Background color: Choose the color for the outer area around the slices.

2. Slice Settings

Click on each slice on the wheel to configure its properties:

• Label: Enter the text to be shown on the slice (e.g., “10% Off”, “Free Shipping”).
• No-Win Slice: Mark a slice as a no-win if it shouldn’t give any reward.
• Coupon Selection: For winning slices, select an existing coupon or create a new one.
• Probability: Define the likelihood of users landing on each slice.
• Font Color / Background Color: Customize the text and slice background colors.

3. Adjust Wheel Appearance

Fine-tune the visual layout:

• Wheel Size: Resize the wheel to fit your popup.
• Edge Color: Customize the border color.
• Padding: Adjust spacing between the wheel and other elements.

• Once you’ve set up the main page, switch to the Success Page tab in the editor.

Here, you can:

• Modify the appearance of the success message.
• Edit the confirmation text.
• Add new elements (e.g., images, buttons, or text blocks) using the Blocks panel.
• Customize the CTA button by editing the text, style, and defining its action (e.g., close the pop-up, redirect).

• Click Finish editing to save the pop-up.
• Give a suitable name for the pop-up.
• Finally, click Publish to make the pop-up live.

Similarly, you can add a fortune wheel to an existing pop-up (campaign). For that,

1. Go to Web Campaigns and open your existing pop-up in the edit window.
2. From the Blocks panel on the left, drag and drop the Fortune Wheel block into your popup layout.
3. Configure the wheel using the same customization options we discussed above (number of slices, coupons, probabilities, colors, etc.).
4. Save and publish the campaign.

We will select a welcome pop-up template that features a fortune wheel, and let’s see how it appears on the front end to a customer.