Přejít k obsahu  Přejít k hlavnímu menu

Blog / Knowledge base

Updated: 12. February 2021

Instructions for your own design for the wheel of fortune

How to create a wheel of fortune with your own HTML and CSS code

HTML and CSS for the wheel of fortune

Basic HTML layout

<main class="mlctr-underlayer ml-v-2" role="ml" style="background-color:rgba(0, 0, 0, 0.65)">
<form onsubmit="return mailocator.action.do('subscribe')">
<div class="mlctr-wheel mlctr-flex" style="width: 600px">

insert the base skeleton in the exact order of the tags below. This tag order is required.
<main> represents a background layer with transparency set
<form> to send data to Mailocator through actions subscribe
<div class="mlctr-wheel ... the default element that defines the type of campaign using the class .mlctr-wheel and with a default width

Basic CSS

@import url('https://www.cdn-ml.net/css/mailocator-v2.1.css');

/* background */
.mlctr-underlayer { position:fixed; z-index:99999; width: 100%; height: 100%; top:0px; left:0px; right:0px; bottom:0px;) }

/* campaign */
.mlctr-wheel {
position: relative;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

insert the recommended style set for Mailocator campaigns, mailocator-v2.1.css or later
omitting this set can affect animation behavior, responsiveness, and cause unwanted behavior or display

add the necessary minimum of styles to render a centered element to display the contents of the window, at least for .mlctr-underlayer and .mlctr-wheel

Inserting your own wheel

Graphics and format

To prepare a wheel by a graphic designer, we recommend creating a default wheel divided into the required number of segments, downloading the SVG source and handing it over to the graphic designer for further editing.
The wheel must always have the same height and width, any shadows and other design elements must be inserted as separate elements with their own positioning.
We strongly recommend preparing the wheel in SVG vector format, but it is also possible to use raster formats JPG or PNG.

Insertion method

The wheel can be inserted either as an image using a tag <IMG> or as an XML source in a tag <SVG>.
You can place the wheel anywhere, eccentrically, partially hidden or otherwise.
The wheel does not require any mandatory styling.

Insert as image:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" width="500" height="500" data-pointer_deg="0">

Insert SVG directly:
<svg id="mlctr_wheel" width="500" height="500" data-pointer_deg="0" viewBox="20 20 460 460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> ... </svg>

Wheel marking

The wheel must be marked with an attribute id="mlctr_wheel"
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" ...
<svg id="mlctr_wheel" ...

Winning indicator setting

The payout indicator can be in any shape and you can place it anywhere around the circumference of the round. In order to show the winnings correctly, you need to tell Mailocator where the pointer is. The setting must be made using the attribute data-pointer_deg in the picture of the wheel, where you enter a number with the number of degrees, which differs from the starting position, which is located at 3 hours respectively 90 degrees.

if the pointer is located at 3 o'clock (center right), it is the default position and the attribute does not need to be set or set to 0
if the pointer is located at the top of the 12 o'clock (top center), set the number of degrees relative to the home position, that is  -90 degrees: data-pointer_deg="-90"
if the pointer is positioned at the bottom for 6 hours (bottom center), set the number of degrees relative to the home position, that is 90 degrees: data-pointer_deg="90"
if the pointer is located at the bottom of 9 o'clock (center left), set the number of degrees relative to the home position, ie 180 degrees: data-pointer_deg="180"

This way you can place the position of the pointer anywhere, you only have to enter the calculated position in degrees.

<img src="https://example.com/my-wheel.svg" data-pointer_deg="90" ...
<svg id="mlctr_wheel" data-pointer_deg="90" ...


Instructions for your own design for the wheel of fortune

How to create a wheel of fortune with your own HTML and CSS code

How to Thank you page in Mailocator?

See how to better bring your future customers back to your site as you complete the verification process.

Wheel of Fortune

A popular gamification element is the wheel of fortune, in which the user is offered a reward for providing data or subscribing to newsletters.

Mark campaign conversions with actions

Where a campaign is not automatically marked as converted (such as a newsletter sign-up), you can add a conversion using an action to better evaluate the success of the campaign.

Scenario testing laboratory

An easy way to verify the functionality of the scenario in Mailocator is to run a laboratory where you can see the entire course of processing over time, including the evaluation of conditions and user actions.

Disabling and enabling Mailocator using a parameter in the URL

If you need to limit campaigns in time and the UTM parameter is not available, you can use the internal parameter of Mailocator