2.3. Page after participation.
2.4. Public participacion page.
2.5. Public page of individual participation.
2.7. Emails and SMS that are sent after participating.
2.8. Code and coupon instruction page.
2.9. Viralization messages on social networks.
1. Introduction.
The Cool Tabs campaign editor allows you to customize your campaign, including your own text and content (images, video, GIFs...), as well as changing fonts and colors (primary, secondary, background, and text). This way, you can set up a campaign with a look & feel in line with your corporate image.
However, thanks to our advanced customization with variables, you can go one step further in that customization.
It is also possible to include your own HTML in all the screens of your campaign (only available in White-Label campaigns).
In this tutorial, you will find detailed information about all the variables you can include on the different pages, so you know the level of personalization and the type of information you can display.
Keep in mind that:
- Many of the variables can be included in several pages of your campaign. This is the case, for example, with the variables supported by the landing page, which can also be included on the page after participation. On each campaign page, we will specify when it applies to other pages and when it does not.
- The use of most of the variables only makes sense if you include custom HTML, not with the default HTML.
- In Cool Tabs, we give you different variables with different formats, due to their nature, so you can add them to your custom HTML and show the information you are interested in. Some examples of what we mean by different formatting are:
-
- {{{ title }}}: this shows plain text.
- x_cool_tabs_participate_button: this variable refers to a link, so you will have to use it in a tag of type <a></a> and it will be included as a class.
- {{{ quizz_responses_html }}}: this shows information with basic HTML.
{{{ promotion_image }}}: this variable refers to an image, so you must use it in a tag of type <img> and it would be the URL of the src of the <img> tag. - {{{ participate_link }}}: this shows a link with full HTML.
- {{{ participate_again_url }}}}: this variable refers to a link, so you have to use it in a tag of type <a></a> and it would be the URL of the href of the <a></a> tag.
- {{{{ voting_form }}}}: this shows information with HTML that simulates a button.
2. Advanced personalization on each page.
Below, we detail all the variables that you can include, depending on the pages of the campaign that support our advanced personalization.
2.1. Variables for the landing page.
By default, in the edition of your campaign, you can customize the design, without the need to include variables, adding a title, a description, the main image, and a background image. In addition, you will be able to show the link to the legal bases or a share button on social networks.
So, the use of the variables we are going to list would not make sense if you don't customize the landing page using your own HTML custom (only available for White Label).
The variables you can include are:
- x_cool_tabs_participate_button: link to participation form. Does not apply to the participation form.
- {{{ participate_link }}}: link to participate in the campaign. Does not apply to the participation form.
- {{{ title }}}: campaign's title.
- {{{ description }}}: campaign's description.
- {{{ promotion_image }}}: URL of the campaign's main image. This image is resized after the upload process with a maximum width of 810px if the original size is bigger.
- {{{ promotion_image_original_url }}: URL of the campaign's main image with the original width (not resized).
- {{{ language_selector }}}: link to language selection. Only for campaigns set up in multiple languages. Please note that this will not apply to the email sent to the participant or to the voucher instructions page.
- x_cool_tabs_share_button: link to share the campaign. A popup will open with all the options to share the campaign URL. Please note that, apart from the landing page, this class can only be used on the participant list page. It does not apply to the participation form.
- x_cool_tabs_legal_options_button: link to see the legal bases. Does not apply to the participation form.
- {{{ public_participations_url }}}: URL to the participants' list page.
- x_cool_tabs_participations_link: link to the public list of participants. Does not apply to the participation form.
- x_cool_tabs_my_participation_button: link to view my participation. Does not apply to the participation form
- x_cool_tabs_quizz_results_link: link to go to the public global quiz results page. Does not apply to the entry form.
- {{{ public_promo_landing_url }}}: URL to redirect the participant back to the campaign landing page.
- {{{ participations_count }}}: current number of participants.
- {{{ promotion_bbll_page_url }}}}: URL to the legal bases page.
Landing page customization also allows you to include other variables related to viralize (can only be used in custom HTML). You can directly use the following variables to show direct links to some sharing options. Inside the variable, you can include any necessary content (text, HTML elements, icons, etc.). These variables do not apply to the participation form.
- Direct link to share on Facebook:
{{#custom_fb_share_wall_button}}
Share on 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}}
- Direct link to share on Pinterest:
{{#custom_share_on_pinterest_btn}}
Share on Pinterest
{{/custom_share_on_pinterest_btn}}
Advanced customization for the landing with custom HTML.
2.2. Variables for the entry form.
Advanced customization for the form allows you, for example, to show background images, different headers, or those elements that you consider that, by design or relevance, should appear in the participation form of your campaign (indicate the questions that remain to be answered, show the name of the participant...).
As with the landing, the use of variables in the participation form should only be used with your own HTML (only available for White Label).
Variables you can include in the form:
- All the variables supported by the landing, except for those specified in the section.
- {{{ cool_tabs_form }}}: to show the quiz and the participation form.
In addition, you can include a conditional variable to display content according to the device:
{{#mobile?}}
Content to display on mobile.
{{/mobile?}}
{{#desktop?}}
Content to display on desktop.
{{/desktop?}}
Keep in mind that in addition to the form, the conditional variable to display content according to device type can only be used on the thank-you page and on the individual participant page.
Advanced customization for the entry form with custom HTML.
2.3. Variables for the page after participation.
When participants complete the entry form, they see a thank you or results page.
You can customize the thank-you page or the results screen with the content you want to show the user (text, image or HTML).
In addition, it is common to include variables in this screen to display certain information, for example, the answers that the users have given in the data form (their name and surname), the answers they have given in the quiz, the number of points obtained...
Variables that you can include on the page after participation:
In addition, you can include others that we list below.
Variables related to the campaign:
- {{{ thanks_message }}}: this is the message after participation that each user will see. When you include this variable, the general message will appear for all participants. In the case of a test with points, the message that corresponds to the participant according to the points obtained in the quiz; depending on the corresponding category in the personality test or the Instant Win message corresponding to the winners. This variable will not apply to the list of participants or to the email sent after participation.
- {{{ participate_again_url }}}: URL to participate again. It does not apply to the email.
- {{{ participation_link }}}: Custom URL that the participant has to share to spread the campaign. Does not apply to the individual participant page.
- {{{ promo_logout_url }}}}: URL to logout. It cannot be used on any page other than the page after participation.
- x_cool_tabs_share_button_participation: this is a class to include in the campaign share link. It will open a popup with all the sharing options and the user's own URL. This class is also used for the individual participant page. It cannot be used on any page other than the page after participation.
- {{{ fb_share_wall_button }}}: link to share on Facebook. You will be able to include this variable on the individual participant page. It will not apply to any other page.
- {{{ whatsapp_share_wall_button }}}: link to share on WhatsApp. You will be able to include this variable on the individual participant page. It will not apply to any other page.
Variables related to data form answers*:
- {{{ first_name }}}: participant's name.
- {{{ last_name }}}: participant's last name.
- {{{ full_name }}}: participant's full name.
- {{{ email }}}: participant's email address.
- {{{ nickname }}}: participant's nickname.
- {{{ tag_avatar }}}: user's avatar.
- {{{ nif }}}: ID number with which the participant has participated.
* All the above variables also apply to the winners' page.
Variables related to the quiz answers:
- {{{ answer }}}: this variable shows the user's response to the answered question in the form.
- {{{ answer_quiz_1 }}}}: the answer to each quiz question given by the user. To display the answer chosen by the user to question 1 it uses the variable {{{ answer_quiz_1 }}}, to display the answer to question 2 it uses {{{ answer_quiz_2 }}} and so on.
- {{{ answer_quiz_quiz_img_url_1 }}}, {{{ answer_quiz_img_url_2 }}}: URL to the image chosen by the user in each quiz question.
- {{{ image }}}: URL to the photo or image uploaded by the participant in the photo contest. Applies also to the winners' page.
- {{{ quiz_image_image_url_1 }}}, {{{ quiz_image_url_2 }}}: URL of the image uploaded by the user in the quiz. The number corresponds to the order of the questions of the custom quiz/form of the image upload type.
- {{{ quizz_responses_html }}}: this variable shows all quiz questions with user answers (with basic HTML).
- {{{ video_html }}}: a player with the video uploaded by the user. Applies also to the winners' page.
- {{{ video_url }}}: URL of the user's video. Applies also to the winners' page.
- {{{ video_screenshot }}}: a screenshot of the user's video. Applies also to the winners' page.
- {{{ question_quiz_1 }}}, {{{ question_quiz_2 }}}: text of each question of the custom quiz/form. For example, if a quiz has 10 questions and a user answers the last 5, these variables will show the questions answered by the user, not the first 5 of the quiz.
Variables related to campaigns with codes/coupons:
- {{{ coupon_code }}}: assigned code/coupon (only for code/coupon distribution campaigns).
- {{{ coupon_download_url }}}: URL to download the PDF coupon delivered to the participant. Note that it will not apply to the coupon instruction page you give to the participant or to the email sent after participation.
- {{ final_file_download_url }}}: URL of the file that corresponds to the participant. You must assign a file to download after participation, either a generic one "Assign a file to download after participation", one associated with an Instant Win or one associated with a Final Thank You Page.
- {{{ qr_code }}}: QR code of the assigned coupon (only for code/coupon distribution campaign). Applies also to the winners' page.
- {{{ validated_coupon_code }}}: code/coupon validated by the user when participating (only for code/coupon validation campaigns). Applies also to the winners' page.
- In addition, you can control whether a coupon has been assigned or not, to display one message or another with the coupon conditional. It is a conditional variable to show content when there is a coupon assigned or when there is no coupon assigned:
The conditional used to show a message when a coupon has been assigned is:
{{#has_coupon?}}
Your coupon is: {{{coupon_code}}}
{{/has_coupon?}}
Meanwhile, the conditional used to show when there is no coupon assigned:
{{^has_coupon?}}
You do not have a coupon
{{/has_coupon?}}
The complete scenario with both conditionals will be:
{{#has_coupon?}}
Your coupon is: {{{coupon}}}
{{/has_coupon?}}
{{^has_coupon?}}
You do not have a coupon
{{/has_coupon?}}
Remember that conditionals and iterators always have 2 square brackets. Variables have 3, but they can have 2 as long as the content inside does NOT have HTML.
Variables related to participation:
- {{{ created_date }}}: participation date: 2021-01-01
- {{{ created_at }}}: date and time of participation: 2021-01-01 00:00:00 +0200
- {{{ created_time }}}: date (textual) and time of participation: January 01, 2021 10:43 am
- {{{ participation_id }}}: unique user ID. Applies also to the winners' page.
- {{{ participations_by_same_user_count }}}: number of times the user has participated in the campaign. Applies also to the winners' page.
Variables related to the points obtained:
- {{{ game_points }}}: number of points obtained by gamification (Memory Cards, Matching Cards...). Applies also to the winners' page.
- {{{ participate_points }}}: number of points obtained by participating. This only applies if you have configured the viral ranking and assigned points for participating. Applies also to the winners' page.
- {{{ referred_count }}}: number of referred users achieved by the participant.
- {{{ referred_points }}}: number of points earned by referrals. This only applies if you have configured the viral ranking and assigned points for getting a referral.
- {{{ quizz_points }}}: number of points obtained in the quiz. Applies also to the winners' page.
- {{{ votes_count }}}: number of votes. Applies also to the winners' page.
- {{{ votes_points }}}: number of points obtained for the votes received in one of his/her participation.
- {{{ total_points }}}: total number of points for a given user's participation (includes: quizz_points + game_points + participate_points). Applies also to the winners' page.
- {{{ global_points }}}: global points of a user. This is the score you should use by default. If you have only allowed one participation per user, the global score will include: total_points + referred_points. And if there is multi-participation, i.e. a user can participate several times, the overall score will include: the sum of each total_points of each participation + referred_points. Applies also to the winners' page.
- {{{ quizz_results }}}: tag to display the results of a quiz. This does not apply to the email sent after participation or to the coupon page given to the participant.
- Conditional variable when you have certain points in a quiz and you want to show it:
{{#quizz_points}}
You have {{{quizz_points}}} points
{{/quizz_points}}
Thanks to these variables, you will be able to display a message in which, for example, you indicate to the participant:
You have a total of {{{ global_points }}} in the campaign. You just got {{ participate_points }} for participating right now. You have participated {{participations_by_same_user_count }} times and you have achieved {{referenced_count }}, which have given you {{referenced_points }}}.
Advanced customization for the thanks page with custom HTML.
2.4. Variables for the public participation page.
In the campaign, it is possible to show a public page with a list of users who have participated. You can enable this option from the edition of your campaign, in the 'Entries list' tab of the 'Participation' section.
This page with the list of participants can be customized to include certain elements such as, for example, a 'Vote' button, the number of points obtained for the votes received, or a participant counter.
Note that the use of variables on this page is designed for your custom HTML, so if you use the default settings, you should not use them.
Variables you can include in the participant list:
- All those supported by the page after participating, except for those specified.
- When customizing the public participation page, you must include the iterator {{#list_participations}} with which you will paint the participants of your campaign.
<ol>{{#list_participations}}
<li>
</li>
{{/list_participations}}</ol>
- {{{ paginator }}}: it's a paginator to limit the number of participants per page. The paginator can be modified from the campaign editor, in the section 'Participations', in the tab 'Entries list'.
- {{{ participation_list_header }}}: personalized header of the participation list.
- {{{ quizz_points_ranking_position }}}: position of the participant according to the total points obtained.
- {{{ voting_form }}}: voting button. The voting option must be activated in the campaign edition. Also applies to the individual participant page.
- {{{ voting_form }}}: button for voting.
Advanced customization for the participant list page with custom HTML.
2.5. Variables for the public page of individual participation.
The individual participant page can be accessed from the participant list, under 'View details'. Here you can obtain information about your participation in the campaign, for example, the total number of points, the number of times you have participated, the number of referrals you have recruited, and the points you have gotten for this...
Keep in mind that the use of variables in the page of individual participation is intended for your own HTML, so if you use the default configuration, you should not use them.
Variables that you can include on the page of individual participation:
- The variables for the landing page.
- The variables for the page after participation.
- Some variables for the participant list page. These have been detailed in that section.
Advanced customization with your own HTML for the individual participant's page.
2.6. Variables for the winners' page
You can enable the winners' page of your contest, sweepstakes or promotion to make the name(s) of the winner(s) public, as well as alternates. If you use the default settings and not your own custom HTML, you should not include variables.
Variables you can include on the winners' page:
- The variables for the landing page.
- The variables for the page after participating, except for those specified in the corresponding section.
- {{{ winners_landing_title }}}: title of the winners' page.
- {{{ winners_landing_header }}} and {{{ winners_landing_body }}}: custom description on the winners page.
- {{{ winners_landing_image_url }}}: main image on the winners page.
- {{{ winners_landing_url }}}: URL to the winners page. It can also be painted on the landing page and on the list of participants.
When choosing a winner, Cool Tabs allows you to select groups of winners, to distribute different prizes. For example, Winners prize A, Winners prize B... Therefore, when customizing the winners' page you must include the conditional {{{ #list_winners }}} on these groups of winners with which you can show the different groups of winners of your campaign or contest.
In addition, within {{{ #list_winners }}} you can use the {{{ winner_title }}} variable to paint all the winner groups with their corresponding title and the {{{ #winner_winners }}} iterator to include each winner of each winner group, along with the variables of the winners first and last names: {{{ first_name }}} {{{ last_name }}}.
{{#list_winners}}
<ol>{{#winner_winners}}
<li></li>
{{/winner_winners}}</ol>
{{/list_winners}}
Don't get confused {{{ winners_landing_title }}}, the title of the winners' page, with {{{ winner_title }}}, which allows you to show the title of each group of winners. This way, you can have several winners_tittle and, in each one, put a title and a description, with one or several winners.
We have winners!
{{#list_winners}}
<div>{{{winner_title}}}</div>
<ol>
{{#winner_winners}}
<li> {{{ first_name }}} {{{ last_name }}} </li>
{{/winner_winners}}
</ol>
{{/list_winners}}
You can also iterate the alternates:
We have alternates!
{{#list_winners}}
<ol>
{{#winner_alternates}}
<li> {{{ first_name }}} {{{ last_name }}} </li>
{{/winner_alternates}}
</ol>
{{/list_winners}}
Advanced customization for the winners' page with custom HTML.
2.7. Variables for the emails / SMS that are sent to users after participation.
The email-sending tool, included in the Cool Promo and Cool Promo White Label applications, allows you to configure the sending, manually or automatically, of emails to users who participate in your campaign.
You can configure the message to be sent using our advanced customization using variables. You can also include the custom HTML you need.
Variables that you can include in the emails or SMS you send to the participants:
- All those supported by the landing page, except those specified in the landing section of this tutorial.
- All those supported by the page after participating, except for those specified in the corresponding section of this tutorial.
- {{{ validate_email_url }}} or {{{ validate_email_link_tags }}}: in campaigns with email validation. It paints the URL that participants will have to click to validate their email. We will replace the variable with the actual link that participants will have to click to validate their email. Check the tutorial on How to enable user email validation after participating.
Example:
<p>Hi, {{{ first_name }}}!</p>
<h1 style="text-align: center;">Thanks for participating!</h1>
<h2 style="text-align: center;">You have achieved {{{ quizz_points }}} points.</h2>
<p>In addition, just for participating you have get 15% off your next purchase, with the code,
{{{ coupon_code }}}.</p>
Advanced customization with custom HTML for the email/SMS.
2.8. Variables for the coupon/code instructions page.
In coupon distribution campaigns, you have a section to customize the message that the participant will see when getting his/her coupon. This field is intended to explain to the user how to use the discount coupon, and what is the deadline for using it...
You can include the instructions for the discount coupon in the 'Coupons' section of the campaign editor.
You can also include the custom HTML you need.
Variables you can include on the discount coupon page:
- All the variables that have been detailed on the landing page section, except for those specified in the corresponding section.
- All the variables that have been detailed on the page after participating section, except those specified in the corresponding section.
Advanced customization with custom HTML for the coupon instructions page.
2.9. Variables for virtualization messages on social networks.
In Cool Tabs, you have the option to customize the messages that will be shown on social networks when the participant shares the campaign. These messages can be customized through our variables and are configured from the 'Go viral' section of the campaign editor.
You will be able to customize:
- The title and description will be displayed when the campaign is shared from the landing page and when it is shared from the thank you page on Facebook and other networks.
- Text that will be displayed when the campaign is shared from the landing page and when it is shared from the thank you page on Twitter.
In the same way, you can customize different messages to share on social networks, according to the result of a quiz by points or a personality test. These messages are configured in the 'Final screen' section, section 'Individual final screen management', of the campaign editor.
You will be able to customize:
- Title and title to be displayed when sharing the result obtained on Facebook and other networks.
- Text to be displayed when sharing the result obtained on Twitter.
to customize these messages, you can use the following variables:
- All the variables have been detailed in the landing page section.
- All the variables have been detailed on the page after participating section.
Example of personalized message on Twitter: "I've correctly answered {{{quizz_points}}} questions!".
2.10. Other pages.
2.10.1. Pages before and after the campaign starts.
When editing your campaign you have the option to set up the campaign start and end dates. This is the period in which it will be visible when you publish the campaign URL. And the start and end date of the participation, that is the period in which the users will be able to participate.
Usually, the start and end dates of the campaign match the participation dates. Although, sometimes, it is preferred to show content earlier and once the participations are closed, in order to create expectation.
It is possible to display different content before the campaign starts and after the campaign ends. You can even include custom HTML in these screens, in the 'Design' section of the campaign editor. However, it is not possible to use any of the variables.
2.10.2. Colors and fonts in custom CSS with variables.
You can use your own custom CSS (even with SASS) for your campaign and integrate certain variables in that CSS, in order to choose certain dynamic values. 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.
The variables you can use are:
- {{{ font_family }}}: type font
- {{{ primary_color }}}: campaign's main color
- {{{ secondary_color }}}: secondary color
- {{{ font_color }}}: font color
- {{{ background_color }}}: campaign's background color
3. Other specifications.
Advanced customization is only available in campaigns with Cool Promo and Cool Promo White Label, included in the Gold and Diamond plans respectively.
You can edit all the screens of your campaign from the campaign preview since it allows you to modify the HTML and CSS, save the changes, and see the result directly.
If you have any questions or need help, you can contact us at help@cool-tabs.com.
4. Related content.
Advanced customization with custom HTML.
Comments
0 comments
Please sign in to leave a comment.