@uncinc/cookie-consent

Unc Inc - Cookie consent

Cookie consent package for non headless frontend websites

How to implement in a non headless project in jquery:

Implement the following block in your main JS file, replacing YOUR_THEME with the proper folder:

    $(once('cookie-banner', 'html')).each(function(e) {
      const body = document.getElementsByTagName('body')[0];
      const div = document.createElement('div');
      div.id = 'uncinc-cookie-compliance';
      body.appendChild(div);

      $.getJSON('/themes/YOUR_THEME/cookie/cookie-consent.json', function(data){
          window.cookieBannerSettings = data;
          const head = document.getElementsByTagName('head')[0];
          const script= document.createElement('script');
          script.type= 'text/javascript';
          script.src= '/themes/YOUR_THEME/cookie/uncinc-cookie.min.js';
          head.appendChild(script);
      });
    });

Add a cookie consent json with the properties you want to set to the component, and include a build js from this project in the project as well in the proper folder.

See for example this JSON example:

{
  "loadDelay": 1000,
  "title": "Test",
  "manualText": "Zelf instellen",
  "acceptAllText": "Alles accepteren",
  "acceptSelectionText": "Selectie Accepteren",
  "onlyNecessaryText": "Alleen benodigde",
  "cookieContentsShowMore": "Toon meer",
  "cookieContentsShowLess": "Toon minder",
  "manualHeader": true,
  "cookieLevels": [
    {
      "value": "necessary",
      "label": "Nodig",
      "description": "Beschrijving",
      "disabled": true,
      "consentOptions": ["security_storage"]
    },
    {
      "value": "preferences",
      "label": "Voorkeuren",
      "description": "Beschrijving",
      "disabled": false,
      "consentOptions": ["functionality_storage", "personalization_storage"]
    },
    {
      "value": "statistics",
      "label": "Statistieken",
      "description": "Beschrijving",
      "disabled": false,
      "consentOptions": ["analytics_storage"]
    },
    {
      "value": "marketing",
      "label": "Test",
      "description": "Beschrijving",
      "disabled": false,
      "consentOptions": ["ad_personalization", "ad_user_data", "ad_storage"]
    }
  ],
  "defaultValues": {
    "necessary": true,
    "preferences": false,
    "statistics": false,
    "marketing": false
  },
  "bodyContents": "<h3>Welkom bij 'naam klant'</h3><p>Accepteer je deze cookies? <a href=\"test\"> zie onze cookie link </a></p>"
}

The component can be styled from the outside.