1. Introduction.
The winners' list page can be fully customised with the app Cool Promo White Label. In the "Design" section, you must click on the field "Use your own complete HTML for the winners page (only White Label)".
Bear in mind that you can also edit the html for the winners page from the preview page. Thus, you can modify the html and css, saving it and checking how it shows directly.
Html template for the winners page.
There are two {{{handlebars}}} that you must always include: <!-- {{{ cool_tabs_head }}} --> between the tags <head></head> and <!-- {{{ cool_tabs_body_end }}} --> at the end of <body>. Otherwise, your html won't work properly. You also must include the winners variable: <!-- {{{ winners }}} -->.
When you choose a winner, Cool Tabs allows you to select groups of winners (for example: Winners prize A, Winners prize B ...). Therefore, when customizing the winners page you can include the iterator {{#list_winners}} on those groups of winners with which you will paint the different groups of winners of your campaign or contest. Also, within {{#list_winners}} you can use the variable {{winner_title}} to paint all the winner groups with their corresponding title and the iterator {{# winner_winners}} to include each winner of each winner group, together with the winners name and surname variables: {{first_name}} {{last_name}}.
Example:
We have winners! {{#list_winners}}
* Winner {{winner_title}}{{#winner_winners}}
- {{ first_name }}-{{ last_name }}-
{{/winner_winners}}
{{/list_winners}}"
Also we can iterate the alternates:
We have alternates {{#list_winners}}
*{{#winner_alternates}}
- {{ first_name }}-{{ last_name }}-
{{/winner_alternates}}
{{/list_winners}}"
You can also use the {{{winners_landing_body}}} variable to paint the personalized description of the winners page.
Here is an example of the HTML:
<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{cool_tabs_head}}} -->
</head>
<body {{{ cool_tabs_body_attributes }}} >
<div>
{{{winners_landing_body}}}
</div>
<div>
¡Tenemos ganadores!
{{#list_winners}}
<div>{{winner_title}}</div>
<ol>
{{#winner_winners}}
<li> {{ first_name }} {{ last_name }} </li>
{{/winner_winners}}
</ol>
{{/list_winners}}
</div>
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>
You can include other elements as well, like a "Share" button, a link to the legal conditions etc., in case your campaign has different stages and you want to select one or more winners in each of them. These elements must include the following classes in order to work properly:
- x_cool_tabs_participate_button = Link to the entry form.
- x_cool_tabs_share_button_participation = Link to share the campaign.
- x_cool_tabs_participations_link = Link to the participants' public list.
- x_cool_tabs_legal_options_button = Link to legal conditions.
Example of custom winners' page:
Custom css:
.winners_layout{
font-family: 'Helvetica';
color: #fff;
width: 100%;
height: 810px;
background: url('https://d3t4cctm88txy4.cloudfront.net/assets/pictures/c9f7838095cb11e6b604952aab10bb91/content_winners.png') no-repeat;
}
.winner_0 .x_winner_name{
position: absolute;
left: 33%;
top: 59%;
font-size: 12px;
}
.winner_1 .x_winner_name{
position: absolute;
left: 33%;
top: 58%;
font-size: 12px;
}
.x_winner_header{
font-family: 'Helvetica';
color: #fff;
}
.full_section .action_row{
display: none;
}
.participate_button span{
color: white!important;
font-size: 18px;
}
.actions_row .m_actions{
display: none;
}
.wrapper{
text-align: center;
margin: 0 auto;
width: 810px;
background-color: #fff;
}
.x_winner_avatar img{
width: 59px;
height: 59px;
border-radius: 50%;
}
.x_winner_date{
display :none;
}
.winner_0{
position: absolute;
top: 14.5%;
left: 33.6%;
}
.winner_1{
position: absolute;
top: 19.6%;
left: 33.6%;
}
.winners_layout{
overflow: hidden;
}
.x_alternates_header{
z-index: 1;
position: absolute;
top: 31%;
left: 0;
right: 0;
font-family: 'Helvetica';
color: #fff;
}
.x_alternate_list{
background-color: darkgoldenrod;
overflow: hidden;
border: 1px solid #cdcdcd;
padding: 15px;
position: absolute;
width: 560px;
top: 31%;
left: 25%;
padding-top: 40px;
right: 0;
font-family: 'Helvetica';
color: #fff;
}
.x_winner_list{
overflow: hidden;
padding: 15px;
}
.x_winner_list li,
.x_alternate_list li{
list-style: none;
float: left;
width: 50%;
}
.x_winner_avatar{
display: block;
margin-bottom: 10px;
}
.x_alternates_header{
clear: both;
}
2. Other specifications.
If you have any questions during the process, do not hesitate to contact us through our web chat or our support email help@cool-tabs.com
Comments
0 comments
Please sign in to leave a comment.