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 or contact us by opening a support ticket or our live chat feature.

  • site Web, Website, cookie
  • 7 Users Found This Useful
Was this answer helpful?

Related Articles

 A Comprehensive Guide to Content Management Systems (CMS)

A Content Management System (CMS) allows for the creation, modification, and storage of digital...

 SEO-friendly URLs

Search engine optimization (SEO) is the process of affecting the online visibility of a website...

 Difference Between Single, Multiple and Wildcard SSL

Secure Sockets Layer (also known as SSL) is the known industry standard used by millions of...

 10 Ways to Make Your Website Accessible

Every website owner wants to attract as many visitors as possible. However, few take the steps...

 Adding and Editing Your Website's Photos

First impressions are made in as little as seven seconds. But on your website, it’s even...