This is the procedure for creating a prize calendar from the default template or using custom code
Create a campaign
Plugin Wheel requires snippet version 5.0.48 or higher
Adding a campaign to the script
- In the scenario, select New Campaign.
- select the name of the campaign and select Game Campaigns
Activate Wheel of Fortune
- In the scenario, on the campaign line, click on SETUP
- select Wheel
- in the configuration dialog first create a list of prizes for each segment of the wheel, a prize must be defined for each segment
- if there is no win for the wheel, just leave the win probability at zero
- enter the number of the wheel segment (1 to the total number of segments) in the ID of win column
- name the prize and select the set of codes you want to use for a particular day
- in the Settings tab you can later tweak the behavior of the wheel
Plugin
Wheel5 plugin must be enabled for calendar function.
In the Settings project and Plugins section, make sure it is enabled. If not, activate it.
Custom HTML code
Container
We recommend using a current container that is fully compatible with version 5.x and placing your own code in it. The current container will allow all the new features from contact validation, error messages, mandatory fields and other visual effects.
<ml-object class="tpx-fullscreen tpx-m-c" onload="Wheel5.init(this)">
<ml-main style="width: auto; height: auto" class="mailocator-default">
...
</ml-main>
</ml-object>
In all cases it is necessary to enable the plugin by adding the onload
attribute to the highest element of the container - ml-object
- with the value "Wheel5.init(this)"
Do not use the FORM
tag or, if necessary, disable the event onsubmit
:
<form onsubmit="return false"> ... </form>
CSS
Make sure there is a default style imported between the styles, add it if necessary:
@import url('https://www.mlcdn.eu/tpx/css/?last_version');
Starting the wheel
The principle of starting the wheel is to send a unique email address. If it is received by a third party tool, the wheel is spun and the user is shown the prize. A code with the prize and possibly a discount code is automatically delivered to the marketing tool.
On the button that sends the email address and spins the wheel, add this event:
<button onclick="Wheel5.play(this)">Play</button>
Do not use the subscribe
event, it is already implemented in the wheel handler plugin.
Custom wheel picture
If you want to use a custom image, always use an image that forms an exact square and is ideally in SVG or PNG format.
The image must have the ID attribute set to "mlctr_wheel"
<img src="url/to/image.svg" id="mlctr_wheel" draggable="false">
View winnings and promo codes
You can use the following shortcuts to view and submit your winnings:
{{PRIZE_NAME}}
– the name of the prize as it appears in the configuration{{PRIZE_ID}}
– the number of the prize, i.e. the day{{PROMO_CODE}}
– the winning code, if used{{PROMO_CODE_TEXT}}
– the name of the winning code, if used