Directory

← Back

cookie-consent

A material design cookie consent.

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/Dabolus/cookie-consent on 2019-05-22 ]

<cookie-consent>

Published on webcomponents.org Travis build GitHub release

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

Features

  • 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

Installation

bower install --save Dabolus/cookie-consent#^2.0.0

Usage

Basic usage

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

Full customization

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

<cookie-consent text="" use-local-storage>
  <span slot="text">
    This website uses cookies 
    <iron-icon icon="editor:insert-emoticon"></iron-icon>
  </span>
  <a href="/policy" slot="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.

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--cookie-consent-background-color The background color of the cookie consent #323232
--cookie-consent-text-color The color of text in the cookie consent #f1f1f1
--cookie-consent-policy-link-color The color of the link to the cookie policy --light-accent-color
--cookie-consent-reject-text-color The main color of the button to reject the cookie policy --disabled-text-color
--cookie-consent-reject-background The background of the button to reject the cookie policy transparent
--cookie-consent-reject-ink-color The color of the ink displayed when the reject button is pressed --disabled-text-color
--cookie-consent-accept-text-color The main color of the button to accept the cookie policy --accent-color
--cookie-consent-accept-background The background of the button to accept the cookie policy transparent
--cookie-consent-accept-ink-color The color of the ink displayed when the accept button is pressed --accent-color
--cookie-consent-accept-button Mixin applied to the accept button {}
--cookie-consent-reject-button Mixin applied to the reject button {}
--cookie-consent-buttons Mixin applied to both the accept and reject buttons {}
--cookie-consent-policy-link Mixin applied to the policy link {}
--cookie-consent-text Mixin applied to the cookie consent text {}
--cookie-consent-toast Mixin applied to the cookie consent toast {}
--cookie-consent Mixin applied to the cookie consent {}

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

  • iron-ajax#^2.0.0
  • paper-toast#^2.0.0
  • paper-button#^2.0.0
  • iron-flex-layout#^2.0.0
  • paper-styles#2.0.0
Released
2017-05-21
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 1.0.0
Browser
Browser Independent

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online