Scrivito another cookie banner

This cookie banner can be used for multiple subdomains. It saves cookie consent as domain wide cookie.

Configuration

Banner can be configurated via JSON structure.

Example:

{
  "name": "_bima_cookie_consent",
  "technicalNames": {
    "gmap": [],
    "authentication": ["_doorkeeper_session", "rack.session"],
    "cookie_consent": ["_cookie_consent"]
  },
  "blocks": [
    {
      "name": "functional",
      "preset": "declined",
      "editable": true,
      "cookies": [
        "gmap"
      ]
    },
    {
      "name": "essential",
      "preset": "accepted",
      "editable": false,
      "cookies": [
        "authentication",
        "cookie_consent"
      ]
    }
  ]
}

Translations

I18next is used for localization. There are some standard localization which can be overwritten by configuration.

Some blocks in translation files depends on cookies configurations.

CookieDeclinedPlaceholder: contains translations for Gatekeeper-Component. To define diffrent localization for different cookies you have to define new block under CookieDeclinedPlaceholder which have same name like your cookie. e.g for cookie named gmap you should create block:

  "gmap": {
    "iconClass": "fas fa-map-marked-alt",
    "title": "Cookies abgelehnt",
    "text": "Sie haben der Verwendung von Cookies nicht zugestimmt. Solange Sie die Zustimmung nicht gegeben haben, wird dieses Element nicht dargestellt."
  }

Next dynamic blocks are translations for expanded banner view. Under the key cookieDefinitions you have to define blocks for each cookie-group. Inside of such groups you alse have to define descriptions for every cookie.

  "cookieDefinitions": {
    "functional": {
      "buttons": {
        "all": {
          "title": "Alle Cookies"
        }
      },
      "title": "Funktionell",
      "description": "Mit dieses Cookies werden Ihnen auf der Webseite zusätzliche Funktionen bereitgestellt.",
      "cookies": {
        "gmap": {
          "title": "Google Maps",
          "description": {
            "title": "Google",
            "text": "Dieses Cookie wird vom Google ('google.com') gesetzt."
          }
        },
        "vimeo": {
          "title": "Vimeo Video",
          "description": {
            "title": "Vimeo",
            "text": "Dieses Cookie wird vom Video-Host-Service 'vimeo.com' gesetzt."
          }
        }
      }
    },
    "essential": {
      "title": "Essentiell",
      "description": "Diese Cookies werden für die Grundfunktionen der Website benötigt.",
      "cookies": {
        "authentication": {
          "title": "Authentifizierung",
          "description": {
            "title": "Authentifizierung",
            "text": "In diesem Cookie wird die Information über den aktuell an der Seite angemeldenten Benutzer gespeichert."
          }
        },
        "cookie_consent": {
          "title": "Cookie-Zustimmung",
          "description": {
            "title": "Cookie-Zustimmung",
            "text": "In diesem Cookie wird Ihre Zustimmung über die Verwendung der Cookies gepeichert."
          }
        }
      }
    }
  },

Usage in React.js

User Cookie Context Provider

import { CookieConsentProvider, CookieBanner } from "scrivito-cookie-banner";
import cookieConfig from "./config/cookieBannerConfig.json";
import cookieBannerTranslationsDe from "./config/locales/cookieBanner/de.json";
import logoUrl "./assets/logoUrl.json
....
const cookieBannerTranslations = {de: cookieBannerTranslationsDe};
...
  <CookieConsentProvider
    cookieConfig={cookieConfig}
    language="de"
    translations={cookieBannerTranslations}
    logoUrl={logoUrl}
  >
  ....
  <CookieBanner hideOnLoad={Scrivito.isEditorLoggedIn()} />
 </CookieConsentProvider
...
</CookiesProvider>

Open Cookie Banner from link

import { useCookieConsent } from "scrivito-cookie-banner";

function Footer() {
  const { setBannerVisibility } = useCookieConsent();
  return (
    <a href="#bottom" onClick={() => setBannerVisibility(true)}>
      Open cookie settings
    </a>
  )
}
export default Footer;

Use Gatekeeper component

import { CookieGatekeeper } from "scrivito-cookie-banner";

function MapComponent() {
  return (
    <CookieGatekeeper cookieName="gmap">
      <GoogleMapComponent />
    </CookieGatekeeper>
  )
}

As long as user don't accepted usage of Cookie named gmap (s. configuration) children component wont be rendered.

Debug Mode

Set debug mode in window.localStorage.

 window.localStorage.setItem("ScrivitoCookieBanner.debug", "true")