Spin Wheel & Gamification

Articles

Let's get started Spin Wheel & Gamification Settings Integration

Spin Wheel & Gamification - Widget Design



How to set up the Popup position?



You will be automatically redirected to the “Position” section once you click “Create Popup”. In this section, you can choose the location on the page where you'd like the popup to be displayed.There are several position options: Popup, Slide-In (left side), Slide-In (right side), Embedded Popup.

Note: when choosing the Embedded Popup option, you need to set up the popup position in the Rules & Triggers section for selected trigger page(s).



What Sections can I add to my Popup?



You can customize the template design in the “Sections & Theme Settings” section.

On the left side of the page, you can find the next tabs: Sections, Position and Animation, Design, Email, Teaser, and Conditions.

What Sections can I add to my Popup?

In the tab "Sections" you can add, move, hide, delete, and edit sections. Here you also have the possibility to add Steps to your popup.

Steps

If you want to create a multi-step popup for your campaign you can add additional steps to your main one by clicking the plus button.

To change the order of the steps, make the step you want to move active by clicking on it and press Edit.

Now you can move the step Right, Left, or Delete the step.

To add sections in the step, make it active by clicking on it. An active step is colored in blue.

You have the option to add several elements to your popup: Form, Subheading, Heading, Button, Timer, Image, Discount code, Divider, Spin the Wheel, Rich Text.

To make the section not visible, click on the eye icon, to move the section - point the mouse at the dotted icon, right-click, and drag the section up or down without releasing the button. To delete the section, click on the delete icon.

Form

To add an element to the form, click the “Add content” button.

Step by step option allows you to have only one form field shown on a popup at a time. The user will have to fill it out and press the Next button to move to the following field. This option is perfect if you have several required fields but don’t want to overload the popup design.

To customize buttons for Step by step form click on the Step by step form styles edit button.

You can change the style of the Form fields by clicking on the pencil icon.

If you are planning to collect emails for email marketing you can enable the showing of permission for emails and edit text formatting and content if necessary.

Read more about form fields customization here: How to customize form fields?

Button

This section empowers you to influence your visitors and prompt them to submit the requested information. Choose the Button Element to incorporate a button into your popup. You have the freedom to add a compelling call-to-action (CTA) on the button and customize numerous aspects.

When the Button is added do not forget to add text that will be visible to your customers.

You can choose an action for the button: will it redirect the user to another page(for example product page or cart), or it is going to lead to the next step(for multi-step popups) or close the popup.

Here you also can edit button alignment and quantity of columns in the section.

To change the style of the Button click on the pencil icon.

Rich text, Subheading, Heading

Select these elements to communicate with a customer the purpose of this popup. Use the editing tools in this section to highlight important information and draw the user's attention to it.

Add your text and customize it with tools from the toolbar.

You can also customize the number of columns in the section.

Change the rich text style by clicking the pencil icon.

Timer

Add a clock-down timer to inform the client about the end of the offer and make the customer decide faster.

You can choose the timer type: Fixed minutes or Countdown to a date.
You can set the time (days:hours:minutes:seconds) that will be shown on the popup and change the separator type.
You can also edit the time labels.

Choose timer alignment, change timer conditions, show/hide time labels, and change the number of columns in the section.

You can also edit the timer style by clicking on the pencil icon.

Image

Customizing your popup with images is crucial as it greatly impacts your visitors' response to your campaign.

Delete the default image

Click on the Choose an image button and choose the most convenient way to add an image.

Customize the image width, alignment, and number of columns in the section.

You can choose image height, auto, or custom. If you choose custom you’ll have additional fields to change: height of an image, horizontal and vertical position, and image fit.

Discount code

Use the Discount Code Element to effortlessly share prepared discount codes aimed at boosting conversions with your users. This element enables you to effectively distribute and promote your exclusive discounts and offers.

Add celebration text in the Discount code information field and customize it with the tools in the toolbar.
Add discount code. Your customers will be able to easily copy it from the popup with one click.

Customize button: add the button URL, name of the button, align it as you wish to make the popup look balanced, and choose the number of columns in the section.

To change the discount code section style, input or button style click on the relevant pencil icon.

Divider

Select the Divider section to separate elements in the popup.

Add the divider and customize its background color, height, margin top and bottom, and number of columns in the section.

Spin the Wheel

Add a gamification element to increase the engagement of the customers in your campaign.

To set up segments and customize them click on the Segment options button.

Here you can customize the colors of the wheel, segment weight (identify the chance to win), segment text, and segment discount code. If you want to delete the section click on the trash can icon, if you want to add a new section press on Add segment button.

You can change the alignment of the Spin the wheel section, width, and choose the number of columns in the section.

To change wheel styles and pointer styles click on the pencil icon.

Note: in changing wheel styles you can enable showing form after clicking on the wheel.



How to customize form fields for my popup?



First name, last name and email form

Select first name, last name, or email form to collect information about your customers.

For these fields, you have the next editing options: label of the form, placeholder text and description.

To make the field obligatory to fill make an active “Required” switcher.
If you want to make 2 form fields in one line, make the active switcher “Half width”.

Phone number form

Use the Phone number form to add the field to your Popup where users can enter their phone number.

Add field label and description.
Set the default country for the number (your customers will be able to change the country if needed).

To make the field obligatory to fill make an active “Required” switcher.
If you want to make 2 form fields in one line, make the active switcher “Half width”.

Choice list form

Select the choice list form to give users several options to choose from.

Spin gives three options for the choice list: dropdown list, single option, and multiple options.
To edit the name of the options, add and delete them, click on the Edit choice list. When you are happy with the look of your choice list don’t forget to click the Update button.

For the single option and multi option, you can choose the way it is going to show on your popup: vertical or horizontal.
To make the field obligatory to fill make an active “Required” switcher.
If you want to make 2 form fields in one line, make the switcher “Half-width” active.

Spacer form

To add space between form fields you can use spacer form.

Click on the Spacer form in the Form fields content and customize the height of the spacer.

Date

Select the Date form to have a field in your popup where users can choose the date.

You can edit the label of the form and description.
Besides, you can decide if the date field is required and make it half-width.

Single text form & Paragraph text

If you want to give the user the possibility to enter some text use single text form or paragraph text(depending on the length of the text required).

Edit form label, description, and placeholder.
Decide if you want to make this field obligatory or half-width.
For Paragraph text set text height and limit of characters.

File upload form

Use the File upload form if you want your clients to upload files before submitting the form.

Customize field label and button style.
Allow customers to upload several files, decide if a field is required, or make the form half-width.

Input hidden

Add input hidden to include data that cannot be seen or modified by users when a form is submitted.

Swatch color

Select swatch color forms if you want to give your customer several color options to choose from.

If it is necessary, set a label for each label option, label for the list, and description.

Image swatch

Choose an image swatch form to give your customer several image options to choose from.

If it is necessary, set a label for each label option, a label for the list, and a description.

Upload the images using the most convenient way, and delete or add options.

Select the list type and decide whether it is possible to choose single or multiple options.

Click on the pencil icon to change the swatch style. Edit the gap between options, item width, and item height. Don’t forget to press the Save button when you are done editing.

Besides it is possible to make the field obligatory and half-width.

Toggle

Implement a toggle to gather customer information.

Remember to include a label and description for this toggle.

You also have the flexibility to choose whether to make it mandatory, have it activated by default, or set it to display at half-width.
Customize the toggle style if needed.

Rating

Include a rating in your form to gather your customers’ feedback.

Make up your label for this element.
Make Choose the type of icons and their number, and set their size. Note: in the “Emoji” type you try out different styles. up your label for this element.

Customize the style of the icons by clicking on the pencil icon.
Edit the alignment and decide if you want to make this field obligatory or half-width.

Opinion scale/NPS

Another way to get feedback from your clients is an opinion scale.

Make up your label for this element and describe it if needed.

Add the labels for “bad”, “good”, and “excellent” marks and select the number of scales on the popup.
Customize the style of the scale by clicking on the pencil icon.
Edit the alignment and decide if you want to make this field obligatory or half-width.

Form submit button

Decide what will happen after the customer presses on the Submit button.

Edit the name of the button
Give action to your button, including Submit form, Next step, Send to URL(don’t forget to add URL in the Button URL field), JS function or Spin the Wheel.

You can align your button, and customize the submit form button style by clicking on the pencil icon.



Editing of Position and Animation tab



In the "Position" tab you can choose the position of the popup, where it appears.

Use the "Animation" tab to select an animation of how it appears to customers and animation for Step-by-step form.

In the Layout section, you can change the layout image, position, and size.

Here you also can change the popup width and content max width.

To change the layout style, click on the pencil icon.

Here you can hide the background image on mobile, enable image contain, remove overlay, customize the look of the popup and image(borders, margins, paddings).

Once you are done with customization don’t forget to click the Save button.

You can also edit the background size, horizontal and vertical position in the Layout section.

Pages

If your popup has several steps you can show the customer how many steps are left. Choose the alignment of the breadcrumbs, and edit the names of the steps if necessary.

To customize the breadcrumbs style, click on the pencil icon.



Can I set up automatic email notifications for customers?



If your popup has an email form, use the Email section to set up an automatic notification of the admin about the submitted form and an automatic email to a customer who submitted the form.

Admin notification

In this tab, you can enable and customize admin notifications. Enter the email recipient, sender name, email subject, and email content.

For the email content section, choose what submitted information has to be sent: all fields(if you have more than one) or specific fields.

Responded notification

In this tab, you can enable and customize notifications for respondents. Enter the sender’s email, to whom the customer will reply, the email subject, and the email content.

While editing email content you can choose which information from the submitted form to use(first name, email, etc) in automatic response.



How can I set up a Teaser for my popup?



Teaser is a small sticky version of the popup which is shown before or after the main popup. It is usually some simple phrase, or call to action like Click here or Get a discount.

To set up your teaser, you have to enable it by clicking on the Teaser status switcher.

When the teaser is enabled, you can choose when it has to be shown: before the popup is opened or after the popup is closed.

Next select teaser rotation, position on the site and edit Teaser text and style.

You can add an image to your teaser. While choosing an image keep in mind that the teaser has limited space, so select an image that will look good in a small size.

To change the image style, click on the pencil icon.

If you want to add some custom features you can enter Custom CSS code in the blank field at the bottom of the section.



Editing of Design tab



Themes

Change your theme from the default one to a Black or Light theme.

Wallpapers

Choose the wallpapers for your popup that will match your website's mood.

Top section

To add the top section to your popup, enable Show/hide switcher. If you want to change the top background color click on the pencil icon.

To customize the closing button on your popup, click on the Close pencil icon.

Main section

Here you can change the background color, customize the popup border and popup margins by clicking on the corresponding pencil icon.

Custom CSS

Use this section to add Custom CSS code.



How to set conditions?



In the “Conditions” tab, you can define the conditions under which certain actions will be triggered.

By clicking on this tab, you will see the popup with the “Add condition” and “Add action” buttons.

The “Add condition” button opens the list of all the elements on your form.

Choose the needed element and set a specific condition for it.

Then click the “Add action” button, select an action, and enter additional data if needed.

You can also combine several conditions and add several actions to be performed after these conditions are met.

Note: “or” means that at least one of the conditions should be met to trigger the action(s), “and” implies fulfilling all the conditions from the combination.

To set a completely separate condition, click the “Add new condition” button at the bottom.

If you want to delete unneeded elements, then click “Close” right next to the element.

Do not forget to save all your settings by clicking the “Save & Close” button.

Documentation