GDPR Cookie Setting

Inspired by passatgt

This is a javascript solution to show a gdpr compliant cookie notice on your website.

Demo

Check this site for a quick demo: Link

Installation

cdn

   <script src=https://cdn.jsdelivr.net/npm/cookie-handler-gdpr@latest></script>

   <script>
     const gdpr = gdprCookieNotice({
       essential: ['PHPSSID','LANG'] // name of essential cookie
       locale: 'en', // language ("en", "de")
       colorPrimary: '#ff0000', // change primary color (used in button and radio)
       colorSecondary: '#000000', // change secondary color (used in link)
       iconColor: '#ffffff', // change icon color
       policy: "https://www.20scoops.com", // cookie policy link
       performance: ["JSESSIONID"],
       marketing: ["SSID"],
       googleAnalytic: "UA-MOCK", // google analytics UID
     });
   </script>

**Note: coolie handler gdpr script should be placed before google analytic **

esm module

  yarn add cookie-handler-gdpr

import { gdprCookieNotice } from "cookie-handler-gdpr/dist/esm";

const gdpr = gdprCookieNotice({
  essential: ['PHPSSID','LANG'] // name of essential cookie
  locale: "en", // language ("en", "de")
  colorPrimary: "#ff0000", // change primary color (used in button and radio)
  colorSecondary: "#000000", // change secondary color (used in link)
  iconColor: "#ffffff", // change icon color
  policy: "https://www.20scoops.com", // cookie policy link
  performance: ["JSESSIONID"],
  marketing: ["SSID"],
  googleAnalytic: "UA-MOCK", // google analytics UID
  ga: ReactGa.ga(), // if you use ReactGa, provide ga instance via ReactGa.ga() to ga option
});

Switch Language Dynamically

gdpr.setLanguage('languageKey');

Language Key

 en = English
 de = Deutsch

Custom position

You can use 'cookie-handler-gdpr' as id or class name to custom dialog position.

Custom font-family

You can use prop 'fontFamily' to set font style

example

const gdpr = gdprCookieNotice({
  .....,
fontFamily: "Roboto, san serif"
})