# Cookiebot CMP

Every Foleon Doc has cookies, and according to the GDPR, you need to inform your readers about these cookies. Your company might use Cookiebot as a Consent Management Platform (CMP) to meet additional requirements for your cookie consent. This article shows you how to implement Cookiebot into your Foleon Docs.

### Cookiebot and Foleon

The role of a Consent Management Platform (CMP) such as Cookiebot is to ask the user for consent, and then send a signal to Foleon once cookie preferences are given. This signal is processed and the cookie preferences and stored in the in the browser's local storage. In order to achieve this we need to implement some JavaScript code to ensure Cookiebot can correctly relay the cookie preferences to Foleon.

## Building the Script

### 1. Prevent Foleon from Placing Cookies

If you are not using Foleon's native Cookie Consent feature, a Foleon Doc will attempt to place cookies by default. This poses a problem when using a third-party CMP, as cookies will be placed even if no consent is given yet. This is why we need a script that makes sure the cookies are blocked beforehand. Add the following script tag to your remarketing code:


```html
<!-- Disable all Cookies untill consent is given via Cookiebot -->
<script>
  if (!window.localStorage.getItem('cc_settings') && window.navigator?.userAgent?.includes("Cookiebot") !== true) {
    window.localStorage.setItem(
      'cc_settings',
      JSON.stringify({ statistics: 0, marketing: 0, preferences: 0 })
    );
  }
</script>
```

### 2. Import OneTrust

Next, we need to import the OneTrust banner and its SDK. We do this by placing a script that is unique to your OneTrust account, and is thus provided by OneTrust itself. You can find more information on where to find this script on OneTrust's documentation here.
The script should look something like this:


```html
<!-- Add your Cookiebot Cookies Consent SDK script here, or replace the `cbid` with the ones from your application -->
<script 
        id="Cookiebot" 
        src="https://consent.cookiebot.com/uc.js" 
        data-cbid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" 
        data-blockingmode="auto" 
        type="text/javascript"
></script>
<script
        id="CookieDeclaration" 
        src=https://consent.cookiebot.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/cd.js 
        type="text/javascript" async
></script>
```

### 3. Listen for and apply Consent Changes

Next, we add a script that listens for Consent-updates coming from Cookiebot and then replays them to Foleon's CookieConsent API.


```html
<!-- mapping the Cookiebot categories to Foleon cookie categories-->
<script>
    function sendConsentToFoleon() {
        const { consent } = Cookiebot;
        const consentSettings = {
            statistics: consent.statistics ? 1 : 0,
            marketing: consent.marketing ? 1 : 0,
            preferences: consent.preferences ? 1 : 0
        };
        if(typeof CookieConsentAPI !== 'undefined') {
            CookieConsentAPI.update(consentSettings);
            CookieConsentAPI.save();
        } else {
            localStorage.setItem("cc_settings", JSON.stringify(consentSettings));
        }
    }
    window.addEventListener('CookiebotOnConsentReady', sendConsentToFoleon);
    window.addEventListener('CookiebotOnConsentChanged', sendConsentToFoleon);
</script>
```

### 4. Final steps

Now that we have all the scripts, we need to paste all of them into the Foleon Remarketing code. For most usecases it is advised to use the Global Doc settings for this as it will apply the cookie banner to all Docs in your workspace.
**Republish your Doc's to make sure the changes are applied.**

div
strong
⚠️ Warning:
 The Cookie banner will not be available in the editor, to test it you will need to visit the live published doc.