Silverstripe Klaro! Consent Manager

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 inspired by nomidi/kw-cookie-consent.

Requirements

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

Compatibility

• There is a 3.x branch with a backport for Silverstripe 3.
• Silverstripe 4 & 5 v2 is recommended ATM

>>>>> Do NOT use dev-master! <<<<<

Suggested

• lerni/silverstripe-googleanalytics

Installation

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 which 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 on 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"
    data-type="text/javascript"
    data-name="optimizely"
    data-src="https://cdn.optimizely.com/js/10196010078.js">
</script>

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.

Styling

Example SCSS customisation

// !klaro
html .klaro {

    .cookie-modal,
    .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-accept,
        .cm-btn.cm-btn-decline {
            background-color: $gray;
        }
        // klaro link
        .cm-modal .cm-footer .cm-powered-by {
        }
    }
}

Todo

• 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.