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

Blog / Knowledge base

Updated: 12. February 2021

Instructions for your own design of 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">
...
</div>
</form>
</main>

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%);
overflow:hidden;
}

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"
Example:
<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.

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


RELATED

Launch a campaign when you hover or touch a specific location on the page

Mark a location that triggers a campaign when the user hovers over it or touches it on a touch device

Mailocator Events

With events, you can intelligently manage the sequence of campaigns across the entire workflow scenario and display much more relevant and precisely targeted content in real time.

Notification

Set up the display of notifications on your site using Mailocator

Processing of the form (campaign) inserted into the page

How to send data to Mailocator from a form located on your site?

Instructions for your own design of the wheel of fortune

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