Fever Cookies Plugin

Introduction

This plugin allows you to setup a fully customizable cookie bar, so the user can control which cookies you can, following the best practices of GDPR compliance.

Features

• Custom labels
• Custom layout
• Add tabs (required|optional) as you go to match your cookie categories necessities
• Add events to your tab optin/optout actions

Setup

1. Install the npm package

npm install fever-cookies-plugin

2. Include the package in your project

The package contains two files inside dist folder which you need to include in your project.

dist/css/cookie.min.css
dist/js/cookie.min.js

3. Initialization with default values

const myCookieBar = new FeverCookieBar();

This will create a default cookie bar, with the default values and no events for optin/optout actions.

3.1 Initialization with custom values

To fully initialize the cookie plugin, you must pass your values/events as parameters. The code below shows setup to the default configuration, all the values that can be edited, plus the google analytics event inside analytics optional tab.

const myCookieBarWithOptions = new FeverCookieBar({
    layout: {
        color: {
            overlay: false, //true or false --- block site from doing any action until user act on cookies
            primary: '#f60',
            secondary: '#000'
        },
        borderRadius: 10,
        bar: {
            position: 'bottom', //bottom or top
            text: 'By continuing to browse or by clicking "Accept All Cookies", you agree to the storing of first and third-party cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts',
            textColor: 'white', //white or black
            link: {
                text: 'Cookie Privacy',
                target: '_blank',
                url: 'https://gdpr-info.eu/'
            },
            labels: {
                acceptAll: 'Accept all cookies',
                rejectAll: 'I do not accept',
                settings: 'Cookie Settings'
            }
        }
    },
    modal: {
        title: 'Privacy Preference Center',
        logo: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNTAgODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1MCA4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNEQ0E5OEI7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjEuMDI2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDF7ZmlsbDojRENBOThCO30KCS5zdDJ7ZmlsbDojQjU3OTU3O30KPC9zdHlsZT4KPGc+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI2Ni45IiBjeT0iNDAiIHI9IjEwIi8+Cgk8Zz4KCQk8cGF0aCBkPSJNMjcsNTBjLTIuOSwwLTUuNC0xLTcuMy0yLjljLTEuOS0xLjktMi45LTQuNC0yLjktNy4zYzAtMi45LDEtNS4zLDIuOS03LjNjMS45LTEuOSw0LjMtMi45LDcuMy0yLjkKCQkJYzEuOCwwLDMuNCwwLjQsNC45LDEuM2MxLjUsMC44LDIuNywyLDMuNSwzLjRsLTQuMywyLjVjLTAuNC0wLjctMC45LTEuMi0xLjctMS42Yy0wLjctMC40LTEuNi0wLjYtMi41LTAuNgoJCQljLTEuNiwwLTIuOCwwLjUtMy44LDEuNXMtMS40LDIuMy0xLjQsMy44czAuNSwyLjksMS40LDMuOGMxLDEsMi4yLDEuNSwzLjgsMS41YzAuOSwwLDEuNy0wLjIsMi41LTAuNmMwLjctMC40LDEuMy0xLDEuNy0xLjcKCQkJbDQuMywyLjVjLTAuOSwxLjQtMiwyLjYtMy41LDMuNFMyOC44LDUwLDI3LDUweiIvPgoJCTxwYXRoIGQ9Ik05NC41LDQ5LjZoLTUuNmwtNS42LTguN3Y4LjdoLTVWMzAuMWg1djguMmw1LjMtOC4yaDUuNkw4OCwzOS42TDk0LjUsNDkuNnoiLz4KCQk8cGF0aCBkPSJNOTUuOSwzMC4xaDV2MTkuNWgtNVYzMC4xeiIvPgoJCTxwYXRoIGQ9Ik0xMDguOSw0NC45aDcuNXY0LjdoLTEyLjVWMzAuMWgxMi40djQuNmgtNy40djIuN2g2LjdWNDJoLTYuN1Y0NC45eiIvPgoJCTxwYXRoIGQ9Ik0xMjUuOCw1MGMtMi4xLDAtMy44LTAuNC01LjEtMS4zYy0xLjQtMC45LTIuMy0yLjEtMi44LTMuNWw0LjMtMi41YzAuNywxLjcsMiwyLjYsMy44LDIuNmMxLjUsMCwyLjMtMC40LDIuMy0xLjMKCQkJYzAtMC42LTAuNC0xLTEuMy0xLjRjLTAuNC0wLjItMS4yLTAuNC0yLjQtMC44Yy0xLjgtMC41LTMuMi0xLjItNC4yLTIuMmMtMS0wLjktMS42LTIuMi0xLjYtMy45YzAtMS44LDAuNi0zLjMsMS45LTQuNAoJCQljMS4zLTEuMSwyLjktMS43LDQuOC0xLjdjMS42LDAsMy4xLDAuNCw0LjMsMS4xYzEuMywwLjgsMi4yLDEuOSwyLjksMy4zbC00LjIsMi40Yy0wLjYtMS40LTEuNi0yLjItMy0yLjJjLTAuNiwwLTEsMC4xLTEuMywwLjQKCQkJYy0wLjMsMC4yLTAuNSwwLjYtMC41LDAuOWMwLDAuNCwwLjIsMC44LDAuNywxLjFjMC41LDAuMywxLjMsMC42LDIuNywxYzAuOSwwLjMsMS43LDAuNiwyLjMsMC44YzAuNiwwLjIsMS4yLDAuNSwxLjksMQoJCQljMC43LDAuNSwxLjIsMSwxLjUsMS43YzAuMywwLjcsMC41LDEuNiwwLjUsMi41YzAsMS45LTAuNywzLjQtMiw0LjVDMTI5LjgsNDkuNSwxMjgsNTAsMTI1LjgsNTB6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTUuNiw0MS4xYy0wLjUsNS4xLTQuOCw5LTEwLDljLTUuNiwwLTEwLjEtNC41LTEwLjEtMTAuMWMwLTUuNiw0LjUtMTAuMSwxMC4xLTEwLjFjMC44LDAsMS42LDAuMSwyLjQsMC4zCgkJCWMwLDAuMSwwLDAuMSwwLDAuMmMwLDAuNywwLjMsMS4zLDAuNywxLjdjLTAuNCwwLjQtMC43LDEtMC43LDEuN2MwLDEuMywxLDIuNCwyLjMsMi40YzAsMC4xLDAsMC4zLDAsMC40YzAsMS4zLDEuMSwyLjQsMi40LDIuNAoJCQljMC4zLDAsMC41LDAsMC43LTAuMUM1My42LDQwLjEsNTQuNSw0MC45LDU1LjYsNDEuMXoiLz4KCQk8Zz4KCQkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTQzLjUsNDEuNmMwLDEuMS0wLjksMi4xLTIuMSwyLjFjLTEuMSwwLTIuMS0wLjktMi4xLTIuMWMwLTEuMSwwLjktMi4xLDIuMS0yLjEKCQkJCUM0Mi42LDM5LjUsNDMuNSw0MC40LDQzLjUsNDEuNnoiLz4KCQkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTQ5LjYsNDQuMWMwLDAuOC0wLjYsMS40LTEuNCwxLjRjLTAuOCwwLTEuNC0wLjYtMS40LTEuNGMwLTAuOCwwLjYtMS40LDEuNC0xLjQKCQkJCUM0OSw0Mi43LDQ5LjYsNDMuMyw0OS42LDQ0LjF6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik00NiwzNi4yYy0wLjMtMC4zLTAuOC0wLjMtMS4xLDBjLTAuMywwLjMtMC4zLDAuOCwwLDEuMWMwLjMsMC4zLDAuOCwwLjMsMS4xLDBDNDYuMywzNyw0Ni4zLDM2LjUsNDYsMzYuMnoiCgkJCQkvPgoJCTwvZz4KCQk8cGF0aCBkPSJNNTUuOSw0MC44Yy0wLjEtMC4xLTAuMi0wLjEtMC4zLTAuMWMtMC45LTAuMS0xLjctMC44LTEuOC0xLjdjMC0wLjEtMC4xLTAuMi0wLjItMC4zYy0wLjEtMC4xLTAuMi0wLjEtMC4zLDAKCQkJYy0wLjIsMC4xLTAuNCwwLjEtMC42LDAuMWMtMS4xLDAtMi0wLjktMi0yYzAtMC4xLDAtMC4yLDAtMC4zYzAtMC4xLDAtMC4yLTAuMS0wLjNjLTAuMS0wLjEtMC4yLTAuMS0wLjMtMC4yCgkJCWMtMS4xLTAuMS0xLjktMC45LTEuOS0yYzAtMC41LDAuMi0xLDAuNi0xLjRjMC4yLTAuMiwwLjItMC40LDAtMC42Yy0wLjQtMC40LTAuNi0wLjktMC42LTEuNGMwLDAsMC0wLjEsMC0wLjEKCQkJYzAtMC4yLTAuMS0wLjQtMC4zLTAuNGMtMC44LTAuMi0xLjctMC4zLTIuNS0wLjNjLTIuOCwwLTUuNCwxLjEtNy40LDMuMWMtMiwyLTMuMSw0LjYtMy4xLDcuNGMwLDIuOCwxLjEsNS40LDMuMSw3LjQKCQkJYzIsMiw0LjYsMy4xLDcuNCwzLjFjMS40LDAsMi44LTAuMyw0LjEtMC45YzAuMi0wLjEsMC4zLTAuMywwLjItMC41Yy0wLjEtMC4yLTAuMy0wLjMtMC41LTAuMmMtMS4yLDAuNS0yLjUsMC44LTMuOCwwLjgKCQkJYy0yLjYsMC01LTEtNi44LTIuOEMzNyw0NSwzNiw0Mi42LDM2LDQwYzAtMi42LDEtNSwyLjgtNi44YzEuOC0xLjgsNC4yLTIuOCw2LjgtMi44YzAuNywwLDEuMywwLjEsMiwwLjJjMCwwLjYsMC4yLDEuMSwwLjYsMS41CgkJCWMtMC40LDAuNS0wLjYsMS4xLTAuNiwxLjdjMCwxLjQsMSwyLjUsMi4zLDIuOGMwLDAsMCwwLDAsMGMwLDEuNiwxLjMsMi44LDIuOCwyLjhjMC4xLDAsMC4zLDAsMC40LDBjMC4zLDEsMSwxLjcsMiwxLjkKCQkJYy0wLjMsMi4yLTEuNCw0LjItMyw1LjdjLTAuMiwwLjItMC4yLDAuNCwwLDAuNmMwLjIsMC4yLDAuNCwwLjIsMC42LDBjMS45LTEuNywzLTQuMSwzLjMtNi42QzU2LDQxLDU2LDQwLjksNTUuOSw0MC44eiIvPgoJCTxwYXRoIGQ9Ik0zOSw0MS42YzAsMS40LDEuMSwyLjUsMi41LDIuNWMxLjQsMCwyLjUtMS4xLDIuNS0yLjVjMC0xLjQtMS4xLTIuNS0yLjUtMi41QzQwLjEsMzkuMSwzOSw0MC4yLDM5LDQxLjZ6IE00MS41LDM5LjkKCQkJYzAuOSwwLDEuNywwLjcsMS43LDEuN2MwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzOS44LDQwLjcsNDAuNiwzOS45LDQxLjUsMzkuOXoiLz4KCQk8cGF0aCBkPSJNNDguMiw0NS45YzEsMCwxLjgtMC44LDEuOC0xLjhjMC0xLTAuOC0xLjgtMS44LTEuOGMtMSwwLTEuOCwwLjgtMS44LDEuOEM0Ni4zLDQ1LjEsNDcuMiw0NS45LDQ4LjIsNDUuOXogTTQ4LjIsNDMuMQoJCQljMC42LDAsMSwwLjUsMSwxcy0wLjUsMS0xLDFjLTAuNiwwLTEtMC41LTEtMVM0Ny42LDQzLjEsNDguMiw0My4xeiIvPgoJCTxwYXRoIGQ9Ik00Ni4zLDM3LjZjMC41LTAuNSwwLjUtMS4yLDAtMS43cy0xLjItMC41LTEuNywwcy0wLjUsMS4yLDAsMS43YzAuMiwwLjIsMC41LDAuNCwwLjksMC40QzQ1LjcsMzgsNDYuMSwzNy45LDQ2LjMsMzcuNnoKCQkJIE00NS4xLDM2LjVjMC4yLTAuMiwwLjQtMC4yLDAuNiwwczAuMiwwLjQsMCwwLjZjLTAuMiwwLjItMC40LDAuMi0wLjYsMEM0NSwzNi45LDQ1LDM2LjYsNDUuMSwzNi41eiIvPgoJCTxwYXRoIGQ9Ik00MC44LDM1LjVjMC0wLjUsMC40LTAuOSwwLjktMC45YzAuMiwwLDAuNC0wLjIsMC40LTAuNGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTEsMC0xLjgsMC44LTEuOCwxLjgKCQkJYzAsMC4yLDAuMiwwLjQsMC40LDAuNEM0MC42LDM1LjksNDAuOCwzNS43LDQwLjgsMzUuNXoiLz4KCQk8cGF0aCBkPSJNNTIuNCw0My4yYzAuMy0wLjMsMC40LTAuNiwwLjQtMWMwLTAuNC0wLjEtMC43LTAuNC0xYy0wLjItMC4yLTAuNC0wLjItMC42LDBjLTAuMiwwLjItMC4yLDAuNCwwLDAuNgoJCQljMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjRzLTAuMSwwLjMtMC4yLDAuNGMtMC4yLDAuMi0wLjIsMC40LDAsMC42YzAuMSwwLjEsMC4yLDAuMSwwLjMsMC4xUzUyLjMsNDMuMyw1Mi40LDQzLjJ6Ii8+CgkJPHBhdGggZD0iTTQzLjQsNDcuMmMwLjgsMCwxLjQtMC42LDEuNC0xLjRjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjMtMC4zLDAuNi0wLjYsMC42CgkJCWMtMC4yLDAtMC40LDAuMi0wLjQsMC40QzQzLDQ3LDQzLjIsNDcuMiw0My40LDQ3LjJ6Ii8+CgkJPHBhdGggZD0iTTUxLjUsNDguM2MtMC4xLTAuMi0wLjItMC4zLTAuNC0wLjNjLTAuMiwwLTAuMywwLjEtMC40LDAuM2MwLDAuMiwwLDAuMywwLjIsMC40YzAuMSwwLjEsMC4zLDAuMSwwLjUsMAoJCQlDNTEuNSw0OC42LDUxLjUsNDguNCw1MS41LDQ4LjN6Ii8+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTc0LjEsMzYuNGMwLDEuMS0wLjksMi4xLTIuMSwyLjFjLTEuMSwwLTIuMS0wLjktMi4xLTIuMWMwLTEuMSwwLjktMi4xLDIuMS0yLjEKCQkJCUM3My4yLDM0LjMsNzQuMSwzNS4yLDc0LjEsMzYuNHoiLz4KCQkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTY4LjgsNDAuN2MwLDAuOC0wLjYsMS40LTEuNCwxLjRjLTAuOCwwLTEuNC0wLjYtMS40LTEuNGMwLTAuOCwwLjYtMS40LDEuNC0xLjQKCQkJCUM2OC4yLDM5LjIsNjguOCwzOS45LDY4LjgsNDAuN3oiLz4KCQkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTYxLDQxLjdjLTAuMy0wLjMtMC44LTAuMy0xLjEsMGMtMC4zLDAuMy0wLjMsMC44LDAsMS4xYzAuMywwLjMsMC44LDAuMywxLjEsMEM2MS4zLDQyLjUsNjEuMyw0Miw2MSw0MS43eiIKCQkJCS8+CgkJPC9nPgoJCTxwYXRoIGQ9Ik02OS42LDM2LjRjMCwxLjQsMS4xLDIuNSwyLjUsMi41YzEuNCwwLDIuNS0xLjEsMi41LTIuNWMwLTEuNC0xLjEtMi41LTIuNS0yLjVDNzAuNywzMy45LDY5LjYsMzUsNjkuNiwzNi40eiBNNzIsMzQuNwoJCQljMC45LDAsMS43LDAuNywxLjcsMS43YzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43QzcwLjQsMzUuNSw3MS4xLDM0LjcsNzIsMzQuN3oiLz4KCQk8cGF0aCBkPSJNNjcuNCw0Mi41YzEsMCwxLjgtMC44LDEuOC0xLjhjMC0xLTAuOC0xLjgtMS44LTEuOGMtMSwwLTEuOCwwLjgtMS44LDEuOEM2NS41LDQxLjcsNjYuNCw0Mi41LDY3LjQsNDIuNXogTTY3LjQsMzkuNwoJCQljMC42LDAsMSwwLjUsMSwxcy0wLjUsMS0xLDFjLTAuNiwwLTEtMC41LTEtMVM2Ni44LDM5LjcsNjcuNCwzOS43eiIvPgoJCTxwYXRoIGQ9Ik02MS4zLDQzLjJjMC41LTAuNSwwLjUtMS4yLDAtMS43cy0xLjItMC41LTEuNywwcy0wLjUsMS4yLDAsMS43YzAuMiwwLjIsMC41LDAuNCwwLjksMC40QzYwLjcsNDMuNSw2MSw0My40LDYxLjMsNDMuMnoKCQkJIE02MC4xLDQyYzAuMi0wLjIsMC40LTAuMiwwLjYsMHMwLjIsMC40LDAsMC42Yy0wLjIsMC4yLTAuNCwwLjItMC42LDBDNjAsNDIuNCw2MCw0Mi4yLDYwLjEsNDJ6Ii8+CgkJPHBhdGggZD0iTTYyLjEsMzUuNWMwLTAuNSwwLjQtMC45LDAuOS0wLjljMC4yLDAsMC40LTAuMiwwLjQtMC40YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMSwwLTEuOCwwLjgtMS44LDEuOAoJCQljMCwwLjIsMC4yLDAuNCwwLjQsMC40QzYxLjksMzUuOSw2Mi4xLDM1LjcsNjIuMSwzNS41eiIvPgoJCTxwYXRoIGQ9Ik03My43LDQzLjJjMC4zLTAuMywwLjQtMC42LDAuNC0xYzAtMC40LTAuMS0wLjctMC40LTFjLTAuMi0wLjItMC40LTAuMi0wLjYsMGMtMC4yLDAuMi0wLjIsMC40LDAsMC42CgkJCWMwLjEsMC4xLDAuMiwwLjMsMC4yLDAuNHMtMC4xLDAuMy0wLjIsMC40Yy0wLjIsMC4yLTAuMiwwLjQsMCwwLjZjMC4xLDAuMSwwLjIsMC4xLDAuMywwLjFTNzMuNiw0My4zLDczLjcsNDMuMnoiLz4KCQk8cGF0aCBkPSJNNjQuOCw0Ny4yYzAuOCwwLDEuNC0wLjYsMS40LTEuNGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMy0wLjMsMC42LTAuNiwwLjYKCQkJYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRDNjQuNCw0Nyw2NC42LDQ3LjIsNjQuOCw0Ny4yeiIvPgoJCTxwYXRoIGQ9Ik03MC44LDQ2LjFjLTAuMS0wLjItMC4yLTAuMy0wLjQtMC4zYy0wLjIsMC0wLjMsMC4xLTAuNCwwLjNjMCwwLjIsMCwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMywwLjEsMC41LDAKCQkJQzcwLjgsNDYuNSw3MC44LDQ2LjMsNzAuOCw0Ni4xeiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=', //size has to be 150x80
        labels: {
            acceptAll: 'Accept all',
            save: 'Save preferences'
        },
        required: {
            tabs: [{
                id: 'your-privacy',
                title: 'Your Privacy',
                text: 'When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences, your device or used to make the site work as you expect it to. The information does not usually identify you directly, but it can give you a more personalized web experience. You can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, you should know that blocking some types of cookies may impact your experience on the site and the services we are able to offer.',
                label: ''
            },
            {
                id: 'strictly-necessary-cookies',
                title: 'Strictly Necessary Cookies',
                text: 'These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site may not work then.',
                label: 'Always enabled'
            }]
        },
        optional: {
            labels: {
                enabled: 'Enabled',
                disabled: 'Disabled'
            },
            tabs: [{
                id: 'analytics-cookies',
                title: 'analytics cookies',
                text: 'These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.',
                events: {
                    on() {
                        console.log('analytics on')
                    },

                    off() {
                        console.log('analytics off')
                        myFeverCookieBarWithOptions.expireCookie('_ga')
                        myFeverCookieBarWithOptions.expireCookie('_gid')
                        myFeverCookieBarWithOptions.expireCookie('_gat')
                    },

                    pageLoadOn() {
                        (function (i, s, o, g, r, a, m) {
                            i['GoogleAnalyticsObject'] = r
                            i[r] = i[r] || function () {
                                (i[r].q = i[r].q || []).push(arguments)
                            }, i[r].l = 1 * new Date()
                            a = s.createElement(o)
                            m = s.getElementsByTagName(o)[0]
                            a.async = 1
                            a.src = g
                            m.parentNode.insertBefore(a, m)
                        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')
                         
                         //clientId generated using cyrb53
                        ga('create', 'UA-12345', {'clientId': clientIDHashed})
                        ga('set', 'anonymizeIp', true)
                        ga('set', 'forceSSL', true)
                        ga('send', 'pageview')

                        console.log('analytics pageLoadOn')
                    },

                    pageLoadOff() {
                        (function (i, s, o, g, r, a, m) {
                            i['GoogleAnalyticsObject'] = r
                            i[r] = i[r] || function () {
                                (i[r].q = i[r].q || []).push(arguments)
                            }, i[r].l = 1 * new Date()
                            a = s.createElement(o)
                            m = s.getElementsByTagName(o)[0]
                            a.async = 1
                            a.src = g
                            m.parentNode.insertBefore(a, m)
                        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')

                        //clientId generated using cyrb53
                        ga('create', 'UA-12345', {'storage': 'none',  'clientId': clientIDHashed})
                        ga('set', 'anonymizeIp', true)
                        ga('set', 'forceSSL', true)
                        ga('send', 'pageview')
                        
                        console.log('analytics pageLoadOff')
                    }
                }
            },
            {
                id: 'functional-cookies',
                title: 'functional cookies',
                text: 'These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.',
                events: {
                    on() {
                        console.log('functional on')
                    },

                    off() {
                        console.log('functional off')
                    },

                    pageLoadOn() {
                        console.log('functional pageLoadOn')
                    },

                    pageLoadOff() {
                        console.log('functional pageLoadOff')
                    }
                }
            },
            {
                id: 'targetting-cookies',
                title: 'targetting cookies',
                text: 'These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.',
                events: {
                    on() {
                        console.log('targetting on')
                    },

                    off() {
                        console.log('targetting off')
                    },
                    
                    pageLoadOn() {
                        console.log('targetting pageLoadOn')
                    },
                    
                    pageLoadOff() {
                        console.log('targetting pageLoadOff')
                    }
                }
            }]
        }
    }
});

4. Events

Each tab you add to optional tabs, can be configured to react when the user enable/disable it. To achieve that, in each tab object, as in the example above, you must add a parameter called events, with four child events, on, off, pageLoadOn() & pageLoadOff() they will be invoked when the user push save/acceptsall/rejectsall buttons, and match the checked/uncheck state of the respective tab.

{
    id: 'targetting-cookies',
    title: 'targetting cookies',
    text: 'These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.',
    events: {
        on() {
            console.log('run if user accept cookies');
        },

        off() {
            console.log('run if user reject cookies');
        },

        pageLoadOn() {
            console.log('always run if previously accepted cookies')
        },
        
        pageLoadOff() {
            console.log('alaways run if previously rejected cookies or yet not acceped by the user')
        }   
    }
}

For example, in google analytics, the on event must implement the _ga, _gid and _gat cookies, and the off event must destroy those cookies.

It can have more cookie events for each tab (e.g.: hotjar, facebook), just insert the code to set up them inside each event and it will be called properly when needed.

5. Methods

5.1 Open Modal

If you need to open the control panel in another place of your website, you can invoke openModal() method like the code below:

document.querySelector('your-element').addEventListener('click', () => {
    myCookieBarWithOptions.openModal()
})

5.2 Expire Cookie

To expire a cookie - this could help you in the off event - you can invoke expireCookie() method using the proper name of the cookie you want to expire as an argument.

document.querySelector('your-element').addEventListener('click', () => {
    myCookieBarWithOptions.expireCookie('cookie-name-to-expire')
})