ghostlyconsent.js

GhostlyConsent.js

About

GhostlyConsent.js is a lightweight customizable open source Vanilla JavaScript cookie consent that does not need any third-party components to work.

Examples

https://ghostly.marcosraudkett.com/examples/modal.html

Installation

git clone https://github.com/marcosraudkett/GhostlyConsent.js.git

Adding it to your project:

<!-- GhostlyConsent.js -->
<link rel="stylesheet" href="path/to/dist/GhostlyConsent.css">
<script src="path/to/dist/GhostlyConsent.js"></script>

Via CDN (Current)

<!-- Using CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/marcosraudkett/GhostlyConsent.js@main/src/GhostlyConsent.css">
<script src="https://cdn.jsdelivr.net/gh/marcosraudkett/GhostlyConsent.js@main/src/GhostlyConsent.js"></script>

Via CDN - Minified (Current)

<!-- CDN - Minified -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/marcosraudkett/GhostlyConsent.js@main/src/GhostlyConsent.min.css">
<script src="https://cdn.jsdelivr.net/gh/marcosraudkett/GhostlyConsent.js@main/src/GhostlyConsent.min.js"></script>

Usage

You can use the example below in an existing file on your site. The example below loads the consent template from templateLocation and useTemplate enables the template usage. Basic usage:

// Properties
// Check src/properties.js for full list of properties.
const properties = {
    templateLocation: '../src/views/default.html',
    useTemplate: true,
    elements: {
        consentWrapper: '#gh-cookie-consent'
    },
};

// files you wish to load after accepted 
// if array is used inside "files" then set scope: permissions and use disallowed in there to set rule for all files 
// if disallowed key is not set then the default is set to true
// if type is not set then it will load the file using ajax

// Alternatively you can use events to load your files or do something when the status is changed (check below .init())
// ---///--- name, title, file & type (css/js) keys are REQUIRED! ---///---
const files = [
  {
      title: 'Google Fonts',
      name: 'font',
      file: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap',
      type: 'css',
      ajax: false,
      disallowed: false
  },
  analytics = [
        {
          scope: 'meta',
          title: 'Google Analytics',
          name: 'analytics'
        },
        {
          scope: 'permissions',
          disallowed: false
        },
        {
          file: 'https://www.googletagmanager.com/gtag/js?id=UA-44404621-1',
          type: 'js'
        },
        {
          file: '../vendor/Google-Analytics.js', // this file has the rest of the Google Analytics code
          type: 'js'
        }
    ],
];

// initialize
ghostlyConsent.init(properties, files);

// when consent status is changed
ghostlyConsent.on('status', (event) => {
  // get the whole event
  console.log(event);

  if (event.value) {
    // do something if consent is accepted
    console.log("Consent was accepted");
    // alternatively you can use this to load files:
    ghostlyConsent.addFiles([
        {
            title: 'Google Fonts',
            name: 'font',
            file: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap',
            type: 'css',
        },
        {
            title: 'Test script',
            name: 'test',
            file: '/',
            type: 'js',
        }
    ]);
    // or do something else..
  } else {
    // do something if consent is rejected
    console.log("Consent was rejected");
  }
});

// listen for file additions
ghostlyConsent.on('addFile', (event) => { 
  // get files
  const files = ghostlyConsent.getFiles();
  console.log(files); // loaded files
});

Properties

Here’s everything you can setup: (none of the properties are required)

Property	Description	Type	Default	Required
elements	Cookie elements	array	array (check below)	No
text	Button texts	array	array (check below)	No
name	Name of the cookie	string	_ghostly_consent	No
destroy	Remove cookie container if cookie exists / or has been enabled/disabled	boolean	false	No
domain	Your domain	string	.yourdomain.com	No
callback	Callback url	string	null	No
length	Days until expiration	int	365	No
debug	Shows errors as alerts();	boolean	false	No

Properties.elements:

Property	Description	Type	Default	Required
elements.consentWrapper	The main container	string	#gh-cookie-consent	No
elements.personalizeWrapper	Personalization container	string	#gh-cookie-personalization	No
elements.modalWrapper	Modal container	string	#gh-modal	No
elements.buttonsPersonalize	Button to activate personalization container	string	#gh-cookie-personalize	No
elements.buttonsEnable	Accept cookies button	string	#gh-cookie-enable	No
elements.buttonsDecline	Decline cookies button	string	#gh-cookie-decline	No

Properties.text:

Property	Type	Default	Required
acceptSelected	string	Accept selected	No
acceptAll	string	Accept all	No
declineAll	string	Decline all	No
personalize	string	Personalize	No
choose	string	Choose the cookies you wish to accept:	No

Events

ghostlyConsent.on('initialized', (event) => { console.log("initialized: "); console.log(event); });
ghostlyConsent.on('popupOpened', () => { console.log("popupOpened"); });
ghostlyConsent.on('popupClosed', () => { console.log("popupClosed"); });
ghostlyConsent.on('popup', (event) => { console.log("popup state: "+event.value); });
ghostlyConsent.on('status', (event) => { console.log("status: "+event.value); });
ghostlyConsent.on('rejected', (event) => { console.log("rejected: "+event.value); });
ghostlyConsent.on('accepted', (event) => { console.log("accepted: "+event.value); });

Event	Description
initialized	-
status	When cookie status is changed
accepted	After consent is accepted
rejected	After consent is rejected
popupOpened	After consent is opened
popupClosed	After consent is closed
personalize	When personalization is triggered
appendFile	When a file has been appended to document
getFile	When a file has been loaded
filesLoaded	When all files have been triggered

API

// add files after initialization
var files = []; // list of files
ghostlyConsent.addFiles(files);
// add a single file after initialization
var single = {
    title: 'Single file example',
    name: 'googl',
    file: '../',
    type: 'js',
};
ghostlyConsent.addFile(single);

Function	Input/Response	Description
addFiles	array	Add multiple files after initialized.
addFile	object	Add a single file after initialization.
getFiles	array	Get the list of files

Contributing

Feel free to help this project or if you’ve found a bug then feel free to visit the issues page.

This site is open source. Improve this page.