Simple cookie banner

If you need a simple way to add customizeable cookie banner which is GDPR friendly, then use this plugin. There is a lot of different tools which can generate it into your site by adding a <script>, but this will add thirdparty scripts into your site, and can therefor be hard to customize and listen to.

Here is an example of how it looks like out of the box:

And here is the cookie corner which will be visible when the user has saved the settings they need.

Installation

Run the code below into the root of the project:

npm install simple-cookie-banner

// or

yarn add simple-cookie-banner

When its installed then add it to a index.js or main.js file, so its executed when loading the app: main.js

import CookieSettings from "simple-cookie-banner";

...
const cookieSettings = CookieSettings({
    // Insert settings here
});

If you want some default css, then add the following @import into your css file:

@import "~simple-cookie-banner/cookie-settings.css";

Then build the script with npm run dev or yarn dev or what ever you use, and then you should see the cookie banner.

Settings

There is a number of different settings for the cookie banner. Here is a list of them:

| Key | Description | Default | |---|---|---| | type | Choose basic if you don't want to show the points or else choose simple if you want to show it. | basic | | structure | Object which contains namings of classNames and id's | | | structure.appId | id of the wrapper element. | cookie-settings | | structure.innerWrapperClass | Classname of inner div of the wrapper. | cookie-settings__inner | | content.* | Object which contains all text related strings. | | | content.title | Title in the cookie banner | This website uses cookies | | content.description | The description right below the title in the cookie banner | We use cookies to personalize our content and ads, to show you social media features and to analyze our traffic. We also share information about your use of our website with our social media, advertising and analytics partners. Our partners may combine this data with other information that you have provided to them or that they have collected from your use of their services. | | content.showDetail | Show button text | Show details | | content.readmoreAboutPolicy | Insert read more about policy text. | Read more about our cookie policy here: | | content.readmoreAboutPolicyText | Policy link text. | Cookie policy | | content.closeDetail | Close button text | Close details | | content.corner | SVG or HTML which renders the corner right corner for users already saved cookie settings | SVG of cookie | | points | Array of different cookie categories. | | | points.*.label | Label shown beside the checkbox | | | points.*.key | Key saved in the cookie if the checkbox is checked | | | points.*.value | Default value for the given point | | | points.*.content | Description about the given cookie category shown in the detail area. | | | events | All the event hooks. Every key should have a function as value | | | events.onSubmit | This function will be executed on submittion of the cookie banner. As first argument you will get the selected points | null | | events.onChecked | This function will be executed when checking a point in the cookie banner. Argument 0 is the point object, argument 1 is a checked boolean | null | | events.onDetailToggle | This function will be executed when show/hide the detail area in the cookie banner. Argument 0 is boolean open. | null | | events.onDetailItem | This function will be executed when switching around the detail sidebar. Argument 0 is index of the point active. | null | | events.onCornerClicked | This function will be executed when clicking the corner button. | null | | events.onCornerLoad | This function will be executed when the corner button is loaded. | null | | events.onLoad | This function will be executed when the cookie banner is loaded. | null | | policyLink | Insert the link to the policy page | false | | delay | ms. to wait until showing the cookie banner | 300 | | cookieDays| How many days should the cookie be saved with the settings? | 365 | | cookieName | The name of the cookie banner settings cookie. | cookie-settings | | cookieDomain | The domain of the cookie with the settings. | false | | useCorner | If we need a way to open the modal again, then you can use the corner icon. | false | | buttons| Is the array of CTA's in the banner, you can also add custom buttons. | array |

Cookie settings change

If you want to change the settings yourself, then you can change it by using the object functions returned when initiating the CookieSettings() method. It will return the following functions:

{   
    // Open the cookie banner
    open: function(){},
    
    // Close the cookie banner
    close: function(){},

    // Get the current settings (false: not chosen yet, 1: if basic then accepted, 0: if basic then declined, array: if simple then array of the selected options)
    getSettings: function(){},
    
    // Save settings by selected point keys in array.
    saveSettings: function (selectedPointKeys = []),

    // Save setting by key and isChecked value.
    saveSetting: function(pointKey, isChecked = false)
}

You can use the cookieSettings.saveSettings(selectedPointKeys) function to update all the user cookie settings. You can also update only 1 setting with the cookieSettings.saveSetting(pointKey, isChecked = false).

Cookie buttons

Here is an example of how you can use the buttons array:

[
    {type: 'decline', label: 'No thanks'},
    {type: 'submit', label: 'Ok'},
]

Here is the types of buttons:

• decline will decline all the points.
• submit will accept only the selected points.
• accept-all will accept all points
• custom will need a new parameter onClick which is the function it will execute on click.