SimpleGDPR.js - Lightweight GDPR Plugin

Overview

We use browser cookies to personalize content and Ads, to provide social media features and analyse traffic. To use our site, you must agree to our Privacy Policy.

Features

SimpleGDPR is a lightweight and easy-to-use JS plugin for GDPR consent. It features:

Simple API.
Built in themes.
Customizable via CSS.
Mobile ready.
No dependencies.

In addition, the plugin comes with a predefined consent message, which can be easily changed. The built-in themes were created with UX in mind, with the goal of being clear, intuitive, and pretty.

Getting Started
Basic Usage
Custom Messages
Options
Methods

Getting Started

Option 1: CDN

Include both the script and css from the CDN in your HTML document:

<script src="https://unpkg.com/simple-gdpr@1.1.5/dist/simplegdpr.umd.js"></script>
<link href="https://unpkg.com/simple-gdpr@1.1.5/dist/simplegdpr.min.css" rel="stylesheet">

It's recommended to place this at the bottom of your <body> and before your own scripts.

Option 2: Package Manager

npm install simple-gdpr

You can then import into your bundle:

import SimpleGDPR from 'simple-gdpr';

You will also need to import the css file. e.g. with Rollup or Webpack:

import 'simple-gdpr/dist/simplegdpr.min.css';

Basic Usage

Here’s how easy it is to get started. This is the default SimpleGDPR when given no options.

const notice = new SimpleGDPR();

You can easily customize this behaviour by passing options (see options). In this example, we will close the notice, display an alert, and execute our analytics/cookies logic. we will execute our cookie/analytics logic, display an alert, and finally close the notice when the button is pressed.

const notice = new SimpleGDPR({
  callback: () => {
    notice.close();
    alert('Hi!');
    analytics.start();
  },
});

In this example, we will change the title text and provide a link (or function) to our privacy policy details.

const notice = new SimpleGDPR({
  title: 'This website uses cookies.',
  link: './privacypolicy.html',
});

If we want to change up the styles and themes, we can also pass it in the options.

const notice = new SimpleGDPR({
  theme: 'modern',
  icons: false,
  animation: 'slide',
  float: 'bottom-left',
});

For more detailed description on all the options, see the options section. Here's an example of all the possible options.

const notice = new SimpleGDPR({
  title: 'Cookies and Cream',
  message: 'Do you want some?',
  link: null,
  icons: true,
  theme: 'dark',
  animation: 'slide',
  float: 'bottom-right',
  callback: () => {
    notice.close();
    setTimeout(() => { notice.open }, 1000);
  },
  openOnInit: true,
  id: {
    box: 'my-box-id',
    button: 'my-button-id',
  },
});

Custom Messages

Method 1: Via Options

Passing a string into the message property in the options will replace the contents of the default message with your message. If you use this method, you will not be able to use the link property. Method 2 can be used if you wish to retain this functionality.

Method 2 (Recommended): DOM Element

It may be better to pass in your own element for more control. The link property will look for any elements that contains the class sgdpr-policy, and add a href attribute with your link or a click listener if a function was passed. Note: you can just add your own event listeners when constructing your elements, and using the link property is not required at all.

const group = document.createElement('div');
const message = document.createElement('span');
const policy = document.createElement('span');

message.innerText = 'My custom message! ';       
policy.innerText = 'Privacy Policy';
policy.classList.add('sgdpr-policy');

group.appendChild(message);
group.appendChild(policy);

const notice = new SimpleGDPR({
  message: group,
  link: () => {
    alert('Here are my terms!');
  }
});

Options

Property	Default	Value	Description
title	"Cookies & Privacy Policy"	String	Sets the text portion of the title area in the notice box (will not replace icons).
message	HTMLElement	String HTMLElement	Sets the message body of the notice box. The link property will not work if a String is passed to replace the message body. To retain the link property, pass in your grouping of HTMLElement with a child element(s) containing the class sgdpr-policy. See Custom Messages Method 2 for example.
link	null	String Function	Sets the link (or click listener if a function was passed) for any elements with the class sgdpr-policy.
callback	() => { self.close() }	Function	Sets the callback function when the button is pressed. You will need to add back the close() method in your own implementation (for the box to close).
theme	"light"	"light" "dark" "modern" "material" null	The theme used by the notice box. You can pass in null if you do not want any classes from the built-in themes to be added.
icons	true	Boolean	Determines if the icons (info and check) are placed adjacent to the title and button. Note that in mobile mode, the check icon will replace the button regardless of this value.
animation	"fade"	"fade" "slide" null	Sets the animation for open() and close() methods. No animations will be used if null is passed.
float	"bottom-right"	"bottom-right" "bottom-left" "top-right" "top-left"	Sets the position of where the notice box will float.
openOnInit	true	Boolean	Determines if the notice box will automatically show when it is instantiated.
id	{ box: null, button: null }	String	This is a nested object under the property id. If box or button are assigned strings, these will be their id attributes in the DOM. If they are null (default behavior) then the default sgdpr-box and sgdpr-button will be used. This property is only useful if for some reason you have multiple instances of SimpleGDPR.

Methods

SimpleGDPR has 8 methods available which allow you to control the notice box.

Open and Close

These will trigger animations (if enabled) and show or close appropriately. Close will set the display to be 'none'. isActive() will return true if its currently open, or false if its closed.

notice.open();
notice.close();
notice.isActive();

Set Callback and Content

setCallback provides an interface to change the event listener attached to the button. setContent only takes in HTMLElements and replaces the entire notice box (title, icons, message and button).

notice.setCallback(() => {  
  notice.close();        
  Cookies.set('accepted', 'true');   
});

const replaced = document.createElement('div');
replaced.innerText = 'Replaced';
notice.setContent(replaced);

Moving the Box

You can use these methods to move the box. relocate() will move the box to one of the float property positions e.g. 'top-right' . appendTo() takes in the id of the parent element, and appends the box to the parent element.

notice.relocate('top-left');
notice.appendTo('parentContainerId');

Destroy

To permanently destroy the SimpleGDPR notice box and remove from the DOM.

notice.destroy();