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.

  • 7 Users Found This Useful
Was this answer helpful?

Also Read

How to Install a New WordPress Theme

The most popular Content Management System (CMS) on the Internet, WordPress, makes creating a new...

A Complete Guide on TLDs

All about Top Level Domains (TLDs) Settling on a domain for your website can be an uphill...

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...

10 Ways to Make Your Website Accessible

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