Articles in this section

Advanced Personalization with custom HTML

Avatar
Cool Tabs Support
Updated
Follow

 

1. Introduction.

2. How to configure your own HTML.

2.1. HTML for the landing page.

2.2. HTML for the participation form.

2.3. HTML for the page after participation.

2.4. HTML for public participation page.

2.5. HTML for the individual participant page.

2.6. HTML for the winners' page.

2.7. HMTL for the email/SMS that is sent after participating.

2.8. HTML for the coupon instruction page.

2.9. Others.

3. Other specifications.

4. Related content.

 

1. Introduction.

In Cool Tabs, you have many ways to customize your campaign. You can change the text in the campaign settings, upload your own content (images, videos, GIFs...), and give it a look & feel according to your corporate image...

However, thanks to our advanced customization, you can go one step further and include your own HTML in all the screens of your campaign (only available for White-Label campaigns).

In this tutorial, we are going to explain to you all the options to include your custom HTML with our advanced customization.

In addition, the following tutorials are available:

 

2. How to configure your own HTML.

When you create a campaign with the Cool Promo White-Label application, in the 'Design' ('Advanced' tab) and 'Final screen' ('Advanced' tab) sections of your campaign edition, you will find several fields referring to the use of your own HTML for the different screens:

  • Use your own complete HTML for the landing page: this is the first screen displayed in a campaign. You can include a title, a description, a button...
  • Use your own complete HTML for the form registration page: the participation form is where users interact with the dynamics of your campaign (quiz, survey, game...) and where they must leave their data in order to participate.
  • Use HTML for the page after participation: this is the screen that is shown when they finish interacting with the quiz and data form of a campaign. It is the final screen.
  • Use your own complete HTML for the winners' page: this screen will show the winners/alternates of your campaign.

You will be able to include your custom HTML (and your own style sheet - CSS) to include all the elements you need in the different screens.

The only requirement that all custom HTML with Cool Tabs has is that you have to include 4 mandatory variables:

1) <!-- {{{ cool_tabs_head }}} --> between the <head></head> tags.
2) <!-- {{{ cool_tabs_body_end }}} --> at the end of the <body>

3) {{{ cool_tabs_html_attributes }}} inside <html> tag

4) {{{ cool_tabs_body_body_attributes }}} inside the <body> tag.

 

Without these four variables, your campaign will not work correctly, since you will not have access to the statistics that we provide from Cool Tabs, nor to other features such as campaign language or basic styles, among others.

All variables must be enclosed between three braces {{{ }}}, as shown below.

 

<!DOCTYPE html> 
<html {{{ cool_tabs_html_attributes }}} >
  <head>
    <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}} >
    <!-- {{{ cool_tabs_body_end }}} -->
  </body>
</html>

 

You can also edit all the screens from the campaign preview. This is the recommended place to do it since it allows you to modify the HTML and CSS, save it, and see the result directly.

 

preview-icon.png

 

Then, on the left side menu, in the 'Main Design' section, you will find the option to edit the HTML.

 

preview-html.PNG

 

2.1. HTML for the landing page.

To customize the landing you have to activate the custom HTML. Go to the campaign editor and enable the option 'Use your own complete HTML for the landing page', in the 'Advanced' tab of the 'Design' section.

 

mceclip0.png

 

Here is an HTML example for the landing page:

 

<!DOCTYPE html> 
<html {{{ cool_tabs_html_attributes }}} >
 <head>
  <!-- {{{ cool_tabs_head }}} -->
 </head>
 <body {{{ cool_tabs_body_attributes }}} >
  <div class="wrapper">
   <h1> {{{ title }}} </h1>
   {{{ description }}}
   <p> 
    <a href="#" class="x_cool_tabs_participate_button m_btn">PARTICIPATE</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_share_button">SHARE</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_participations_link">Gallery</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_legal_options_button">Legal Terms</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

This HTML would look like this:

 

mceclip0.png

 

The text, link, and colors can be modified from the campaign preview panel.

 

mceclip1.png

 

 

You can include our custom variables to display certain information on the landing page, for example, the current number of participants or the URL to the list of participants.

Check the variables supported by the landing page.

 

2.2. HTML for the entry form.

To customize the form you have to activate the custom HTML. Go to the campaign editor and enable the option 'Use your own complete HTML for the form registration page', in the 'Advanced' tab of the 'Design' section.

 

mceclip2.png

You can add our custom variables to customize the form and show, for example, the number of questions that still remain to be answered.

Check the variables supported by the entry form.

 

Below, we show you the general template for the participation form:

 

<!DOCTYPE html> 
<html {{{ cool_tabs_html_attributes }}} >
 <head>
  <!-- {{{ cool_tabs_head }}} -->
 </head>
 <body {{{ cool_tabs_body_attributes }}} >
  <div class="wrapper form_layout">
   {{{ cool_tabs_form }}}
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

This HTML would look like this:

 

mceclip3.png

 

mceclip4.png

 

Optional classes for the entry form:

  • The "wrapper" class is the one that tells the contender to have a maximum width of 810 px.
  • The class "form_layout" gives an extra 15 px space to the form container, on each side of the x-axis, so that the form fields do not appear 100% sideways. This is visible when the campaign is accessed from a mobile device.

 

2.3. HTML for the page after participation.

If you want to include custom HTML in the final screen of your campaign, you must enable it from the campaign editor, in the 'Advanced' tab of the 'Final Screen' section.

 

mceclip5.png

 

You can include our custom variables to show certain information on the page after participation, for example, the number of points obtained in the quiz or the URL of the photo the user has uploaded to participate.

Check the variables supported by the page after participation.

 

Below is the general template for a thanks page:

 

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
 <head>
  <!-- {{{ cool_tabs_head }}} -->
 </head>
 <body {{{ cool_tabs_body_attributes }}}>
  <div class="wrapper">
   <h1>Thanks, {{{ first_name }}}!</h1>
   <p>You have {{{ quizz_points }}} point(s)</p>
   <div>{{{ thanks_message }}}</div>
   <p>
    <a href="#" class="x_cool_tabs_share_button_participation m_btn">SHARE</a>
   </p>
   <p>
    <a href="#" class="x_cool_tabs_participations_link">Participations</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

This HTML would look like this:

 

mceclip6.png

 

2.4. HTML for public participation page.

To display the list of participants, you must enable it from the campaign editor, in the 'Entries list' tab of the 'Participation' section.

 

mceclip7.png

You can include our custom variables to show certain information in the participant list, for example, the current number of participants or the 'Vote' button.

Check the variables supported by the public participation list.

To edit the custom HTML of the participant list, go to the campaign preview, select the screen corresponding to the participant list, and activate the option 'Use your own complete HTML for the participations gallery page'.

 

mceclip8.png

 

Below is an HTML example for the participants' list page. 

 

<!DOCTYPE html>
 <html {{{ cool_tabs_html_attributes }}} >
  <head>
   <!-- {{{ cool_tabs_head }}} -->
  </head>
  <body {{{ cool_tabs_body_attributes }}}>
   <div class="wrapper">
    {{{ participation_list_header }}} 
    <h1>{{{ title }}}</h1>
    <ol>{{#list_participations}}
     <li class="rank_position_{{{ quizz_points_ranking_position }}}">
      <span>{{{tag_avatar}}}</span>
      <span>{{ first_name }} {{ last_name }}</span> 
      <span>{{quizz_points}} points</span>
      <span><a href="{{{ participation_link }}}">See detail</a></span>
     </li> 
    {{/list_participations}}</ol>
    <div>
     {{{ paginator }}} 
    </div>
    <a href="x_cool_tabs_participate_button" class="m_btn">Participate</a>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

This HTML would look like this:

 

mceclip1.png

 

2.5. HTML for the individual participant page.

To edit the custom HTML of the individual participant page, go to the campaign preview, select the screen corresponding to this page, and activate the option 'Use your own complete HTML for an individual participant's page (White Label campaigns).

 

mceclip0.png

 

Below you can see an HTML example for the individual participant page:

 

<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
 <head>
  <!-- {{{ cool_tabs_head }}} -->
 </head>
 <body {{{ cool_tabs_body_attributes }}}>
  <div class="wrapper">
   <h1>Participación de {{{ full_name }}}</h1>
   <div>
    <span>{{{tag_avatar}}}</span>
    <span>{{quizz_points}} point(s)</span>
    <span>{{{ created_date }}}</span>
   </div>
   <hr>
   <p>
    <a href="#" class="m_btn x_cool_tabs_participations_link">Check participations</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} -->
 </body>
</html>

 

This HTML would look like this:

mceclip2.png

 

You can add our custom variables to show certain information on the participant's individual page.

Check all the variables supported by this page.

 

2.6. HTML for the winners' page.

If you want to include your own custom HTML in the winners' page of the campaign, you must enable it from the campaign editor, in the 'Advanced' tab of the 'Design' section. Remember that you can also edit the HTML of the winners' page from the preview, so you can modify the HTML and CSS, saving and viewing the result directly.

 

mceclip3.png

 

To customize the winners' page, you can use our advanced customization, using variables.

Check which variables are supported by the winners' page.

 

Here is an HTML example for the winners' page:

 

<!DOCTYPE html> 
<html {{{ cool_tabs_html_attributes }}} >
 <head> 
  <!-- {{{cool_tabs_head}}} --> 
 </head> 
 <body {{{ cool_tabs_body_attributes }}} >
  <div class="wrapper">
   {{{winners_landing_body}}}
   <div>
    {{#list_winners}}
     <h1>{{winner_title}}</h1>
     <ol>
      {{#winner_winners}}
       <li> {{ first_name }} {{ last_name }} </li>
      {{/winner_winners}}
     </ol>
    {{/list_winners}}
   </div> 
   <p>
    <a href="#" class="m_btn x_cool_tabs_legal_options_button">Legal Terms</a>
   </p>
  </div>
  <!-- {{{ cool_tabs_body_end }}} --> 
 </body>
</html>

 

Here is an example:

 

mceclip4.png

 

2.7. HTML for the email/SMS sent to users after participation.

Our email-sending tool allows you to customize the body of the message you are going to send to the participants of your campaign and include your own custom HTML.

You can configure it from your campaign editor, in the 'Emails and SMS' section. Click on 'Manage your campaign email and SMS templates' and create a new template.

 

mceclip5.png

 

In addition, you can add different elements, with our advanced customization through variables.

Check the variables supported by the email or SMS sent to the participant.

 

HTML example:

 

p>Hi, {{{ first_name }}}!</p>

<h1 style="text-align: center;">Thanks for participating!</h1>

<h2 style="text-align: center;">You have scored {{{ quizz_points }}} points.</h2>

<p style="text-align: center;"><a class="x_cool_tabs_participations_link" href="#">Link to participations</a></p>

<p>We have included your email {{{ email }}} in our database.</p>

 

2.8. HTML for the coupon instructions page.

The instruction page of a discount coupon you distribute in your campaign supports customization. You can include your custom HTML, as well as use our advanced customization with variables, to show certain information on the coupon page.

Coupon configuration is done from the 'Coupons' section of your campaign editor. You must enable the option 'Enable coupons vouchers'. 

 

Here is an example:

 

<p><img alt="" height="540" src="https://uploads3.ct-assets.com/assets/pictures/dee421d45add47c3a3ce4bf051609259/content_gef4ec625f924439b6696fec8396b9898b176564695c9771a2c69d23b7b087b3f8d2fce21524bce9eeb2a5bd7c02f6434e3c493780e751ec1bbb4cc08ff9cebd0_1280.jpg" width="810" /></p>

<p><b>Congratulations {{{ full_name }}}!</b></p>

<p>Here is your coupon: {{coupon}}</p>

<p>{{{ qr_code }}}</p>

 

2.9. Others.

2.9.1. Variables system for dynamic HTML copies.

With this system, it is possible to generate a model with HTML, with which it is possible to configure dynamic texts, translated into multiple languages, without having to use copies (text). In this way, it is possible to have a multi-language campaign, since these variables can be translated. Also, by delegating variables, you will be able to change any copy easily and quickly.

Check out the following tutorial, in which we explain how to set variables for dynamic HTML copy with advanced customization.

 

2.9.2. Custom CSS with Cool Tabs variables.

In your campaigns, you can use your own custom CSS and integrate certain variables. For example, you can use the campaign color picker to select the font color of your campaign and use that color for all body fonts in the CSS.

A simple example of CSS integration would be:

 

body{
 color: {{font_color}};
 background-color: {{background_color}};
 font-family: {{font_family}};
}
h1{
 color: {{primary_color}};
}
h2{
 color: {{secondary_color}};
}

 

3. Other specifications.

If you have any questions, you can contact us at help@cool-tabs.com.

 

4. Related content.

Advanced personalization with variables.

 

 

Comments

0 comments

Please sign in to leave a comment.

Related articles