3. How to configure the header.
3.1. Customization with variables.
3.2. HTML for the participant list page.
1. Introduction.
In Cool Tabs campaigns, created with the Cool Promo and Cool Promo White Label apps, you can enable a public participation page.
This page has a header with a default design, that can be customized. In this tutorial, we explain to you how to set up and customize it.
2. Header with the default design.
This design includes the resized campaign's main image and the campaign's description, as well as the 'Share' and 'Participate' buttons. It also includes details of the campaign time zone and the date until which you can participate and/or vote.
The design will change slightly, depending on the design version you have chosen in your campaign edition. The classic design version is only available for older campaigns.
Below, you can see an example of a public participation page with the default header (classic version).
3. How to configure the header.
You have to enable this option in the 'Entries list' tab of the 'Participation' section.
To include your personalized header, go to the 'Design' section, and 'Content' tab, of the campaign edition. Once there, check the 'Enable custom header for the entries page' checkbox.
The default elements will no longer appear when using this custom field, allowing you to include your custom HTML.
3.1. Customization with variables.
This page supports advanced customization with variables. Check out the tutorial Advanced personalization for your campaign with variables to find out which ones are supported by the public participation page.
We anticipate that the variables that you can include are:
- The variables of the page after participating, except for those specified in the tutorial.
- The variables of the list of participants.
If you want to keep the 'Share' and 'Participate' buttons, you can include them using CSS classes.
3.2. Custom HTML for the public participation page.
The use of variables in the participant list page is intended for custom HTML, so if you use the default configuration, don't use them.
If you want to include your custom HTML, check out the tutorial Advanced customization with custom HTML, where we show you an HMTL template for the participant list page.
The HTML included in our header is a map image linked to “Share” and “Participate” when you click on that text:
<div id="canvas" style="position: relative; width: 579px; margin: 0px auto; height: 174px;"><img id="bgImage" style="display: block; position: relative; z-index: 1;" src="https://d1gfwauryv0c0u.cloudfront.net/assets/pictures/e4e118b0c99711e58a08fb0cd9262203/content_encabezado-votos.png"><a style="position: absolute; width: 81px; height: 33px; display: block; z-index: 10; top: 114px; left: 42px; text-indent: -9999em; border: none; background: url("https://cooltabs.github.io/image-mapify/images/transparent.gif");" href="#" class="x_cool_tabs_share_button_participation" target="_blank"></a><a style="position: absolute; width: 84px; height: 25px; display: block; z-index: 10; top: 147px; left: 39px; text-indent: -9999em; border: none; background: url("https://cooltabs.github.io/image-mapify/images/transparent.gif");" href="#" class="x_cool_tabs_participate_button" target="_blank"></a></div>
;){kind=link}
4. Other specifications.
If you have any questions, contact us at help@cool-tabs.com
Comments
0 comments
Please sign in to leave a comment.