We’re going to explain how every single key in this template works.
For the initial configuration of the behavioural message, please refer to the dedicated article how to configure a behavioural message.
ATTENTION
If no custom form is configured on the message (step1 of the “configuration” creation), nothing will be displayed and a message will appear on the conole.
!!!!!!!ATTENZIONE!!!!!!!
Per visualizzare il messaggio, inserire un form.
SIDEPANEL > Message Text
Label Text Color is the color of the text on the outer vertical label.
Text Color | Link Color | Title color : we customize the colors of the texts.
Label Title is the text of the outer label (the vertical one to open the message).
HTML content : text content before the form.
Title font : Size of titles in px.
Hide Text : We can decide whether or not to show the text before the form.
Font size: Plain text (in px): Normal text size.
Copy Coupon Button Text is the text that appears on the button that appears after spinning the wheel.
SIDEPANEL > Location & Size
Label Background Color | Outer label border size (in px) | Outer Label Border Color | Outer Label Border | Icon on external label | Rounded corners, outer label (in px), we customize the outer vertical label, colors and border
Box border color | Box border size (in px) | Rounded corners box (in px) | Container Shadow Set
Margin between text and form
Maximum Content Size is the maximum width in px that the content (excluding the wheel) will have.
Full-height sidepanel : The sidepanel will be as tall as the entire browser window.
Divider Line Color | Dividing line thickness (in px) is the line that separates the text content from the form
Sidepanel top/bottom start (in px) distance of the box sidepanel from the top/bottom edge (depending on the position chosen), when it is not at full height, in case it is at full height this becomes the distance of the label from the top/bottom edge.
Horizontal sidepanel position (yes = left | no = right) | Vertical sidepanel position (yes = top | no = bottom) options to position the sidepanel in the viewport.
Z_index Sidepanel we set a z-index to place the message above our website.
SIDEPANEL > More
Additional CSS code : we can add CSS code to our carousel.
External label icon animation : If set to yes, the icon rotates 180° relative to the text when you open or close the sidepanel.
Downtime on Close after copying the coupon and closing the message, it will not reappear for the indicated time.
FORMS AND BUTTONS > Position and size
Margin between form contents is the margin between the various entries of the form (in px).
Title: Label form: in bold: we can set bold on the labels of the form.
Form Input Background Color | Form Input Border Color | Color checkbox/radio form | Label form color | Form background color : We customize the colors of the form’s labels and inputs.
Rounded corners of forms (in px) If the background of the form is active, we can configure the rounded corners.
Padding form (in px if background is active) margin between the content of the form and its container.
Show form background if set to no padding and rounded corners will not be taken into account.
Minimum box form height (in px) is the minimum height of the entire box form, including the message to copy the coupon that appears at the end.
FORMS & BUTTONS > Button
Pulsed Text Color | Rollover Pulsed Text Color | Button Background | Rollover Buttons Background | Rollover Button Border Color | Button Border Colori We configure all colors for the normal and rollover state of the buttons (including the border).
Button text size (in px): The size of the text inside the buttons.
Button Rounded Corners (in px) We set the rounded corners of the button.
Button border size : thickness of the border around the button (in px).
Button side padding (in px) | Padding above/below the button (in px) we configure the inner margin between the border of the button and the text.
WINWHEEL > Message Text
Coupon slice 10 | Coupon wedge 09 | Coupon wedge 08 | Coupon wedge 07 | Coupon wedge 06 | Coupon wedge 05 | Coupon wedge 04 | Coupon wedge 03 | Coupon wedge 02 | Coupon wedge 01 | Label Award 10 | Award Label 09 | Award Label 08 | Award Label 07 | Award Label 06 | Award Label 05 | Label Award 04 | Award Label 03 | Award Label 02 | Award Label 01 enter the values of the coupons and their labels to be shown on the wheel ( WARNING: if the coupon field is deleted, the text will be shown for those who have not won).
Text color: Wedges : The color of the text on the wedges.
Text for those who didn’t win , text that appears for those who got a slice without a coupon.
Text before the copy coupon buttons : Text that appears for the coupon winner before the button to copy the coupon.
Force Coupon 01 as a result , we can always force Coupon 01 to be exited.
WINWHEEL > Location & Size
Colour of even segments | Odd Segment Color: We set the background color for the sections (wedges) of the wheel.
Wheel size (width and height in px): total height and width of the wheel.
Slice text size (in px): We set the size of the text inside the wedges on the wheel.
Text Content Background Color | Background color under the wheel | Wheel Indicator Color : We customize the colors of the wheel.
Thanks for contributing!