A jQuery plugin to add a cookies consent banner on a website

cookit

A jQuery plugin to add a cookies consent banner on a website. It only weighs 4Ko!

Getting started

Download cookit.js (3Ko) and cookit.css (1Ko).

Usage

Include jQuery

Get the latest version of jQuery on jquery.com.

Include cookit.css and cookit.js

<link rel="stylesheet" href="cookit.css">
<script src="cookit.js"></script>

Call the plugin

$(document).ready(function() {
    $.cookit();
});

Options

You can also pass some informations to the plugin.

$(document).ready(function() {
    var options = {
        // Some options...
    };
    $.cookit(options);
});

Change the style

var options = {
    backgroundColor: '#fff',
    messageColor: '#000',
    linkColor: '#ffda10',
    buttonColor: '#ffda10'
}

Option	Description	Type	Default
backgroundColor	This is the background color of the cookie banner	String - CSS color	“#1c1c1c”
messageColor	This is the color of the consent text	String - CSS color	“#fff”
linkColor	This is the color of the link explaining more about cookies	String - CSS color	“#fad04c”
buttonColor	This is the background color of the consent button	String - CSS color	“#fad04c”

For a beautiful banner, it is better when linkColor is identical to buttonColor…

Change the content

var options = {
    messageText: "You have to accept cookies...",
    linkText: "More about cookies",
    linkUrl: "https://...",
    buttonText: "I accept !"
}

Option	Description	Type	Default
messageText	This is the text of the consent banner	String (allow HTML tag)	“Do you hungry ? Pursuing navigation on this site, you accept the use of cookies.”
linkText	This is the text of the link explaining more about cookies	String	“Learn more”
linkUrl	This is the URL of the source explaining more about cookies	String (URL)	“https://www.cookiesandyou.com”
buttonText	This is the text of the consent button	String	“I accept”

Demo

You can download here a demo of this plugin.

Download Details:

Author: ThibaudArros

GitHub: https://github.com/ThibaudArros/cookit

#javascript #jquery