2. Advanced customization on each page.
2.3. Page after participation.
2.4. Public participation page.
2.5. Public page of individual participation.
2.7. Emails and SMS sent after participation.
2.8. Coupon and code instructions 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 Diamond plan 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 customization and the type of information you can display.
Keep in mind that:
1) 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.
2) The use of most variables only makes sense if you include custom HTML, not with the default HTML.
3) 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 display the information you need. Some examples of what we mean by different formats:
{{{ title }}}: displays plain text.x_cool_tabs_participate_button: this variable refers to a link, so you will have to use it in an<a></a>tag and it will be included as a class.{{{ quizz_responses_html }}}: displays information with basic HTML.{{{ promotion_image }}}: this variable refers to an image, so you must use it in an<img>tag as the value of thesrcattribute.{{{ participate_link }}}: displays a link with full HTML.{{{ participate_again_url }}}: this variable refers to a link, so you have to use it in an<a></a>tag as the value of thehrefattribute.{{{ voting_form }}}: displays information with HTML that simulates a button.
2. Advanced customization on each page.
Below we detail all the variables you can include, depending on the pages of the campaign that support our advanced customization.
Download the complete list of variables.
2.1. Variables for the landing page.
By default, in the campaign editor you can customize the design without needing to include variables, by adding a title, a description, a main image, and a background image. You can also show a link to the legal bases or a share button on social networks.
Therefore, using the variables listed below only makes sense if you customize the landing page using your own custom HTML (only available for the Diamond plan).
The variables you can include on the landing page are:
x_cool_tabs_participate_button: link to the 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 title.
{{{ description }}}: campaign description.
{{{ promotion_image }}}: URL of the campaign's main image. This image is automatically resized to a maximum of 810px wide on upload (if the original is wider).
{{{ promotion_image_original_url }}}: original (unprocessed) URL of the campaign's main image, without the width limitation.
{{{ language_selector }}}: links to language selection. Only for campaigns set up in multiple languages. Note that this will not apply to the email sent to the participant or to the coupon 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. Note that, apart from the landing page, this class can only be used on the participant list page. Does not apply to the participation form.
x_cool_tabs_legal_options_button: link to view 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 the public global quiz results page. Does not apply to the participation 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.
{{{ campaign_header }}}: to include a header on all pages of a campaign.
Landing page customization also allows you to include other variables related to viralization (only usable in custom HTML). You can use the following variables to show direct links to sharing options. Inside the variable you can include any content you need (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 page 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 elements that, by design or relevance, should appear in the participation form (indicate which questions remain unanswered, show the participant's name...).
As with the landing page, the use of variables in the participation form should only be used with your own HTML (only available for the Diamond plan).
Variables you can include in the form:
All the variables supported by the landing page, except for those specified in that section.
{{{ cool_tabs_form }}}: to display the quiz and the participation form.
In addition, you can include a conditional variable to display content according to the device type:
{{#mobile?}}
Content to display on mobile.
{{/mobile?}}
{{#desktop?}}
Content to display on desktop.
{{/desktop?}}
Note that in addition to the form, this conditional variable 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 this screen with whatever content you want to show the user (text, image, or HTML).
It is also common to include variables on this screen to display certain information, such as the answers the user gave in the data form (name, surname), their quiz answers, the number of points obtained, etc.
Variables you can include on the page after participation:
In addition, you can include the following:
Variables related to the campaign:
{{{ thanks_message }}}: the message after participation that each user will see. Where you include this variable, the general message will appear for all participants, or — depending on the campaign type — the message that corresponds to the participant based on quiz points, the matching personality test category, or the Instant Win message for winners. This variable does not apply to the participant list or to the email sent after participation.
{{{ participate_again_url }}}: URL to participate again in the campaign. Does not apply to the email.
{{{ participation_link }}}: custom URL that the participant must share to spread the campaign virally. Does not apply to the individual participant page.
{{{ promo_logout_url }}}: URL to log out. Only applies on the page after participation.
x_cool_tabs_share_button_participation: class to include in the campaign share link. It will open a popup with all sharing options and the user's own URL. This class also works for the individual participant page. Does not apply to any other page.
{{{ fb_share_wall_button }}}: link to share on Facebook. Can also be included on the individual participant page. Does not apply to any other page.
{{{ whatsapp_share_wall_button }}}: link to share on WhatsApp. Can also be included on the individual participant page. Does not apply to any other page.
{{{ final_image_url }}}: displays the URL of the final image (at original size) assigned to the participant.
Variables related to data form answers*:
{{{ first_name }}}: participant's first 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 used for participation.
* All the above variables also apply to the winners' page.
Variables related to quiz answers:
{{{ answer }}}: displays the user's answer to the question they were asked to answer in the form.
{{{ answer_quiz_1 }}}: the answer to each quiz question given by the user. To display the answer to question 1 use {{{ answer_quiz_1 }}}, for question 2 use {{{ answer_quiz_2 }}}, and so on.
{{{ answer_quiz_img_url_1 }}}, {{{ answer_quiz_img_url_2 }}}: URL of the image chosen by the user as the answer to each quiz question.
{{{ image }}}: URL of the photo or image uploaded by the participant in a photo contest. Applies also to the winners' page.
{{{ quiz_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 image-upload questions in the quiz/custom form.
{{{ quizz_responses_html }}}: all quiz questions with the user's answers (with basic HTML).
{{{ video_html }}}: 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 }}}: screenshot of the user's video. Applies also to the winners' page.
{{{ question_quiz_1 }}}, {{{ question_quiz_2 }}}: text of each question in the custom quiz/form. For example, if a quiz has 10 questions and a user answers the last 5, these variables will display the questions the user answered, not the first 5.
Variables related to campaigns with coupons/codes:
{{{ coupon_code }}}: code or coupon assigned to the participant in a code/coupon distribution campaign.
{{{ coupon_download_url }}}: URL to download the PDF coupon delivered to the participant. Note that it does not apply to the coupon instructions page or to the email sent after participation.
{{{ final_file_download_url }}}: URL of the file assigned to the participant. You must assign a file to download after participation — either a generic one, one associated with an Instant Win, or one associated with a final thank-you page.
{{{ qr_code }}}: QR code of the coupon assigned to the participant in a code/coupon distribution campaign. Applies also to the winners' page.
{{{ validated_coupon_code }}}: code or coupon validated by the user when participating in a code/coupon validation campaign. Applies also to the winners' page.
In addition, you can use the coupon conditional to show a message informing the participant whether a coupon has been assigned to them or not:
The conditional used to show content when a coupon has been assigned:
{{#has_coupon?}}
Your coupon is: {{{coupon_code}}}
{{/has_coupon?}}
The conditional used to show content when no coupon has been assigned:
{{^has_coupon?}}
You do not have a coupon
{{/has_coupon?}}
The complete scenario with both conditionals:
{{#has_coupon?}}
Your coupon is: {{{coupon_code}}}
{{/has_coupon?}}
{{^has_coupon?}}
You do not have a coupon
{{/has_coupon?}}
Remember that conditionals and iterators always use 2 curly braces. Variables use 3, but can use 2 as long as the content inside does NOT contain 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
{{{ participation_id }}}: unique user identifier. 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.
{{{ participations_total_available }}}: maximum number of participations configured by the admin in the campaign.
{{{ remaining_participations_count }}}: number of participations still available in the campaign. This is the result of subtracting current participations from the configured maximum.
Variables related to points obtained:
{{{ game_points }}}: points obtained through gamification (Memory Cards, Matching Cards...). Applies also to the winners' page.
{{{ participate_points }}}: points earned just for participating. Only applies if you have set up the viral ranking and assigned points for participating. Applies also to the winners' page.
{{{ referred_count }}}: number of referred users recruited by the participant.
{{{ referred_points }}}: points earned through referrals. Only applies if you have set up the viral ranking and assigned points for referrals.
{{{ quizz_points }}}: points obtained in the quiz. Applies also to the winners' page.
{{{ votes_count }}}: number of votes received. Applies also to the winners' page.
{{{ votes_points }}}: points obtained for the votes received in one of their participations.
{{{ total_points }}}: total points for a given participation (includes: quizz_points + game_points + participate_points). Applies also to the winners' page.
{{{ global_points }}}: global points for a user — the score you should use by default. If you have only allowed one participation per user, it includes: total_points + referred_points. With multi-participation, it includes the sum of all total_points across participations + referred_points. Applies also to the winners' page.
{{{ quizz_results }}}: tag to display the results of a quiz. Does not apply to the email sent after participation or to the coupon page delivered to the participant.
Conditional variable to display a message when the user has obtained points in a quiz:
{{#quizz_points}}
You have {{{quizz_points}}} points.
{{/quizz_points}}
Thanks to these variables you can display a message such as:
You have a total of {{{ global_points }}} points in the campaign. You just earned {{{ participate_points }}} points for participating. You have participated {{{ participations_by_same_user_count }}} times and have recruited {{{ referred_count }}} referrals, which have given you {{{ referred_points }}} points.
For more information, check the tutorial on variables related to points.
Advanced customization for the page after participation with custom HTML.
2.4. Variables for the public participation page.
In the campaign it is possible to display a public page with the list of users who have participated. You can enable this option from the campaign editor, in the 'Entries list' tab of the 'Participations' section.
This page can be customized to include certain elements such as a 'Vote' button, the number of points obtained for votes received, or a participant counter.
Note that the use of variables on this page is intended for custom HTML, so if you use the default configuration, you should not use them.
Variables you can include on the participant list page:
All those supported by the page after participation, except for those specified in that section.
When customizing this page, you must include the iterator {{#list_participations}} to display the campaign's participants.
<ol>{{#list_participations}}
<li>
</li>
{{/list_participations}}</ol>{{{ paginator }}}: paginator to limit the number of participants per page. Can be modified from the campaign editor, in the 'Participations' section > 'Entries list' tab.
{{{ participation_list_header }}}: custom header for the participation list.
{{{ quizz_points_ranking_position }}}: position of the participant according to total points obtained.
{{{ voting_form }}}: voting button. The voting option must be activated in the campaign editor. Applies also to the individual participant page.
Advanced customization for the participant list page with custom HTML.
2.5. Variables for the public page of individual participation.
The individual participant page is accessed from the participant list via 'View details'. Here the participant can get information about their participation: total points, number of participations, referrals recruited, points earned for them, etc.
Note that the use of variables on this page is intended for custom HTML, so if you use the default configuration, you should not use them.
Variables you can include on the individual participation page:
All the variables supported by the page after participation.
Some variables from the participant list page, as detailed in that section.
Advanced customization for the individual participant page with custom HTML.
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) and any alternates public. 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 page after participation, except for those specified in that 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. Can also be used on the landing page and on the participant list.
When selecting winners, Cool Tabs lets you create groups of winners to distribute different prizes (e.g. Winners prize A, Winners prize B...). When customizing the winners' page you must include the iterator {{#list_winners}} to display the different winner groups.
Inside {{#list_winners}} you can use the variable {{{ winner_title }}} to display each group with its corresponding title, and the iterator {{#winner_winners}} to list each winner within each group, along with their name variables: {{{ first_name }}} {{{ last_name }}}.
{{#list_winners}}
<ol>{{#winner_winners}}
<li></li>
{{/winner_winners}}</ol>
{{/list_winners}}
Don't confuse {{{ winners_landing_title }}}, the title of the winners' page, with {{{ winner_title }}}, which displays the title of each winner group. You can have several winner groups, each with a title, a description, and one or more winners.
Example:
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 display alternates using the {{#winner_alternates}} iterator.
Example:
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 emails and SMS sent after participation.
The email-sending tool, included in the Cool Promo and Cool Promo Diamond plan applications, allows you to configure the sending, manually or automatically, of emails to users who participate in your campaign.
You can configure the message using our advanced customization variables. You can also include any custom HTML you need.
Variables you can include in the emails or SMS sent to participants:
All those supported by the landing page, except for those specified in that section.
All those supported by the page after participation, except for those specified in that section.
{{{ validate_email_url }}} or {{{ validate_email_link_tags }}}: for campaigns with email validation. Displays the URL that participants must click to validate their email. Check the tutorial 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 scored {{{ quizz_points }}} points.</h2>
<p>Plus, just for participating you get 15% off your next purchase
with the code {{{ coupon_code }}}.</p>
Advanced customization with custom HTML for the email/SMS.
2.7.1. Validation email sent to the participant.
The participant will receive an email informing them that they must verify their email address for their participation to be considered valid. This email has a default message configured.
Customizing the email
It is important that the email you configure includes the variable {{{ validate_email_url }}} or {{{ validate_email_link_tags }}}.
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 they receive their coupon. This field is intended for explaining to the user how to use their discount coupon, the expiry date, etc.
You can add the coupon instructions in the 'Coupons' section of the campaign editor. You can also include any custom HTML you need.
Variables you can include on the coupon instructions page:
All those supported by the landing page, except for those specified in that section.
All those supported by the page after participation, except for those specified in that section.
Advanced customization with custom HTML for the coupon instructions page.
2.9. Variables for viralization messages on social networks.
Viralization messages are those displayed when a participant shares the campaign or their participation. These messages support customization through our variables and are configured from the 'Go viral' section of the campaign editor. You can customize:
The title and description displayed when the campaign is shared from the landing page and from the thank-you page on Facebook and other networks.
The text displayed when the campaign is shared from the landing page and from the thank-you page on Twitter.
In the same way, you can customize different messages for each result of a quiz or personality test. These messages are configured in the 'Final screen' section, under 'Individual final screen management', in the campaign editor. You can customize:
The title and description to display when sharing the result on Facebook and other networks.
The text to display when sharing the result on Twitter.
The variables supported in viralization messages are:
Example of a custom message on Twitter: "I got {{{quizz_points}}} questions right in the #marketingfreaks quiz!"
2.10. Other pages.
2.10.1. Pages before and after the campaign starts.
When editing your campaign you have the option to configure the campaign start and end dates (the period during which it will be visible when published) and the participation start and end dates (the period during which users can participate).
Usually the campaign and participation dates coincide. However, sometimes it is preferable to show the campaign before participation opens or to keep it visible after participation closes, in order to build anticipation.
It is possible to display different content before the campaign starts and after it 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 to use dynamic values. For example, you can use the campaign color picker to select the font color and apply it to all body fonts in the CSS.
The variables you can use are:
- {{{ font_family }}}: typeface
- {{{ primary_color }}}: campaign's main color
- {{{ secondary_color }}}: secondary color
- {{{ font_color }}}: font color
- {{{ background_color }}}: campaign's background color
How to configure custom CSS for a campaign.
3. Other specifications.
Advanced customization is only available in the Gold and Diamond plans.
You can edit all the screens of your campaign from the campaign preview, which lets you modify the HTML and CSS, save the changes, and see the result directly.
If you have any questions, contact us at help@cool-tabs.com.
4. Related content.
Download the complete list of variables.
Advanced customization with custom HTML.
Comments
0 comments
Please sign in to leave a comment.