Custom Cookie Banner


A step-by-step guide to creating you own custom cookie banner with TRUENDO. This guide is build the skeleton structure needed to implement TRUENDO. The rest of the styling must be done by the user.

Step 1

First you need to create a cookie banner structure in your website.

This structure must include: - A container in which all elements are included - Text explaining what the user is accepting. - A button for the “Options” - A button for the “Accept”

A complete structure in HTML can look like this:

<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 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">Accept</button> <!-- Accept Button -->
</div>
Step 2

Now we need to add the relevant attributes to the container and the buttons.

The container must have the following attributes:

id="cc-banner" and style="display:none;"

Note:The style attribute can also be added to your CSS file by calling it though the ID as follows:

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

For the buttons we must add and onclick attribute each.

For the options button: onclick="javascript:Truendo.openCookieSettings()"

Fort the accept button: onclick="javascript:Truendo.acceptAllCookies()"

When all is done in html it can look like this:

<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 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.acceptAllCookies()">Accept</button> <!-- Accept Button -->
</div>

Important Recommendation:You should put the whole structure within the body tag at place that is shared by all your pages. For many websites this can be below the footer. If you do not share any code with your subpages you have to add the whole structure on every page.

Step 3

All that is left to do now is to turn on Custom Banner in your account.

To do that you have to log in to you Account. Make sure the correct domain is selected in the top left corner. Then go to Domain > Integration and click on the Banner tab. Under Banner Type select Custom Banner and you are done!

You can now proceed to style your banner however you see fit.