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 }}} -->.
To customize the winner's page, you can include the following variables:
- {{{ winners_landing_title }}}: title of the winners page.
- {{{ winners_landing_header }}}: creativity on the winners page.
- {{{ winners_landing_image_url }}}: main image on winners page.
- {{{ winners_landing_url }}}: URL to winners page
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}}.
Don't get confused {{{ winners_landing_title }}}, the title of the winners page, with {{{ winner_title }}}, which allows you to paint the title of each group of winners. This way, you can have several winners_tittle and, in each one, put a title and a description, with one or several winners.
Example:
We have winners!
{{{#list_winners}}}
<div>{{{winner_title}}}</div>
<ol>
{{{#winner_winners}}}
<li> {{{ first_name }}} {{{ last_name }}} </li>
{{{/winner_winners}}}
</ol>
{{{/list_winners}}}
Also, we can iterate the alternates:
We have alternates
{{{#list_winners}}}
<ol>
{{{#winner_alternates}}}
<li> {{{ first_name }}} {{{ last_name }}} </li>
{{{/winner_alternates}}
</ol>
{{{/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 webchat or our support email at help@cool-tabs.com
Comments
0 comments
Please sign in to leave a comment.