EU Cookie Consent HTML5 Web Component

AcidJs.XCookieConsent is a ready-made, fully customizable solution to the EU Cookie Law, wrapped as a custom HTML5 Web Component.

The component is being used on this blog as well. If you have dismissed the cookie consent bar, click the button below to open show it again:

Show Cookie Consent Bar

Using the Tag *

First, go to the demo page and download the sample project, then try one of the following (you need just one instance of the tag on your page).

[sourcecode language=”xml”]
<acidjs-xcookie-consent>
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent position="top" dismiss-button-text="Understood">
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent dir="rtl"></acidjs-xcookie-consent>
[/sourcecode]

* The message should be set between the <acidjs-xcookie-consent></acidjs-xcookie-consent> tag and HTML is supported. If no content is set, the default text will be “This website uses cookies to ensure you get the best experience“.

HTML Attributes of the Tag

Apart from the standard HTML attributes, the following component-specific ones are supported:

• position – optional position of the cookie consent bar. By default, position is "bottom", the possible value is "top".
• dismiss-button-text – optional custom text for the dismiss button. If not set, the default value is "Got it!"

Direction is also supported – you could try dir="rtl" or dir="ltr" (default).

JavaScript Methods of the Tag

Apart from the standard JavaScript methods, getters and setters, the following component specific methods are also supported:

• show() – to programmatically show the cookie consent bar. Calling this method will, however not delete the _acidjs_xcookie_consent_dismissed cookie.

  [sourcecode language=”javascript”]// JavaScript
  document.querySelector("acidjs-xcookie-consent").show();
  // jQuery
  $("acidjs-xcookie-consent").get(0).show();[/sourcecode]

• hide() –  to programmatically hide the cookie consent bar. This will, however not set the _acidjs_xcookie_consent_dismissed cookie.  Cookie will be set only if user clicks the button to dismiss the message.

  [sourcecode language=”javascript”]// JavaScript
  document.querySelector("acidjs-xcookie-consent").hide();
  // jQuery
  $("acidjs-xcookie-consent").get(0).hide();
  [/sourcecode]

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.