Articles in this section

How to Modify the Participation List with our Advanced Personalization

Avatar
Cool Tabs Support
Updated
Follow

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): 

mceclip0.png

 

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

 

Example: 

 

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

 

3. Related content.

Comments

0 comments

Please sign in to leave a comment.

Related articles