How to Add a Spin Wheel in Poper Popups (Gamified) from Scratch

How to Add a Spin Wheel in Poper Popups (Gamified) from Scratch

While using Spin Wheel templates is recommended for ease, you can also create Spin Wheel popups from scratch in Poper. Follow these steps to set up a Spin Wheel popup.

Steps to Add a Spin Wheel in Poper Popups

Step 1: Access Your Dashboard

Open your web browser and go to the Poper.
Login to your Poper account using your credentials.

Step 2: Select the Popup to Edit


Once logged in, you will be taken to your Poper dashboard.
Find the popup you want to edit from the list of popups.
Click on the popup to open the popup editor. Or you can start with New Popup.

Step 3: Add the Spin Wheel Element

In the popup editor, look to the left-hand side of the screen where the settings panel is located.

Click on the "Add" tab at the top of the settings panel.
This will list all the elements you can add to a popup.

Click on "Spin Wheel" to add the Spin Wheel element to your popup.

Step 4: Configure the Spin Wheel


Click on the Spin Wheel element to open its settings on the left-hand side.

The first setting is "Edit Winning Chances"
Configure each segment by setting the name, coupon code, and weighing factor (chance of winning).
For each segment, specify the success step, which is the step shown when a user wins that segment.

Customize the Spin Wheel's width, color, background color, and rotation settings.
Add overlay and center images to give the Spin Wheel a unique look. Poper provides several default overlay and center images you can use.

Step 5: Add a Button to Trigger the Spin Wheel


If you haven't already, add a button to your popup.
Select the button and open its settings on the right-hand side.

In the button actions setting, choose "Spin Wheel."
This setting will make the Spin Wheel spin when the button is clicked.

Step 6: Configure Success Steps

Ensure each segment of the Spin Wheel is linked to a specific success step.

If a step is missing or not added, the user will remain on the same step after winning a segment.
If you wish to dynamically update Coupon Code on Success Step, then make sure your Step has a Coupon Code Element. The content of coupon code will be automatically fetched from Spin Wheel instance.

Step 7: Save and Test Your Popup


Click on the "Save" button to apply all your settings to the popup.
Open your website where the popup is integrated.
Trigger the popup and interact with the Spin Wheel to ensure everything works correctly.
Verify that the Spin Wheel spins when the button is clicked and that the correct success steps are shown for each winning segment.

Summary

By following these steps, you will have successfully created a Spin Wheel popup from scratch in Poper. Customizing the Spin Wheel and configuring the segments and actions will help you create an engaging and interactive experience for your website visitors.
Make sure to thoroughly test your Spin Wheel popup to ensure it functions as expected and provides a seamless user experience.

    • Related Articles

    • How to Add a Border to Your Popups in Poper

      Customizing your popup with a border can help it stand out on your webpage. Here’s how to add and customize a border for your popup in Poper.ai: 1. Start in the Dashboard: - Log into your Poper.ai account. - Go to the main dashboard and click on ...

    • How to Add a Shadow to Your Popups in Poper

      Adding a shadow to your popups can create a sense of depth and make them more visually appealing. Here's a step-by-step guide to add a shadow to your popups in Poper.ai: 1. Open Your Popup List: - Log into your Poper.ai account and access your ...

    • How to add Video Player in Poper?

      Enhance your Poper popups by adding a video player, providing a richer and more engaging user experience. This step-by-step guide will walk you through the process of integrating a video player into your Poper popups. Steps to Add a Video Player: ...

    • How to create a Widget in Poper from Scratch?

      Teasers, also known as nudges, are small, non-intrusive popups that encourage users to interact without disrupting their experience. Follow this guide to add and configure teasers in your Poper popups. Steps to Add Teasers/Nudges to Popups Step 1: ...

    • Scheduling Popups

      Scheduling popups to appear at specific times is an effective way to target your audience and maximize engagement. Poper offers flexible scheduling options to help you achieve this. Follow these steps to schedule popups to appear at only certain ...