Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Cookie web components for displaying consent and managing cookie data

By  
Binh Bui
Binh Bui
·
On Jun 27, 2018 6:00:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

Cookies are wonderful. They can serve many purposes: analytics, advertising, chat tool, as well as plenty of other services. However, companies will need to handle that data with more care now.

According to Recital 30 of the General Data Protection Regulation - GDPR, if cookies can identify an individual, they will be considered personal data. Regardless of the recent EU regulations change, we think that it is a good practice for companies to be open and transparent about how they use and store user data.

In this article, we will introduce a list of web components, which can help you deal with cookies and user consent.

scary-cookie-consent by Scarygami

scary-cookie-consent lets you display cookie consents with ease. The component provides a configuration for changing the cookie’s name, expiry date and link to the policy. For the paragraph, merely write your desired message inside the tag.

Advanced configurations include cookie domain, where the cookie will be readable, and cookie path, the scope of the consent cookie; the default values should fit most of the cases. There are some basic CSS custom properties available for setting the colors of the text and the background.

DemoComponent

cookie-consent by Dabolus

Not as scary as the above but still does its job, cookie-consent is a simple and fully customizable material design cookie consent. The component appears with a smooth slide-up animation. Compared to scary-cookie-consent, it has several more options. For example, altering the text of the confirm/reject buttons or the policy button, and setting how many seconds it takes before the popup appears.

For more advanced usage, you may choose to either use local or session storage. Additionally, cookie-consent supports using third-party location API to retrieve the user’s location. Styling customization includes changing colors of text, background, etc.

DemoComponent

iron-cookie by wincinderith

Last but not least, iron-cookie, a component for managing cookies. iron-cookie can store your assigned cookie data, providing only a name for the key. Beyond the basic usage, it is recommended to use expires to set the length before terminating, turn on the secure flag for accepting only HTTPS requests, and enable uri-safe to encode and decode the cookie. If you data bind the cookie value, then always use the uri-safe.

DemoComponent

Compatibility table

The table below will shortly summarize the component info and compatibility on multiple platforms. Browsers include Chrome Canary, Safari Tech Preview, Opera, Firefox Nightly, Edge and Internet Explorer 11.

Component

Library

Mobile

Browsers

scary-cookie-consent

Polymer#1.9 - 2

C,S,O,F,E,I

cookie-consent

Polymer^2.0.0

C,S,O,F,E,I

iron-cookie

Polymer^2.0.0

C,S,O,F,E,I

Final thoughts

With GDPR now in place, companies have to handle users’ data with more care and full transparency, and cookies are no exception. These web components will definitely come in handy to help you comply with the changes, and they are supported natively by most modern browsers.

P/S Hey readers, we will be having a one-month break for Web Components Wednesday series. See you in August and wish you all a blast and energetic summer!

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui