Description

Get your website’s usage of cookies compliant with the European GDPR mandatory rules. Non-compliant organizations can risk fines up to 4% of the organization’s global yearly sales.

This tool will help you to easily implement cookies bar and allow you to rapidly customize its features.

See the examples bellow:

Developer example | Production example

 

Including the library

CSS (include in the head):

<link rel="stylesheet" href="path-to-library/dist/cookie.min.css" /> 

Javascript (include at the end of the body):

<script src="path-to-library/dist/cookie.min.js"></script>

 

How to use

Insert the following code after adding the js library at the end of the body just like below:

var cookie_data = {
    lang: "en",
    logo_url: "https://plan4privacy.eu/site/site/img/logo.svg"
};

initializeCookies(cookie_data);

 

In the example above there are two options:

Option	Type	Default	Description
lang	string	en	Defines the language in which you want to display the text.
logo_url	string	null	This is the path to the logo of the company. It must be absolute.

 

The list of available languages is the following :

• en (English);
• es (Spanish);
• pt (Portuguese);

 

You'll not need more than this to initialize, but if you're not satisfied with the styles there are options that you can use to change them to.

 

Styles

Before showing every option of the styles, here is a full example of the code :

var cookie_data = {
	lang: "en",
	logo_url: "https://plan4privacy.eu/site/site/img/logo.svg",
	styles: {
		stickyFooter: {
			bgColor: "#d0d1d0",
			textColor: "#000000",
			definitionsButton: {
				textColor: "#007e9c",
				borderColor: "transparent",
				hoverTextColor: "#007e9c",
				hoverBorderColor: "#007e9c"
			},
			acceptButton: {
				bgColor: "#007e9c",
				bgHoverColor: "transparent",
				borderColor: "#007e9c",
				hoverBorderColor: "#007e9c",
				textColor: "white",
				hoverTextColor: "#007e9c"
			}
		},
		modal: {
			closeButtonColor: "#000",
			header: {
				bgColor: "#ffffff",
				bottomBorderColor: "#d0d1d0"
			},
			middle: {
				bgColor: "#ffffff",
				navBar: {
					linkTextColor: "#6d6d6d",
					linkBorderColor: "transparent",
					linkActiveTextColor: "#000000",
					linkActiveBorderColor: "#007e9c"
				},
				details: {
					titleColor: "#000000",
					textColor: "#000000",
					checkSymbolColor: "#bc5592"
				}
			},
			footer: {
				bgColor: "#fff",
				provider: {
					textColor: "#000000",
					linkColor: "#007e9c",
					hoverLinkColor: "#007e9c",
					linkBorderColor: "transparent",
					hoverLinkBorderColor: "#007e9c"
				},
				acceptButton: {
					bgColor: "#007e9c",
					bgHoverColor: "transparent",
					borderColor: "#007e9c",
					hoverBorderColor: "#007e9c",
					textColor: "#fff",
					hoverTextColor: "#007e9c"
				}
			}
		}
	}
};

initializeCookies(cookie_data);

 

As you can see the styles are divided in various sections, lets get through them one by one:

 

stickyFooter

Option	Type	Default	Description
bgColor	string	null	Defines the background of the footer
textColor	string	null	Defines the color of the text which is at the left side of the stickyFooter

stickyFooter.definitionsButton

Option	Type	Default	Description
textColor	string	null	Initial color of the definitions button
borderColor	string	null	Initial color of the border of the the definitions button
hoverTextColor	string	null	Color of the definitions button when it's hovered
hoverBorderColor	string	null	Color of the border of the definitions buttons when it's hovered

stickyFooter.acceptButton

Option	Type	Default	Description
bgColor	string	null	Initial background color of the accept button
bgHoverColor	string	null	Background color when the accept button is hovered
borderColor	string	null	Initial border color of the accept button
hoverBorderColor	string	null	Border color when the accept button is hovered
textColor	string	null	Initial text color of the accept button
hoverTextColor	string	null	Text color of the accept button

modal

Option	Type	Default	Description
closeButtonColor	string	null	Color of the close button "X" in the top right corner of the modal

modal.header

Option	Type	Default	Description
bgColor	string	null	Initial background color of the header
bottomBorderColor	string	null	Inital bottom border color of the header

modal.middle

Option	Type	Default	Description
bgColor	string	null	Initial background color of the middle

modal.middle.navBar

Option	Type	Default	Description
linkTextColor	string	null	Initial text color of the links of the nav bar
linkBorderColor	string	null	Initial bottom border color of the links of the nav bar
linkActiveTextColor	string	null	Text color of the links of the nav bar when it's active
linkActiveBorderColor	string	null	Botttom border color of the links of the nav bar when it's active

modal.middle.details

Option	Type	Default	Description
titleColor	string	null	Initial color of the titles in the left side of the middle content
textColor	string	null	Initial color of the text on the left side of the middle content
checkSymbolColor	string	null	Initial color of the check symbol on the left side of the middle content

modal.footer

Option	Type	Default	Description
bgColor	string	null	Initial background color of the footer

modal.footer.provider

Option	Type	Default	Description
textColor	string	null	Initial provider text color
linkColor	string	null	Initial provider link color
hoverLinkColor	string	null	Provider link color when it's hovered
linkBorderColor	string	null	Initial provider link border color
hoverLinkBorderColor	string	null	Provider link border color when it's hovered

modal.footer.acceptButton

Option	Type	Default	Description
bgColor	string	null	Initial modal accept button background color
bgHoverColor	string	null	Modal accept button background color when it's hovered
borderColor	string	null	Initial modal accept button border color
hoverBorderColor	string	null	Modal accept button border color when it's hovered
textColor	string	null	Initial modal accept button text color
hoverTextColor	string	null	Modal accept button text color when it´s hovered