How to design your campaign with Cool Promo or Cool Promo White Label

1. Introduction.

2. Step by step.

2.1. Basic data.

2.2. Images and videos.

2.3. Styles.

2.4. Content.

2.5. Advanced.

3. Other specifications.

4. Related content.

1. Introduction.

Campaigns created with the Cool Promo and Cool Promo White Label applications, included in the Gold and Diamond plans, respectively, allow design customization, so you can adapt them to your look & feel.

The design is configured in the 'Design' section of the campaign editor.

2. Step by step.

2.1. Basic data.

• Title for the campaign: This is the name of your campaign and will be displayed publicly on the landing page. You can include it in this field, in the description field, or prepare an image that already includes it.
• Campaign description: here you can include a text describing what the campaign, contest, or promotion consists of, give the user instructions on how to participate, and announce the prize to be raffled. It should be sufficiently explanatory for users to understand how the campaign works. Thanks to our editor, you will be able to style (font colours, size, etc.) It is not obligatory. By default, we will give style to the texts you include, so that they look good. In addition, you can add images or your own HTML.

2.2. Images and video.

In this tab, you will find options to customize your campaign with images and/or video.

• Main image: this is the image that will be displayed on the landing page and will be visible to all users. The optimal size is 810 px wide by unlimited height. Keep in mind that the higher the image is, the more scrolling users will have to do.
• Background image: as its name indicates, it is the image that will be shown in the background of your campaign. It will appear on all the pages. The size should always be 1920 x 1080 px. It is not a mandatory image, but we recommend you to include it. If your image does not cover the width of the screen, choose the 'Full Screen' mode in the 'Position' selector.
• Background image for mobile devices: this is the background image that will be displayed on mobile. Generally, it will be the same as the background image.
• Campaign video: You can include the URL of a video you want to use to present your campaign in this field. It can be a URL from YouTube, Vimeo, Flickr, etc. This material is optional, but if you include a video in your campaign, keep in mind that it is the first thing that will be shown unless you modify its placement using your own CSS.

2.3. Styles.

In the "Styles" tab you will be able to set the colors of your campaign and decide the font of the texts.

1) Primary color: this is the color that will be used as the main color. It is applied to the buttons/response selectors (when the user hovers over the button, it becomes the color of the text), titles, and badge background color.

2) Secondary color: it is the background color of the main section of each page in the campaign.

• Semitransparency: in campaigns with background image, it is possible to apply semi-transparency to the secondary color. To apply semi-transparency, click on the “Secondary color” field where you have typed the color code you want. A color selector will be displayed and to the right of it two bars. The right one determines the level of transparency you want to give to the secondary color.

3) Background color: this is the background color of the page. It covers the whole screen, so if you do not include a background image in your campaign, you can add a plain background color. It is also the color that is applied to the texts of the answer buttons/selectors (when the participant hovers over the answer choices, it changes to the background color).

4) Font color: this is the color of the non-title texts.

5) Font family: if you need to include a specific font that is missing, write to us at help@cool-tabs.com.

For a good color scheme, we recommend using either a dark primary color with soft secondary and background colors, and dark text color. Or, soft primary color with dark secondary and background colors and soft text color.

In the quiz error message and feedback message after answering a question, the colors are fixed. To change the color of error messages in quizzes, you should request it to help@cool-tabs.com, indicating #/rgb of the desired color.

Below, you can see an example of a campaign with a background image and transparency.

2.3.1. Styles for campaigns with classic design option (option available only in old campaigns).

1) Primary color: this is the color that will be used as the main color in the campaign. It is applied for answer buttons/selectors, titles, and badge background color.

2) Secondary color: as its name indicates, it is the color that will be used as a secondary color. In this design, the secondary color is applied for very specific things, for example, for the color of the steps of questions that the participant answers.

3) Background color: this is the background color of the page. It covers the entire screen, so if you are going to include a background image, you can set a plain background color. It is also the color that is applied to the texts of the answer buttons/selectors once the participant marks an answer when answering.

• Semi-transparency: in campaigns with background image, it is possible to apply semi-transparency to the secondary color. To apply semi-transparency, click on the “Background color” field where you have typed the color code you want. A color selector will be displayed and to the right of it two bars. The right one determines the level of transparency you want to give to the background color.

4) Font color: is the color of the texts (not the titles) and of the answer selectors when the participant does not select an answer.

For a good color scheme, we recommend using either a dark primary color with soft background color and dark text color. Or, soft primary color with dark background color and soft text color.

5) Font family: if you need to include a specific font that is missing, write to us at help@cool-tabs.com.

Below, you can see an example of a campaign with a classic design and background image, in which the background color is set to semi-transparent.

2.4. Content.

• Enable custom header for the entry form: you can activate a header and customize it. This will be the image that appears at the top of the form, as a banner, and will occupy the entire width of the page. It must be 810 px wide.

• Enable custom header for the entry form (personal data page in quizzes): you can include text, images, or video that provides some information to the users about what they should fill in next. This image appears below the header image of the entry form and above the form. Regardless of whether you choose to include it or not, the form header image will still appear at the top as a banner. 
• Enable custom header for the entries page: you can add text, images, or HTML shown in the header of the participants' list and the individual participant.
• Show a different creative before the campaign begins: if you publish the campaign before the campaign start date, by default the message "There are no active promotions at the moment" will appear. This section allows you to configure and display a different message, which generates some expectations about your campaign.
• Show different content after the campaign ends: once the campaign ends if it is still published, by default a box with the text "There are no active promotions at the moment" is shown. By activating this field, you can replace that box with the image or text you want, for example, to announce the date that the winners will be published or when the next contest will start.
• Display custom footer in the campaign: you have the option to set up a footer on all pages. You can include text, images, or HTML.

Below, you can see an example where a logo has been included as a campaign footer.

2.5. Advanced.

• Use your own complete HTML for the landing page (only for White Label campaigns): the main page and the participation form contain several default elements that you can modify or hide.
• Use your own complete HTML for the registration page (only for White Label campaigns)
• Use your own complete HTML for the winners' page (only for White Label campaigns)

3. Other specifications.

If you have any doubts about the design configuration, please contact us at help@cool-tabs.com.

4. Related Content.

Cool Promo White Label: Create Your White Label Campaign >>