Articles in this section

Customise The Web Page Message That Is Display After Participating in a Campaign with our Advanced Personalization

Avatar
Cool Tabs Support
Updated
Follow

After participating in a Cool Tabs' campaign, a page is displayed (which is called Page after participate). It has several elements that show up by default, for example, a "Thank you for participating" message that you can configurate in the "Design" section of your campaign. It can be configurated as: 

  • Message by default for all users. 
  • Customised message depending on the results obtained in the quiz (only for Quizzes with or without points for right answers or Personality tests). 
  • Customised message for users who are winners of an Instant Win competition. 

 

You can customise these messages, which will pop up on the top section of the page, depending on the results the participants obtain in the campaign. You may use texts or images in order to do so. 

You've to include this two variables: <! - {{{cool_tabs_head}}} -> between the <head> </ head> and <! - {{{cool_tabs_body_end}}} -> tags at the end of the <body>, as we show below:

 

<!DOCTYPE html>

<html {{{ cool_tabs_html_attributes }}} >

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

<body {{{ cool_tabs_body_attributes }}} >

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

</body>

</html>

 

However, these fields can also be used to fully customise the "Page after participate". 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 email: {{{email}}}
  • User avatar: {{{tag_avatar}}}
  • Participant's full name: {{{full_name}}}
  • URL of the photo or image that the participant has uploaded to the photo contest: {{{image}}}
  • Player with the video uploaded by the user: {{{video_html}}}
  • Url of the user's video: {{{video_url}}}
  • Screeshot of the user's video: {{{video_screenshot}}}
  • Number of users referred by the participant: {{{referred_count}}}
  • Number of votes you have achieved: {{{votes_count}}}
  • Custom link of the participant who must share to viralize the campaign: {{{participation_link}}}
  • Url to participate again in the campaign: {{{participate_again_url}}}
  • Number of points obtained in the quiz: {{{quizz_points}}}
  • Number of total points (viral points, quiz points, etc.): {{{total_points}}}
  • Show the results of a quizz: {{{quizz_results}}}
  • Number of the DNI with which you have participated: {{{nif}}
  • Assigned code / coupon (only for code / coupon delivery campaigns) to the user: {{{coupon_code}}}
  • QR code of the assigned coupon (only for code / coupon delivery campaign) to the user: {{{qr_code}}}
  • Code / coupon validated by the user when participating (only for validation codes / coupons) to the user: {{{validated_coupon_code}}}
  • Answer to the question asked (when the question is activated with the option of the participation form and not with the quiz): {{{answer}}}
  • Answer to the question asked with word type text field: {{{extra_answer}}}
  • Link to share on Facebook: {{{fb_share_wall_button}}}
  • Link to share on Whatsapp: {{{whatsapp_share_wall_button}}}
  • Answer to each question of the quiz: you can show the answer that the user has given to each one of the questions. To show the answer, the user who has chosen to question 1 use the variable {{{answer_quiz_1}}}, to show the answer to question 2 use {{{answer_quiz_2}}} and so on.
  • Url to the image that the user has chosen in response to each quiz question: {{{answer_quiz_img_url_1}}}, {{{answer_quiz_img_url_2}}}, etc.
  • Picture of each quiz question: Image of question 1 -> {{{quiz_image_url_1}}}, Image of question 21 -> {{{quiz_image_url_2}}}
  • All the answers chosen by the user: {{{quizz_responses_html}}}
  • Date of participation: {{{created_date}}}
  • Date and time of participation: {{{created_at}}}
  • Time of participation: {{{created_time}}}
  • Unique identifier of the user: {{{participation_id}}}
  • All quiz responses (with basic html): {{{quizz_responses_html}}}
  • Title of the campaign: {{{title}}}
  • Main image of the campaign: {{{promotion_image}}}
  • Take the user directly to the PDF where s/he can download the coupon code:{{{coupon_download_url}}}
  • Check if a coupon has been assigned or not, to show a message or another: {{#has_coupon?}} Tu cupón es: {{coupon}} {{/has_coupon?}}{{^has_coupon?}} No tienes cupón {{/has_coupon?}}
  • The variable {{{ answer }}} shows the user's answer to the question they are asked to answer in the Form.
 

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_participation => 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.

 

Links to share:

  • Link to share on Facebook: {{{fb_share_wall_button}}}
  • Link to share on Whatsapp: {{{whatsapp_share_wall_button}}}

 

You can use also these variables in order to show direct links to share on different social networks: (you can use any content, html, icon, etc. between the open and close tag):

  • Direct link to share on Pinterest:
{{#custom_share_on_pinterest_btn}}
              <span class="fonticon gray-on-hover fonticon-pinterest"></span>
              <span class="offleft">pinterest</span>
 {{/custom_share_on_pinterest_btn}}
  • Direct link to share on Facebook:
            {{#custom_fb_share_wall_button}}
              Facebook
            {{/custom_fb_share_wall_button}}
  • Direct link to share on Twitter:
            {{#custom_share_on_twitter_btn}}
              Share on Twitter
            {{/custom_share_on_twitter_btn}}
  • Direct link to share on Whatsapp:
            {{#custom_share_on_whatsapp_btn}}
              Share on WhatsApp
            {{/custom_share_on_whatsapp_btn}}

 

You can also use these variables in order to show or not some content on the thanks screen just after participate or to show some content any time you enter your participation screen (through the 'View my entry' link)

 Hi! {{#just_joined}} You have just joined the campaign! {{/just_joined}}

 {{#not_just_joined}} You have already joined this campaign. go for votes! {{/not_just_joined}}.

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 campaign, 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: 

 

 
This is the HTML:
<!DOCTYPE html>

<html {{{ cool_tabs_html_attributes }}} >
  <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>

<body {{{ cool_tabs_body_attributes }}} >

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

  </body>
</html>
 
 
On the default page, these variables will show up as you may see in the following screenshot: 

 

If you modify the variables using html, you can get a customised page like the following one: 

 

 

Here you have an example of the html used for customising the message that users can see after participating in a campaign. It depends on the different results they obtained in the quiz (only for Quizzes with or without points for right answers or Personality tests). 

 

<div class="image_win">

<p style="text-align: center;"><img alt="" src="https://s3.amazonaws.com/cool-tabs/assets/pictures/a3b353e0c0f411e58e15bf92146a0821/content_ING_2272_00191.jpg" style="width: 810px; height: 809px;" /></p>

<div class="points">{{{quizz_points}}}</div>

<div class="name">{{{first_name}}}</div>

</div>

 

How to customise the Share Button displayed after participating in a campaign.

If you want to change the Share Button displayed on these page, you need to follow these steps:

1. Create a customised image so, by clicking on it, users can see the pop-up that usually shows up when you click on the Share Button. It will display all the options the user has to share his/her participation. 

2. Add you image to the html on the field you are using to show the message after participating.

3. Include the link to the pop-up this way: <a href="#" class="x_cool_tabs_share_button_participation"><img src="NEW IMAGE"></img></a>

 

Example:

 

 

How to include a link to the participants data list.

If you wish to include a link to the public participation list (which doesn't show up on this page by default), you must include the class:  x_cool_tabs_participations_link.

 

Example:

 <a href="#" class="x_cool_tabs_participations_link"><img src="NEW IMAGE"></img></a>

 

How to include a link to the quiz global results.

If you wish the participants to have access to the quiz global results, you may include a link to the page where these results are displayed. You must include the class: x_cool_tabs_quizz_results_link.

Ejemplo: 

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

 

Related content.

You can also customise: 

Comments

0 comments

Please sign in to leave a comment.

Related articles