{"id":13109,"date":"2024-03-20T14:59:05","date_gmt":"2024-03-20T13:59:05","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/template-winwheel-con-form\/"},"modified":"2024-03-20T14:59:07","modified_gmt":"2024-03-20T13:59:07","slug":"template-winwheel-con-form","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/template-winwheel-con-form\/","title":{"rendered":"Template &#8220;WINWHEEL CON FORM&#8221;"},"content":{"rendered":"\n<p>We&#8217;re going to explain how every single key in this template works.<br\/>For the initial configuration of the behavioural message, please refer to the dedicated article<a href=\"https:\/\/helpcenter.blendee.com\/article\/come-configurare-un-behavioural-message\/\"> how to configure a behavioural message<\/a>.<\/p>\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2023\/08\/win-wheel-1024x474.jpg\"><img data-original=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2023\/08\/win-wheel-1024x474.jpg\" alt=\"\" class=\"wp-image-9007\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-group HELPCENTER_focus\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\"><i class=\"fas fa-triangle-exclamation\"><\/i> <i class=\"fas fa-triangle-exclamation\"><\/i>  ATTENTION  <i class=\"fas fa-triangle-exclamation\"><\/i> <i class=\"fas fa-triangle-exclamation\"><\/i><\/h4>\n\n\n\n<p>If no custom form is configured on the message (step1 of the &#8220;configuration&#8221; creation), nothing will be displayed and a message will appear on the conole.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>!!!!!!!ATTENZIONE!!!!!!!\nPer visualizzare il messaggio, inserire un form.<\/code><\/pre>\n<\/div><\/div>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2023\/08\/Screenshot-2023-08-25-alle-14.17.13.png\" alt=\"\" class=\"wp-image-9017\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">SIDEPANEL &gt; Message Text<\/h3>\n\n\n\n<p><strong>Label Text Color<\/strong> is the color of the text on the outer vertical label.<\/p>\n\n\n\n<p><strong>Text Color | Link Color | Title color<\/strong> : we customize the colors of the texts.<\/p>\n\n\n\n<p><strong>Label Title <\/strong>is the text of the outer label (the vertical one to open the message).<\/p>\n\n\n\n<p><strong>HTML content<\/strong> : text content before the form.<\/p>\n\n\n\n<p><strong>Title font<\/strong> : Size of titles in px.<\/p>\n\n\n\n<p><strong>Hide Text<\/strong> : We can decide whether or not to show the text before the form.<\/p>\n\n\n\n<p><strong>Font size: Plain text (in px): Normal<\/strong> text size.<\/p>\n\n\n\n<p><strong>Copy Coupon Button Text<\/strong> is the text that appears on the button that appears after spinning the wheel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SIDEPANEL &gt; Location &amp; Size<\/h3>\n\n\n\n<p><strong>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),<\/strong> we customize the outer vertical label, colors and border<\/p>\n\n\n\n<p><strong>Box border color | Box border size (in px) | Rounded corners box (in px) | Container Shadow<\/strong> Set  <\/p>\n\n\n\n<p>Margin between text and form<\/p>\n\n\n\n<p><strong>Maximum Content Size<\/strong> is the maximum width in px that the content (excluding the wheel) will have.<\/p>\n\n\n\n<p><strong>Full-height sidepanel<\/strong> : The sidepanel will be as tall as the entire browser window.<\/p>\n\n\n\n<p><strong>Divider Line Color | Dividing line thickness (in px)<\/strong> is the line that separates the text content from the form<\/p>\n\n\n\n<p><strong>Sidepanel top\/bottom start (in px)<\/strong> 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.<\/p>\n\n\n\n<p><strong>Horizontal sidepanel position (yes = left | no = right) | Vertical sidepanel position (yes = top | no = bottom)<\/strong> options to position the sidepanel in the viewport.<\/p>\n\n\n\n<p><strong>Z_index Sidepanel<\/strong> we set a z-index to place the message above our website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SIDEPANEL &gt; More<\/h3>\n\n\n\n<p><strong>Additional CSS code<\/strong> : we can add CSS code to our carousel.<\/p>\n\n\n\n<p><strong>External label icon animation<\/strong> : If set to yes, the icon rotates 180\u00b0 relative to the text when you open or close the sidepanel.<\/p>\n\n\n\n<p><strong>Downtime on Close<\/strong> after copying the coupon and closing the message, it will not reappear for the indicated time.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2023\/08\/Screenshot-2023-08-25-alle-14.17.22.png\" alt=\"\" class=\"wp-image-9018\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">FORMS AND BUTTONS &gt; Position and size<\/h3>\n\n\n\n<p><strong>Margin between form contents<\/strong> is the margin between the various entries of the form (in px).<\/p>\n\n\n\n<p><strong>Title: Label form: in bold:<\/strong> we can set bold on the labels of the form.<\/p>\n\n\n\n<p><strong>Form Input Background Color | Form Input Border Color | Color checkbox\/radio form | Label form color | Form background color<\/strong> : We customize the colors of the form&#8217;s labels and inputs.<\/p>\n\n\n\n<p><strong>Rounded corners of forms (in px)<\/strong> If the background of the form is active, we can configure the rounded corners.<\/p>\n\n\n\n<p><strong>Padding form (in px if background is active)<\/strong> margin between the content of the form and its container.<\/p>\n\n\n\n<p><strong>Show form background<\/strong> if set to no padding and rounded corners will not be taken into account.<\/p>\n\n\n\n<p><strong>Minimum box form height (in px)<\/strong> is the minimum height of the entire box form, including the message to copy the coupon that appears at the end.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">FORMS &amp; BUTTONS &gt; Button<\/h3>\n\n\n\n<p><strong>Pulsed Text Color | Rollover Pulsed Text Color | Button Background | Rollover Buttons Background | Rollover Button Border Color | Button Border Color<\/strong>i We configure all colors for the normal and rollover state of the buttons (including the border).<\/p>\n\n\n\n<p><strong>Button text size (in px): The<\/strong> size of the text inside the buttons.<\/p>\n\n\n\n<p><strong>Button Rounded Corners (in px)<\/strong> We set the rounded corners of the button.<\/p>\n\n\n\n<p><strong>Button border size<\/strong> : thickness of the border around the button (in px).<br\/><strong>Button side padding (in px) | Padding above\/below the button (in px)<\/strong> we configure the inner margin between the border of the button and the text.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2023\/08\/Screenshot-2023-08-25-alle-14.17.30.png\" alt=\"\" class=\"wp-image-9019\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">WINWHEEL &gt; Message Text<\/h3>\n\n\n\n<p><strong>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<\/strong>  enter the values of the coupons and their labels to be shown on the wheel (<i class=\"fas fa-triangle-exclamation\"><\/i> WARNING: if the coupon field is deleted, the text will be shown for those who have not won).<\/p>\n\n\n\n<p><strong>Text color: Wedges<\/strong> : The color of the text on the wedges.<\/p>\n\n\n\n<p><strong>Text for those who didn&#8217;t win<\/strong> , text that appears for those who got a slice without a coupon.<\/p>\n\n\n\n<p><strong>Text before the copy coupon buttons<\/strong> : Text that appears for the coupon winner before the button to copy the coupon.<\/p>\n\n\n\n<p><strong>Force Coupon 01 as a result<\/strong> , we can always force Coupon 01 to be exited.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WINWHEEL &gt; Location &amp; Size<\/h3>\n\n\n\n<p><strong>Colour of even segments | Odd Segment Color: We<\/strong> set the background color for the sections (wedges) of the wheel.<\/p>\n\n\n\n<p><strong>Wheel size (width and height in px): total<\/strong> height and width of the wheel.<\/p>\n\n\n\n<p><strong>Slice text size (in px):<\/strong> We set the size of the text inside the wedges on the wheel.<\/p>\n\n\n\n<p><strong>Text Content Background Color | Background color under the wheel | Wheel Indicator Color<\/strong> : We customize the colors of the wheel.<\/p>\n<\/div>\n<\/div>\n<div class=\"wrap-post-useful post_useful_13109\">\n<p><div style=\"color: black; margin-bottom: 15px;\"><strong>Was this content useful?<\/strong><\/div><\/p>\n<p class=\"post_useful_success post_useful_success_13109\">Thanks for contributing!<\/p>\n<div class=\"post-useful-buttons post_useful_buttons_13109\">\n<a href=\"javascript:;\" style=\"border:0px;\" title=\"Yes\" class=\"post-useful-vote post-useful-vote-yes\" data-id=\"13109\" data-rate=\"1\">Yes<\/a>\n<a href=\"javascript:;\" style=\"border:0px;\" title=\"No\" class=\"post-useful-vote post-useful-vote-no\" data-id=\"13109\" data-rate=\"0\">No<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;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 &#8220;configuration&#8221; creation), nothing will be displayed and a message will appear [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13109","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13109"}],"collection":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13109\/revisions"}],"predecessor-version":[{"id":13112,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13109\/revisions\/13112"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13109"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13109"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}