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")