You can modify or hide the elements of several pages in a promotion or competition by including a custom css (the landing page, the form registration page, the winners page, the thanks page or the custom discount voucher instructions). But thanks to our templates system, you can also include your own html in all these pages. Check out how to do it. 


How can I create my own html using Cool Tabs templates system? 


In the "Promotion Design" section of Cool Promo White Label and Cool Quiz White Label, we'll be able to see 4 different fields regarding the use of our own html (landing page, form registration page, thanks page and winners page):






Besides, we can also edit the html of the landing page or the page after participate from the preview page, where we can modify and check the results directly. Go to the left menu on the page and you'll see the "Edit html" option. 



Click on "Edit with maximised window" to work more comfortably on your html.



Html template for the landing page


There are two {{{handlebars}}} that you must ALWAYS include: <!-- {{{ cool_tabs_head }}} --> between the tags <head></head> y <!-- {{{ cool_tabs_body_end }}} --> at the end of <body>, as you can see here:



<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

  <body>
    
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>



Your html won't work if you don't include these variables. 


These are the available variables:

  • Campaign's title: {{ title }}
  • URL for the campaign's main image: {{ image }}
  • Current number of participants: {{ participations_count }}
  • URL for the participants list page: {{ public_participations_url }}


When you need to display dynamic elements, you should use some CSS classes to the elements you want to ad behaviour to. For example, if you want to display the participate button as an image, you should use somethign like this:


<img src="imagen.png" class="{{{ x_cool_tabs_participate_button }}}" />



These are all the available classes you can use:

  • x_cool_tabs_participate_button =>Link to the participation form 
  • x_cool_tabs_my_participation_button =>Link to  my participation page
  • x_cool_tabs_share_button => Link to "Share" button 
  • x_cool_tabs_participations_link => Link to the participants' public list 
  • x_cool_tabs_legal_options_button => Link to legal conditions 
  • x_cool_tabs_quizz_results_link =>> Link to the global results of the quiz


Example of a customised landing page: 





<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

  <body>
    <h1> {{{ title }}} </h1>

    <p>
      <a href="#" class="x_cool_tabs_participate_button"><img src="PARTICIPATE BUTTON"</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_share_button">Share contest</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_participations_link">Access participants list</a>
    </p>

 <p>
      <a href="{{{ public_participations_url }}}">Another way to access participants list</a>
    </p>

    <p>
      <a href="#legal_terms" class="x_cool_tabs_legal_options_button">Legal terms</a>
    </p>

    <!-- {{{ cool_tabs_body_end }}} -->

  </body>
</html>



Html template for the Entry Form 

 

You must ALWAYS include the following two variables: <!-- {{{ cool_tabs_head }}} --> between the tags <head></head> y <!-- {{{ cool_tabs_body_end }}} --> at the end of <body>. 


The entry form will be shown completely in the handlebar  {{{ cool_tabs_form }}} (fields with required data, as well as the quiz questions). This way, you can use the templates' system to show background pictures, different headers, a footer or whichever element that you want to appear in the entry form. This is the template you must use to customise your campaign's entry form: 


  

<html>
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body>
{{{ cool_tabs_form }}}
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>


  


Html template for the thanks page


The two mandatory variables are: <!-- {{{ cool_tabs_head }}} --> between the tabs <head></head> and <!-- {{{ cool_tabs_body_end }}} --> at the end of <body>: 



<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

  <body>
    
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>



You need to select the values you want to show up and specify how and where you want them to do it. Use html on the fields we previously told you about, and do it with the following {{{handlebars}}}: 


  • User's first name: {{{first_name}}}
  • User's last name: {{{last_name}}}
  • User's full name: {{{full_name}}}
  • URL of the image or photo the user has uploaded to a photo competition: {{{image}}} 
  • Number of referred users the user has driven to the competition: {{{referred_count}}} 
  • Number of votes the user has received: {{{votes_count}}} 
  • Customised link the user should share to make the campaign go viral: {{{participation_link}}} 
  • Number of points the user has obtained in a quiz: {{{quizz_points}}} 
  • Link to the public page of global results of the quiz: {{{quizz_results_link}}} 
  • ID or Passport number with which the user has participated in the promotion: {{{ nif }}
  • Answers to each question of the quiz (you may include each answer, combining the question number to each variable). This way, the variable of the answer to question 1 of the quiz would be {{{answer_quiz_1}}}, the variable of the answer to question 2 of the quiz would be {{{answer_quiz_2}}} and so on. 

Bear in mind that these variables only below to the text of the value they represent, except the {{{image}}} variable, which represents the url of the image the user has uploaded.


There are three more classes that you can include: 


  • x_cool_tabs_share_button => Link to "Share" button 
  • x_cool_tabs_participations_link => Link to the participants' public list 
  • x_cool_tabs_quizz_results_link =>> Link to the global results of the quiz

Last but not least, we can include a personalised message for each participant depending on his/her results on the test. Depending on the dynamic we choose for our promotion or cometition, a different message will appear in the place where we include the variable (personality test, Instant Win, etc). This is the variable we need to use:


{{{ thanks_message }}}


Example of custom page after participate: 




 

<html>
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>

  <body>
    <h1>¡Gracias, {{{ first_name }}}!</h1>
    <h2>Tienes {{{ quizz_points }}} puntos</h2>

    <div>{{{ thanks_message }}}</div>

    <p>
      <a href="#" class="x_cool_tabs_share_button_participation">COMPARTIR PARTICIPACIÓN</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_participations_link">Enlace a participaciones</a>
    </p>

    <p>
      <a href="#" class="x_cool_tabs_quizz_results_link">Resultados del quizz</a>
    </p>

    <!-- {{{ cool_tabs_body_end }}} -->

  </body>
</html>


 


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 }}} -->.


<html>
<head>
<!-- {{{cool_tabs_head}}} -->

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</head>
</html>
<body>

<div class="wrapper winners_layout">

  <!-- {{{winners}}} -->

</div>

<!-- {{{ cool_tabs_body_end }}} -->

</body>



Example of custom winners' page: 



Ejemplo-p%C3%A1gina-ganadores.png



Check out how which steps you must follow to do it here: Customise the winners page


Customise the email that is sent to users after they participate in a promotion


In the "Additional Details" section of the apps Cool Promo White Label and Cool Quiz White Label, you must click on the following field: "Send an email to users after they join the contest".


We can customise the message we send to users after they participate in a promotion by including our own html. In order to do so, we can add several elements, including the following {{{handlebars}}}

  • User's email: {{{email}}}.
  • User's first name: {{{first_name}}}
  • User's last name: {{{last_name}}}
  • User's full name: {{{full_name}}}
  • URL of the image or photo the user has uploaded to a photo competition: {{{image}}} 
  • Customised link the user should share to make the campaign go viral: {{{participation_link}}} 
  • Number of points the user has obtained in a quiz: {{{quizz_points}}} 
  • Link to the public page of global results of the quiz: {{{quizz_results_link}}} 
  • ID or Passport number with which the user has participated in the promotion: {{{ nif }}
  • Discount voucher or code (if this option has been activated): {{{coupon}}}
  • QR code/coupon (if this option has been activated): {{{qr_code}}

<p>Hola, {{{ first_name }}},</p>

<h1 style="text-align: center;">Muchas gracias por participar!</h1>

<h2 style="text-align: center;">Has conseguido un total de {{{ quizz_points }}} puntos</h2>


<p style="text-align: right;"><a class="x_cool_tabs_participations_link" href="#">Enlace a participaciones</a></p>

<p>Hemos incluido tu correo electrónico: {{{ email }}} en nuestra base de datos.</p>



Instructions on how to use discount coupons


If you don't want your users to have any doubt on how to use their discount coupons, you must complete the field "Instructions to redeem the coupon" with a text, image or video. You'll find it in the "Coupons" section in the apps Cool Promo White Label y Cool Quiz White Label


We can use our own html to configure the instructions, including the following {{handlebars tags}}

  • User's email: {{{email}}}.
  • User's first name: {{{first_name}}}
  • User's last name: {{{last_name}}}
  • User's full name: {{{full_name}}}
  • URL of the image or photo the user has uploaded to a photo competition: {{{image}}} 
  • Customised link the user should share to make the campaign go viral: {{{participation_link}}} 
  • Number of points the user has obtained in a quiz: {{{quizz_points}}} 
  • ID or Passport number with which the user has participated in the promotion: {{{ nif }}


What about the rest of the pages in my campaign? 


  • Pages before and after the promotion is active: You can include your own html in the "Promotion design" section. You wouldn't be able to use any of the variables we explained before, as these are screens you can visualise before and aftter the promotion is active.


You can also customise: