README

This module adds a simple cookie consent banner to your Silverstripe website. It uses the CookieConsent v3 script. You can use it with the Fluent translation module.

Requirements
Installation
Configuration
Custom Styling
Translations
Reporting Issues
Credits

Requirements

Silverstripe CMS >=4.0
Silverstripe Framework >=4.0
Versioned Admin >=1.0

Installation

composer require pixelpoems/silverstripe-vanilla-cookieconsent

Configuration

Template

If you want the cookie config in consent mode include the template like this:

 <% include Pixelpoems\CookieConsent %>

The other option is to pass the config via the body tag like this:

<body data-cc-config="$CCJSConfig">

The consent will NOT be displayed on "Security" Pages (Login, Register, ForgotPassword, ResetPassword) and on the Admin Area. Furthermore, you can hide it on specific pages by checking the "Hide Cookie Consent" checkbox in the CMS (Page Settings).

If you want to add an "Open Modal" button you can add this in your template:

<button id="cookieconsent__settings-btn">
    <%t VanillaCookieConsent\ConsentModal.ShowConsent 'Cookie Settings' %>
</button>

JavaScript Customization

If you not want to use the default js (for example if you want to use the script in a different way or display it after you asked for the language or something else) you can disable the default js by adding the following to your project:

Include the script in your template:

<% require javascript('pixelpoems/silverstripe-vanilla-cookieconsent:client/dist/javascript/vanilla-cookie-consent-dialog.min.js') %>

or your PageController:

Requirements::javascript('pixelpoems/silverstripe-vanilla-cookieconsent:client/dist/javascript/vanilla-cookie-consent-dialog.min.js');

In your js file:

document.addEventListener('DOMContentLoaded', () => {
    // Your custom code
    
    // Call the function to handle the cookie consent dialog
    window.handleCookieConsentDialog();
});

In your yml config:

VanillaCookieConsent\Services\CCService:
  disable_default_css: true # Disables the default css
  disable_default_js: true # Disables the default js

YML Configuration

You can configure the cookies via the YML config. The following options are available:

VanillaCookieConsent\Services\CCService:
  default_lang: 'de' # Default language
  # IF you want to configure services:
  categories: # necessary category is added by default
    analytics: [] # no services
    video: # services listed (e.g. youtube, vimeo)
      - youtube
      - vimeo
#  # IF you NOT want to configure services:
#  categories: # necessary category is added by default
#    - analytics
#    - video
  # If you want to configure which iframe services are allowed
  iframe_services:
    - googlemaps
    - youtube
    - vimeo
    - yumpu
  analytics_cookie_table: # e.g. Adds a table with the cookies used for analytics (Needs to match the category) OPTIONAL
    _ga: 'your-location.com'
    _gat: 'your-location.com'
  video_cookie_table:
    VISITOR_INFO1_LIVE: '.youtube.com'
    VISITOR_PRIVACY_METADATA: '.youtube.com'
    YSC: '.youtube.com'
    __cf_bm: '.vimeo.com'
    _cfuvid: '.vimeo.com'
    vuid: '.vimeo.com'

If you want to update or add the storage of a specific cookie in your cookie table, you have to do this via the lang yml files:

en:
  VanillaCookieConsent\Categories:
    Analytics_Cookie__ga_Storage: '2 Years'
    Analytics_Cookie__gcl_au_Storage: '90 Days'

The Base Translations for those are already included in the module. If you want don't want to use the video category you can add the cookies to analytics or create a new category, but attention, then you need to add the translations for the new category and the cookies.

Script Management

Available script Attributes

According to orestbida.com there are the following script attributes available:

data-category: name of the category

data-service (optional): if specified, a toggle will be generated in the preferencesModal

data-type (optional): custom type (e.g. "module")

data-src (optional): can be used instead of src to avoid validation issues

Example usage:

      <script
      type="text/plain"
      data-category="analytics"
      data-service="Google Analytics"
      >/*...code*/</script>

For further information have a look at the Cookie Consent Documentation - Script Management

iFrames

This module comes with an iFrame solution for the video category.

If you want to use the iFrame solution you need to add the following to your yml config:

VanillaCookieConsent\Services\CCService:
  enable_iframe_manager: true

TinyMCE Fields

If you add an embed in your TinyMCE for the DBHTMLTexts you there is an Extension witch preps the iframe for the usage of the iframemanager script. In your template just call: $HTML.Embeded - this will update the html so that the iframemanager can do the rest automatically.

DNA Design Element

This Module comes with an Video Element for DNA Design. If you want to overwrite the template just copy the file from the module to your theme and adjust it to your needs (templates > DNADesign > Elemental > Layout > VideoElement.ss) Within this element a video can be added via youtube, vimeo, yumpu or a simple upload.

You can edit the allowed embeddable services in the config:

Pixelpoems\VanillaCookieConsent\Elements\IFrameElement:
    allowed_embeds:
      - youtube
      - vimeo
      - yumpu

Vanilla Usage

If you want to use the iFrame solution without the DNA Design Element you can use the following code:

<!-- Works for youtube and vimeo, just add the name of the service and the id -->
 <div data-service="youtube|vimeo" data-id="add-your-id" data-autoscale></div>

Only IFrameManager (without Cookie Consent Modal)

If you want to use the IFrame without the cookie Consent you can disable the modal like this in your yml:

# For this its important to load after the module config 'pp-vanilla-cookieconsent--config'
---
Name: app-cookieconsent-config
After:
  - 'pp-vanilla-cookieconsent--config'
---
VanillaCookieConsent\Services\CCService:
  enable_consent_modal: false

! Attention: Make sure that the default_lang and the languages are stil defined so that the info strings are displayed in the correct language. Furthermore if no categories or services defined - all of the possibilities are added to the iframe manager if this is enabled. Furthermore make sure you add the CCConfig to your body.

<body data-cc-config="$CCJSConfig">

For further information have a look at the Cookie Consent Documentation - iFrameManager

Custom Styling

If you want to overwrite the default styling which are loaded from the js library, you can do this by adding the following CSS to your project:

// Prefs Window
#cc-main {
    --cc-btn-border-radius: 0px;
    --cc-btn-primary-bg: var(--color-primary);
    --cc-btn-secondary-bg: var(--color-secondary);
    font-family: var(--font-base);
    
    .pm--box{
        border-radius: 0;
    }
    
    .pm__header{
        .pm__title{
            font-size: var(--fs-md);
        }
    }
    
    .pm__body{
        .pm__section-title{
            font-size: var(--fs-sm);
        }
    }
    
    .pm__btn {
        border: 0px;
        padding: var(--btn-padding-y) var(--btn-padding-x);
        font-size: var(--btn-font-size);
    }
    
    .pm__footer{}
}

Or have a look here: https://cookieconsent.orestbida.com/advanced/ui-customization.html

Translations

You can add your own translations or overwrite the existing ones by adding the following to your project look into the existing translations here translations

For your custom categories and cookies you can add your translations like this:

VanillaCookieConsent\Categories:
  Youtube: 'Youtube' # Title of the category with uppercase first letter
  YoutubeDescription: 'This category includes cookies from Youtube.' # Description of the category with uppercase first letter
  Youtube_Cookie_cookie1: 'Youtube Cookie' # e.g. if you use the cookie Table - use the cookie name as key with uppercase first letter | underscore | "Cookie" | underscore | "CookieName" = cookie1 like its defined in your yml config

For basic description and a cookie listing you can have look at the Open Cookie Database

If you want to translate the texts in the modal and the first section in the preferences window you need to make sure that the Fluent Extension is added to the SiteConfig like this (the fields are already registered for translation in the module):

SilverStripe\SiteConfig\SiteConfig:
  extensions:
    - 'TractorCow\Fluent\Extension\FluentExtension'

Reporting Issues

Please create an issue for any bugs you've found, or features you're missing.

Credits

Cookie Consent from https://cookieconsent.orestbida.com/ Cookie Descriptions from https://jkwakman.github.io/Open-Cookie-Database/open-cookie-database.html

ToDos

Add TinyMCE Field for iFrame
Check if Element does not course any issues without DNA Design Module installed
Add custom styling instructions
iFrame Manager without cookie consent dialog

pixelpoems / silverstripe-vanilla-cookieconsent

Maintainers

Details