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.