WeMakeSites

Site Sesarch

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.

thumb

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:

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

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

* 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.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").show();
    // jQuery
    $("acidjs-xcookie-consent").get(0).show();
  • 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.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").hide();
    // jQuery
    $("acidjs-xcookie-consent").get(0).hide();

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.

I use cookies to ensure you get the best experience.