1. Participation List.
On this page you can use any variable that we use on the 'thank you for participating' page, in addition to the following variable:
- {{{participation_list_header}}}: personalized header of the participation list.
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 Participant list page variable: <!-- {{{ list_participations }}} -->.
By customizing the list of participants, you can include the iterator {{#list_participations}}. Example:
<div>
<ol>{{#list_participations}}
<li class="rank_position_{{{ quizz_points_ranking_position }}}">
<span>{{{ quizz_points_ranking_position }}}</span>
<span>{{{tag_avatar}}}</span>
<span>{{ first_name }} {{ last_name }}</span>
<span>{{quizz_points}} puntos</span>
</li>
{{/list_participations}}</ol>
</div>
<div>
{{{ paginator }}}
</div>
Custom header.
Usually, a header by default will appear at the top of the participants public list page, as well as in each personal data page. There, you can see the campaign's main image and the campaign's description, besides the "Share" and "Participate" buttons and details on the time zone and the promotion start and end dates.
You can include a custom header by clicking on the field that is included in the "Design" section (Enable custom header for the participants' list page):
If you click on that field, all the elements by default that showed up previously won't do it anymore. We can use html to include what we need. If we want the "Share" and "Participate" buttons to remain, we must include the following css classes:
-
x_cool_tabs_share_button_participation =>Share
-
x_cool_tabs_participate_button => Participate
The html included in our header is a map image linked to "Share" and "Participate" when you click on that text:
<div id="canvas" style="position: relative; width: 579px; margin: 0px auto; height: 174px;"><img id="bgImage" style="display: block; position: relative; z-index: 1;" src="https://d1gfwauryv0c0u.cloudfront.net/assets/pictures/e4e118b0c99711e58a08fb0cd9262203/content_encabezado-votos.png"><a style="position: absolute; width: 81px; height: 33px; display: block; z-index: 10; top: 114px; left: 42px; text-indent: -9999em; border: none; background: url("https://cooltabs.github.io/image-mapify/images/transparent.gif");" href="#" class="x_cool_tabs_share_button_participation" target="_blank"></a><a style="position: absolute; width: 84px; height: 25px; display: block; z-index: 10; top: 147px; left: 39px; text-indent: -9999em; border: none; background: url("https://cooltabs.github.io/image-mapify/images/transparent.gif");" href="#" class="x_cool_tabs_participate_button" target="_blank"></a></div>
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.