Klaro Silverstripe Integration

Installs: 1 764

Dependents: 0

Suggesters: 1

Security: 0

Stars: 4

Watchers: 2

Forks: 0

Open Issues: 3


dev-master 2022-04-26 16:56 UTC

This package is auto-updated.

Last update: 2022-07-20 16:08:36 UTC


Silverstripe Klaro [klɛro] implements KIProtect/klaro. A consent manager that helps to be transparent about third-party applications and be compliant with GDPR and ePrivacy. This module is inspred by nomidi/kw-cookie-consent.


  • silverstripe/cms ^4
  • silverstripe/siteconfig ^4

Compatibility Version ^3

There is a 3.x branch with a backport for Silverstripe 3.


  • lerni/erni/silverstripe-googleanalytics


Composer is the recommended way installing Silverstripe modules.

composer require lerni/klaro-cookie-consent or composer require lerni/klaro-cookie-consent:3.x-dev

Run dev/build

Getting started

The module loads klaro.js per KlaroInitExtension wich is applied to ContentController. The config is served with KlaroConfigController and available per /_klaro-config. You can link consent settings like <a onClick="klaro.show();return false;">Cookie consent</a> or use a ShortCode in CMS. ShortCode [ConsentLink] takes parameter beforeText & afterText and is shown conditionally of SiteConfig->CookieIsActive.

Managing third-party apps/trackers

To manage third-party scripts and ensure they only run if the user consents with their use, simply replace the src attribute with data-src, change the type attribute to text/plain and add a data-type attribute with the original type and add a data-name field that matches the name of the app as given in config. Example:

<script type="text/plain"

Klaro will then take care of executing the scripts if consent was given (you can chose to execute them before getting explicit consent with OptOut).

The same method also works for images, stylesheets and other elements with a src or type attribute.


Example SCSS customisation

// !klaro
html .klaro {

    .cookie-notice {
        a {
            color: $link-color;
        .cm-btn {
            cursor: pointer;
            font-size: 14px;
    .cookie-notice {
        .cn-ok {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start !important;
            .cn-buttons {
                order: 1;
                // decline
                .cm-btn.cn-decline {
                    background-color: $gray;
                    order: 1;
                // accept all
                .cm-btn.cm-btn-success {
                    background-color: $link-color;
                    order: 0;
            // modal link
            .cn-learn-more {
                display: block;
                margin-top: .6em;
                order: 2;
                flex: 0 0 100%;

    .cookie-modal {
        .cm-app-title {
            font-size: 14px;
        // switch disabled
        .cm-list-label .slider {
            background-color: $gray-light;
        // slider-switches
        .cm-list-input:checked + .cm-list-label .slider {
            background-color: $link-color;
        // subitems
        .cm-list-description {
            color: $white;
        // required switch enabled
        .cm-list-input.required:checked + .cm-list-label .slider {
            background-color: darken($link-color, 10%);
            &::before {
                background-color: darken($white, 16%);
        // halve is used on parent if children are on & off
        .cm-list-input.half-checked:checked + .cm-list-label .slider {
            background-color: mix($link-color, $white, 71%);

        // accept all
        .cm-btn.cm-btn-accept-all {
            background-color: $link-color;
        // save selection, decline
        .cm-btn.cm-btn-decline {
            background-color: $gray;
        // klaro link
        .cm-modal .cm-footer .cm-powered-by {


  • multilingual defaults from klaro, add translations if configured
  • add template-parser to add data-attributes and ditch suggested modules from composer
  • add defaults for google fonts, YouTube, gMaps etc.