Configuring your cookie warning

And a preview of our templates and custom CSS possibilities

Aert

Aert

Junior Developer & Support

Categories

Most Popular Articles

Subscribe to our newsletter

    For EU Subscribers | Privacy Statement
    For USA Subcribers | Privacy Statement

  • This field is for validation purposes and should be left unchanged.

Update

Starting with Release 3.0

Our Cookie Banner settings page has changed. You will now see the following page. Hover over the banner name to edit your cookie banner.

Step by step. How to configure your cookie warning.

Would you rather see the result? Check our Template preview.

We will cover all steps from top to bottom, feel free to skip if most of the steps are clear. The steps can be done in random order.

  1. Use geolocation Only available for premium, when enabled, the Cookie Consent banner only shows in countries with a Cookie Law.
  2. Enable A/B testing Only available for premium, select A/B testing if you are curious to see which style of banner performs best, based on statistics available under, what else, ‘statistics’. Try it out with different templates or custom css and see which banner converts most users in giving consent.
    1. Cookie warning variations. Here you style the different variations and delete or add where necessary.
    2. Duration in days of the A/B testing period. Pick the duration of your testing period and let it automatically switch to the best performing banner.
  3. Popup position – Lay Out Place your banner anywhere on the screen. Based on your website’s lay-out, be careful not to block any Call-2-Action Buttons or important text with the banner. As it will float over your website. If you don’t want the banner to float, pick “Push Down” to add the banner on top. Be careful not to push your Call-2-Action below the fold. (the bottom of the visible page).
  4. Style – Templates The banner comes in different templates, with different features per template. Play with the possibilities, or have a look at our showcase page.

  5. Cookie Message Add your own Cookie Message text. Hyperlinks, Images even .GIFs. But we suggest keeping it clear and simple to comply with GDPR and the CaCPA. Tell them why you use cookies and where they can read your policy.
  6. Cookie Banner text There are two different possibilities with the Cookie Banner text. Either you selected categories, or you didn’t select categories and you prefer a Accept/Decline banner. For most purposes, we suggest using the latter. A more simple, clear approach, which seems to convert the most in combination with a edgeless banner in the center ;-).

    1. Categories. When using categories, there is a minimum of two categories and 1 button to configure. The lowest en highest category of cookies. For example. Functional and Marketing, and the “Save Preferences” text. You can change it all, but keep it simple and clear to comply to GDPR and CaCPA. For example: Nothing & Everything and “Continue” as a button will work if the text above adds significant context to these words.

    2. No Categories. The Accept & Decline are used by default, but you are free to change these words.

  7. Settings text – Hiding Settings You need a fast, obvious and clear way to adjust your cookie preference on any website. As a default we have added a revoke button where your consent banner is placed. You can change the text on this button or remove it all together. The cookie preferences can alway be adjusted via a link on your cookie policy, which cannot be removed.
  8. Pop-up Colors With our WYSIWYG editor, where the banner changes in real-time, you can easily see which colors work for your. By default we have chosen the color you selected in the wizard. You can change the background, button colors, borders and more. If you want to go any further, please enable Custom CSS. Tip: Change your text color in the text editor. Also useful for different fonts and font-sizes.
  9. Custom CSS Use the Custom CSS option to finetune your banner if necessary..cc-message{adding CSS will affect your Message on the banner}
    .cc-dismiss{adding CSS will affect your Dismiss Button}
    .cc-allow {adding CSS will affect your Allow Button}
    .cc-revoke {adding CSS will affect your Revoke Button}
    .cc-window {adding CSS will affect your Banner Window}

    CSS Examples:

    border-radius: –px;
    background: #——;
    background: url;
    font-family: name;
    font-size: –px;
    border: –px solid #—–;
    padding: –px;
    width: –px;
    height: –px;

    Have fun!

© Copyright - Complianz 2019