README

Cookie Consent is a customizable, easy-to-use Kirby CMS plugin that manages cookie consents.

Concept

Categories

Cookie Consent uses categories to group single policies (or cookies as you wish). Each category is an object with the following entries.

Policies

A policy needs to be created for each cookie or tool you wish to have user consent for. A policy in an object with the following entries.

Installation

Via composer

composer require femundfilou/kirby-cookie-consent

Usage

1. Add the section to your site.yml to get an interface to provide policies and categories.

  sections:
    cookieconsent: sections/cookie-consent

1. Add this snippet to the footer of your website.

<?php snippet('cookie-consent'); ?>

Handling consent

You need the handle the initialisation of your scripts and tools after consent of a user yourself. For this, you can use the CookieConsent.getUserConsent() function to return the policy ids, the user has given consent to. After given consent, the site will reload.

Example

<script async>
document.addEventListener("DOMContentLoaded", function() {
  if (window.CookieConsent.getUserConsent().indexOf("matomo") > -1) {
   ... Activate analytics
  }
});
</script>

Javascript Methods

A global object is added to window. You can use it by calling CookieConsent or window.CookieConsent. The object exposes the following entries.

Configuration

You can override the default configuration in your site/config/config.php or on the snippet itself. The following options are provided:

Overwrite in config.php

return [
  'femundfilou.cookie-consent' => [
    'cookieName' => 'cc_policies',
    'blockPage' => false,
    'expires' => 365,
    'locale' => 'en',
    'position' => 'bottom-right',
    'autoIncludeJs' => true
  ]
];

Overwrite on snippet

<?php snippet('cookie-consent', ['locale' => 'de']); ?>

Overwriting or adding translations

Out of the box this plugin provides support for German and English translations. You may overwrite them or add other languages. Look at the kirby docs for more info about how to add custom language variables.

The following variables are provided:

femundfilou.cookie-consent.start.headline: ""
femundfilou.cookie-consent.start.text: ""
femundfilou.cookie-consent.settings.headline: ""
femundfilou.cookie-consent.settings.text: ""
femundfilou.cookie-consent.buttons.decline: ""
femundfilou.cookie-consent.buttons.cancel: ""
femundfilou.cookie-consent.buttons.save: ""
femundfilou.cookie-consent.buttons.acceptall: ""
femundfilou.cookie-consent.buttons.settings: ""

Styling

Cookie Consent uses CSS Variables. You can overwrite them in your styles.

:root {
  --cc-primary-color: hsl(103, 88%, 47%);
  --cc-primary-color-invert: white;
  --cc-primary-color-dark: hsl(103, 88%, 34%);
  --cc-primary-color-dark-invert: white;
  --cc-secondary-color: lightgray;
  --cc-secondary-color-invert: black;
  --cc-secondary-color-dark: rgb(161, 160, 160);
  --cc-secondary-color-dark-invert: black;
  --cc-background: white;
  --cc-text: black;
  --cc-overlay-background: rgba(255, 255, 255, 0.5);
  --cc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cc-font-size: 14px;
}

Example overwrite in css

:root {
  --cc-primary-color: yellow;
}

Example overwrite in scss

Be sure to use #{$sassVariable} to use scss variables in css variables.

:root {
  --cc-primary-color: #{$primary};
}