Integration of Cookiebot in a Weebly App

Weebly App developers can make their app cookie compliant with the European Union's ePR (EU ePrivacy directive 2009/136/EC) and GDPR (EU General Data Protection Regulation) by adopting Cookiebot's tag markup mechanism as described below. 

When a Weebly website installs the Cookiebot App, Cookiebot will automatically collect and manage consents for end users. To enable Cookiebot to control which cookies are set on the user's browser in conformity with the individual user's consent, any html tag that is setting cookies needs to be marked up.

If the Cookiebot App is not installed on a Weebly site, a helper object ensures that your app will execute correctly when tags are marked up for cookie consent. This way you only have to maintain a single version of your app source code.

Marking up your script tags

Cookiebot exposes an Javascript API for advanced usage, but in many cases you can make your app compliant by applying a few modifications to any existing tags that are setting cookies:

Apply the attribute "data-cookieconsent" to the tag. Set the value to one or more (comma-separated) cookie categories: "preferences", "statistics" and "marketing", in accordance with the types of cookies being set by the tag. Finally change the attribute "type" from "text/javascript" to "text/plain".

Example: An embedded script tag in your app loads a script which is setting marketing cookies.

Original script tag:

<script type="text/javascript" src="https://test.com/script.js"></script>

Modified tag (changes highlighted in bold):

<script type="text/plain" src="https://test.com/script.js" data-cookieconsent="marketing"></script>

The same approach is used on inline script tags, example:

<script type="text/plain" data-cookieconsent="marketing">
    //inline code here is executed when the visitor consents to marketing-cookies
</script>

Marking up content tags

Cookie setting content tags (iframe, img, embed, video, audio, picture, source) use similar logic, but instead of changing the tag type, the "src"-attribute must be re-named to "data-src".

Example: Markup an embedded YouTube video in your app.

Original tag:

<iframe src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0"></iframe>

Modified tag (changes highlighted in bold):

<iframe data-src="https://www.youtube.com/embed/xxxxxxxxxxx" data-cookieconsent="marketing" frameborder="0"></iframe>

Placeholder messages to the end user

If a website user has not consented to a certain type of cookies, content using these types of cookies will not be loaded. For example, if a user does not consent to marketing cookies, the YouTube iframe above will not load.

To enhance the user experience in such case, you can display a placeholder message to the user by marking up a placeholder tag with one of the Cookiebot CSS classes:

<div class="cookieconsent-optin-marketing">This content is only visible when the visitor has consented to marketing cookies.</div>
<div class="cookieconsent-optout-marketing">Please <a href="javascript: Cookiebot.renew()">accept marketing cookies</a> to view this content.</div>

Cookiebot will automatically display and hide the relevant placeholders in accordance with the individual user's consent state.

Event handling

The Cookiebot JavaScript API triggers a number of events which your app can hook in to.

Example: Trigger marketing cookies when the visitor opts in to marketing cookies. 

<script type="text/javascript">
window.addEventListener('CookiebotOnAccept', function (e) {
   if (Cookiebot.consent.marketing)
   {
      //Execute code that sets marketing cookies
   }
}, false);
</script>

For a complete list of event handlers, please see the section 'Event handling' in the API documentation.

The Cookiebot App Helper object

When you have made the above modifications in your app, your app is dependant on that the Cookiebot App is also installed. To remove this dependency and to make your app work as usual when Cookiebot is not installed, you can include the following script snippet in the content rendered by your app:

<script type="text/javascript">
if (typeof (CookiebotHelper) === 'undefined') {
   var CookiebotHelper = {};
   var CBHelperScript = document.createElement('script');
   CBHelperScript.src = 'https://consentcdn.cookiebot.com/sdk/cbappsdk.min.js';
   document.getElementsByTagName('head')[0].appendChild(CBHelperScript);
}
</script>

The snippet will load the helper object, which checks if Cookiebot is installed on the website. If it is not, the helper will trigger all tags that are marked up, simulating a full consent for all types of cookies.

Last updated: 23 August 2018