Demo and API docs

A great, simple and fully customizable material design cookie consent that automatically shows up only to the users subject to the cookie law (EU users).

• Ready out of the box. Just include it and insert a <cookie-consent></cookie-consent> in your web app and you are ready to go!
• Fully customizable. It can be completely styled and it supports a lot of properties that allows you to easily change its default behavior.
• Easily detect what the user does. The readonly cookies-status property can be binded to detect whether the user consent is pending, accepted or rejected. It also fires a cookies-status-changed event when the user responds, so you can wait for the user to accept or reject the cookies before doing something with their data.
• Tested using the web-component-tester

bower install --save cookie-consent

<cookie-consent></cookie-consent>

<cookie-consent
  text="This website uses yummy cookies"
  policy-link="/policy"
  rejectable>
</cookie-consent>

You can even set an empty text and then use a span with the class .text to insert anything you want (icons, etc.). The same can be done with the policy link. Just use the .policy-link class in an anchor tag inside the cookie-consent.

<cookie-consent use-local-storage>
  <span class="text">
    This website uses cookies 
    <iron-icon icon="editor:insert-emoticon"></iron-icon>
  </span>
  <a href="/policy" class="policy-link">Yay!</a>
</cookie-consent>

Note: the user response is saved by default in a permanent cookie. You can change this behavior by adding the use-local-storage or the use-session-storage properties.

The following custom properties and mixins are available for styling:

This element uses paper-toast to display the consent. paper-toast applies the mixin --paper-font-common-base but does not import paper-styles/typography.html. In order to apply the Roboto font to this element, make sure you've imported paper-styles/typography.html.