print

Setting Up a Custom Cookie Banner with TRUENDO CMP

Introduction#

In addition to the preset banner styles, the TRUENDO Consent Management Platform (CMP) allows users to create and implement a custom cookie banner. This guide provides a step-by-step process to build the necessary structure to integrate TRUENDO CMP into your custom banner. The actual styling and design are up to you, enabling full customization to match your website's branding.

1. Prerequisites#

Before you begin, ensure you have the following:

  • Access to Your Website's Code: Ability to modify HTML and CSS files.
  • TRUENDO CMP Integrated: The TRUENDO CMP script should already be implemented on your website.

First, you need to create the basic structure of your custom cookie banner within your website's HTML code. This structure should include the following elements:

  • Container: A <div> or <section> that wraps all banner elements.
  • Text Explanation: A message explaining what the user is accepting.

  • Buttons:

    • Options Button: Allows users to manage their cookie preferences.
    • Necessary Only Button: Lets users accept only the necessary cookies.
    • Accept Button: Enables users to accept all cookies.

Example HTML Structure:

<div> <!-- Cookie Banner Container -->
  <!-- Text -->
  <h3>Your Privacy</h3>
  <p>
    We use cookies to improve your experience on our site and to show you personalized ads. Click [ACCEPT] to accept
    all cookies, [NECESSARY ONLY] to accept only the necessary cookies, or [MY OPTIONS] to find out more about the use of cookies and to change your cookie preferences.
  </p>
  <!-- Text End -->
  <button type="button">My Options</button> <!-- Options Button -->
  <button type="button">Necessary Only</button> <!-- Necessary Only Button -->
  <button type="button">Accept</button> <!-- Accept Button -->
</div>

3. Step 2: Adding Attributes to the Container and Buttons#

Now, you need to add specific attributes to the container and buttons to enable functionality with TRUENDO CMP.

A. Modifying the Container

Add the following attributes to the container <div>:

  • id="cc-banner"
  • style="display:none;" (This hides the banner initially until it's triggered by TRUENDO.)

Example:

<div id="cc-banner" style="display:none;"> <!-- Cookie Banner Container -->
  <!-- Content here -->
</div>

Note: The style attribute can also be moved to your CSS file for better maintainability:

#cc-banner {
  position: fixed; / Strongly recommended /
  display: none;
}

B. Adding OnClick Attributes to the Buttons

Assign JavaScript functions provided by TRUENDO CMP to each button using the onclick attribute.

  • Options Button:

    <button type="button" onclick="javascript:Truendo.openCookieSettings()">My Options</button>

  • Necessary Only Button:

    <button type="button" onclick="javascript:Truendo.acceptNecessaryCookiesOnly()">Necessary Only</button>

  • Accept Button:

    <button type="button" onclick="javascript:Truendo.acceptAllCookies()">Accept</button>

Complete HTML Structure with Attributes:

<div id="cc-banner" style="display:none;"> <!-- Cookie Banner Container -->
  <!-- Text -->
  <h3>Your Privacy</h3>
  <p>
    We use cookies to improve your experience on our site and to show you personalized ads. Click [ACCEPT] to accept
    all cookies, [NECESSARY ONLY] to accept only the necessary cookies, or [MY OPTIONS] to find out more about the use of cookies and to change your cookie preferences.
  </p>
  <!-- Text End -->
  <button type="button" onclick="javascript:Truendo.openCookieSettings()">My Options</button> <!-- Options Button -->
  <button type="button" onclick="javascript:Truendo.acceptNecessaryCookiesOnly()">Necessary Only</button> <!-- Necessary Only Button -->
  <button type="button" onclick="javascript:Truendo.acceptAllCookies()">Accept</button> <!-- Accept Button -->
</div>

4. Step 3: Enabling Custom Banner in TRUENDO Console#

To activate your custom banner, you need to enable the Custom Banner option in your TRUENDO account.

Steps:

  1. Log in to the TRUENDO Console: https://console.truendo.com/
  2. Select Your Website: Ensure the correct domain is selected in the dropdown at the top of the main console window.

  3. Navigate to Integration Settings:

    • Go to the Integration section from the left-hand menu.
    • Click on the Banner tab.

  4. Enable Custom Banner:

    • Under Banner Type, select Custom Banner.
  5. Save Changes: Click Save to apply the new settings.

Example Screenshot:


5. Styling Your Custom Banner#

Now that your custom banner is set up and enabled, you can proceed to style it according to your website's design guidelines. Use CSS to customize:

  • Layout and Positioning: Ensure the banner is displayed prominently without obstructing important content.
  • Colors and Fonts: Match your site's color scheme and typography.
  • Responsive Design: Ensure the banner looks good on different devices and screen sizes.

Example CSS:

#cc-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f8f8f8;
  padding: 20px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

#cc-banner h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

#cc-banner p {
  font-size: 1em;
  margin-bottom: 20px;
}

#cc-banner button {
  margin-right: 10px;
  padding: 10px 20px;
  font-size: 1em;
}

6. Important Recommendations#

  • Consistency: Ensure the banner appears uniformly across all pages.
  • Accessibility: Make sure the banner is accessible to all users, including those using screen readers.
  • Testing: Thoroughly test the banner to ensure all buttons function correctly and the banner displays as intended on various devices and browsers.

7. Conclusion#

By following this guide, you have successfully set up a custom cookie banner integrated with TRUENDO CMP. This allows you to have full control over the banner's appearance while maintaining compliance with data protection regulations. Remember to keep user experience in mind and make the banner informative and easy to interact with.

8. Support and Resources#

End of Guide

If you have any further questions or require assistance with specific configurations, please don't hesitate to reach out to TRUENDO support or consult the resources provided.

×