README

A plugin to implement cookieconsent in Kirby.

Uses the open source cookieconsent library
Provides default translations for 5 cookie categories
Multilingual support (EN/DE/FR)
Customizable

Kirby Cookieconsent plugin

1. Installation

The recommended way of installing is by using Composer.

1.1 Composer

composer require zephir/kirby-cookieconsent

1.2 Download

Download and copy this repository to /site/plugins/kirby-cookieconsent.

1.3 Git submodule

git submodule add https://github.com/zephir/kirby-cookieconsent.git site/plugins/kirby-cookieconsent

2. Setup

Add snippet('cookieconsentCss') to your header and snippet('cookieconsentJs') to your footer.

3. Options

3.1 Available options

Option	Type	Default	Description
root	string	`"document.body"`	Root (parent) element where the modal will be appended as a last child.
autoShow	boolean	`true`	Automatically show the consent modal if consent is not valid.
revision	integer	`1`	Manages consent revisions; useful if you'd like to ask your users again for consent after a change in your cookie/privacy policy.
autoClearCookies	boolean	`true`	Clears cookies when user rejects a specific category. It requires a valid autoClear array.
hideFromBots	boolean	`true`	Stops the plugin's execution when a bot/crawler is detected, to prevent them from indexing the modal's content.
disablePageInteraction	boolean	`true`	Creates a dark overlay and blocks the page scroll until consent is expressed.
lazyHtmlGeneration	boolean	`true`	Delays the generation of the modal's markup until they're about to become visible, to improve the TTI score. You can detect when a modal is ready/created via the onModalReady callback.
guiOptions	array	see below	You can extensively customize both the color scheme and the layout, based on your needs.
categories	array	see below	Use to define your cookie categories.
translations	array	see below	An array of translations for each language.
language	array	see below	Defines the language and direction for single language installations.
cdn	boolean	`false`	Whether to load the cookieconsent assets from jsdelivr.net or use the compiled assets provided with this plugin.

3.2 Defaults

'zephir.cookieconsent' => [
    'cdn' => false,
    'revision' => 1,
    'root' => 'document.body',
    'autoClearCookies' => true, // Only works when the categories has an autoClear array
    'autoShow' => true,
    'hideFromBots' => true,
    'disablePageInteraction' => false,
    'lazyHtmlGeneration' => true,
    'guiOptions' => [
        'consentModal' => [
            'layout' => 'box',
            'position' => 'bottom right',
            'flipButtons' => false,
            'equalWeightButtons' => true
        ],
        'preferencesModal' => [
            'layout' => 'box',
            // 'position' => 'left', // only relevant with the "bar" layout
            'flipButtons' => false,
            'equalWeightButtons' => true
        ]
    ],
    'categories' => [
        'necessary' => [
            'enabled' => true,
            'readOnly' => true
        ],
        'measurement' => [],
        'functionality' => [],
        'experience' => [],
        'marketing' => []
    ],
    'translations' => [
        'de' => require_once(__DIR__ . '/translations/de.php'),
        'en' => require_once(__DIR__ . '/translations/en.php'),
        'fr' => require_once(__DIR__ . '/translations/fr.php')
    ],
    'language' => [
        'locale' => 'en',
        'direction' => 'ltr'
    ]
]

3.3 Predefined cookie categories

Each cookie category can be used to control certain scripts. To learn how to manage scripts, head over to the CookieConsent documentation.

Categories that are predefined by this plugin:

Name	Enabled	Description
necessary	✅	The necessary cookies, can't be disabled by the user.
functionality	✅	Cookies for basic functionality and communication.
experience	✅	Cookies to improve the quality of the user experience and enable the user to interact with external content, networks and platforms.
measurement	✅	Cookies that help to measure traffic and analyze behavior.
marketing	✅	These cookies help us to deliver personalized ads or marketing content to you, and to measure their performance.

Predefined means that there are translations in all languages for each category. The translations essentialy control which categories exist.

To enable/disable categories you can use the categories option of the plugin. Be aware that disabling a category also requires you to update the translation files.

'zephir.cookieconsent' => [
    'categories' => [
        'necessary' => [
            'enabled' => true,
            'readOnly' => true
        ],
        'measurement' => [],
        'functionality' => [],
        'experience' => [],
        'marketing' => []
    ],
]

An empty array defines the category with the default options. You can pass additional options like enabled or readOnly in the array. Learn more about those options in the CookieConsent Documentation.

3.4 Disabling a category

To disable a category you have to remove it from the translations file. Follow "Overriding specific translations" to change the translations.

4. Language

If you have a single language setup (kirby option languages not set to true), you will have to define the language option of the plugin. For multi language setups you don't have to do anything, the plugin automatically uses the kirby language or falls back to the first translation in the translations array.

'zephir.cookieconsent' => [
    'language' => [
        'locale' => 'de', // The translation to use, default is en
        'direction' => 'ltr' // Either ltr or rtl, default is ltr
    ]
]

5. Translations

The translations are a central part of the plugin. By default we provide translations for EN, DE, FR and the categories mentioned in 3.3 Predefined cookie categories. To customise or override the default translations, you will need to use the translations option.

5.1 Overriding specific translations

For this example we are overriding one string and adding a new category in the sections part of the EN translation.

Create a new folder in your project. For this example we call it cc-translations.
In that folder, create a new file en.php.

<?php
// site/cc-translations/en.php

return array_replace_recursive(
    // We assume the plugin was installed as suggested in the installation section of the readme.
    require_once(__DIR__ . '/../plugins/kirby-cookieconsent/translations/en.php'),
    [
        'consentModal' => [
            'title' => 'Lorem ipsum dolor!', // Override consentModal title
        ],
        "preferencesModal" => [
            "sections" => [
                [ // Add a new category in sections
                    "title" => "Custom scripts",
                    "description" => "Diese Cookies helfen uns, Ihnen personalisierte Werbung oder Marketinginhalte bereitzustellen und deren Leistung zu messen.",
                    "linkedCategory" => "custom-scripts",
                ],
            ]
        ]
    ]
);

Now you need to require (or include) this file in config.php. Because we want to see the new category custom-scripts we also need to update the categories option.

'zephir.cookieconsent' => [
    'categories' => [
        'custom-scripts' => []
    ],
    'translations' => [
        'en' => require_once(__DIR__ . '/../cc-translations/en.php')
    ]
]

You can also override the whole translation file by coying the default file and adjusting the values. If you disable a category in the categories option you will need to override the sections part of the translations to exclude that category. You can also require the default translation and manually alter the array by modifying, adding or deleting entries.

6. Events

You can find all available events in the CookieConsent Documentation.

The CookieConsent object is available through the window object (window.CookieConsent).

License

MIT

zephir / kirby-cookieconsent

Maintainers

Details