How to Add a Cookie Bar

Almost all websites use cookies - little data files - to store information in peoples' web browsers. Some websites contain hundreds of them. As of May 2011, many European countries passed what was called a Cookie law. The Cookie Law is a piece of privacy legislation that requires websites to get consent from visitors to store or retrieve any information on a computer, smartphone or tablet. It was designed to protect online privacy, by making consumers aware of how information about them is collected and used online, and give them a choice to allow it or not.

If your website has European consumers, then you're required by law to have a cookie bar to notify them. Luckily, there is a simple script that can be added to any website in order to add a cookie bar. Developed by Cookie Info Script, the following code is an easy solution to comply with the European Cookie Law and it requires a very basic understanding of programming.

<script type="text/javascript" id="cookieinfo"
    src="//cookieinfoscript.com/js/cookieinfo.min.js">
</script>

Add the code just before the closing </body> tag in your website, in your current footer.tpl file.

The code will display a floating banner at the bottom of the website informing the user that the site is using cookies and give them a link to another website with more information about cookies. When the user clicks the "âœ–" button the banner will set a cookie remembering that the banner was acknowledged so the same user will not be bothered again.

Customization

The script is highly customizable, giving you the freedom to create a cookie bar that fits into your website easily. Simply add the following data attributes after the source (src) code:

data-font-size - text size of the message and the link (default: 14px)
data-font-family - font family of the message and the link (default: verdana, arial, sans-serif)
data-text-align - position of the text (default: center)
data-height - banner height (default: 31 pixels)
data-fg - banner text color (default: #333)
data-bg - banner background color (default: #eee)
data-link - link text color (default: #31A8F0)
data-divlink - button text color (default: #000)
data-divlinkbg - button background color (default: #F1D600)
data-position - banner position, top or bottom (default: bottom)
data-message - message text (default: We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.)
data-linkmsg - link text (default: More info)
data-moreinfo - where the visitor can read more about cookies (default: https://wikipedia.org/wiki/HTTP_cookie
data-close-text - the text/symbol for the close button (default: âœ–)
data-effect - effect to use (default: null)
data-cookie - name for the cookie to store the cookiebanner acceptance information (default: we-love-cookies)
data-expires - cookie expiry date/time (default is Infinity aka "Fri, 31 Dec 9999 23:59:59 GMT").
data-cookie-path - Path to set for the cookie
data-mask - whether to create a mask over the viewport (default: false). Clicking anywhere on the mask is considered as acceptance.
data-mask-opacity - the opacity to use for the window mask (default: 0.5)
data-mask-background - optional background style you wish to apply to the mask (default: #999)
data-zindex - z-index to set on the notice (default: 255). If mask is used, the notice's z-index is automatically incremented by 1 so it appears above the mask)
data-accept-on-scroll - when is set true window scrolling is considered as acceptance. (default: false)
data-tracking - Tracking pixel (default: Off - To enable you will need to enter a (image) tracking url or script. Example: http://www.yourdomain.com/tracking.php?pixel)

The resulting code could look something like this:

<script type="text/javascript" id="cookieinfo"
    src="/widgets/cookieinfo.min.js"
    data-message="We use cookies for better user experience. By continuing to visit this site you agree to our use of cookies."
    data-linkmsg="More info"
    data-moreinfo="My-Cookie-Policy.html"
    data-cookie="choose-your-cookie-name"
</script>

If you want to know more about the EU's Cookie Law, visit https://www.cookielaw.org/the-cookie-law/

For more information, feel free to visit Cookie Info Script's official website.

For help with a Nuagerie service, open or follow up on a support request in your Client Area. For general questions, use our contact form.

Documentation