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.

68747470733a2f2f7777772e6d6172636f73726175646b6574742e636f6d2f6173736574732f696d616765732f70726f64756374732f67686f73746c79636f6e73656e742e706e67

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>

Usage

Basic usage:

// Options
// callback option sends accepted/allowed files to specified url as POST request with application/json header for tracking (optional)
var options = {
    elements: {
        consentWrapper: '#gh-cookie-consent'
    },
    callback: 'https://example.com/callback'
};

// 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

// ---///--- name, title, file & type (css/js) keys are REQUIRED! ---///---
var files = [
{
    title: 'Google Fonts',
    name: 'font',
    file: 'https://fonts.googleapis.com/css2?family=Roboto:[email protected]&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(options, files);

// calls function statusChange(); after consents state is changed
ghostlyConsent.on('status', statusChange);

function statusChange(event) {
    // get the whole event
    console.log(event);

    if(event.value) {
        // do something if consent is accepted
        // alternatively you can use this to load your own files
        // or do something else..
        console.log("Consent was accepted");
    } else {
        // do something if consent is rejected
        console.log("Consent was rejected");
    }
}

Options

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

Option 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

Options.elements:

Option 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

Options.text:

Option 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
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

Contributing

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