{"id":15464436,"url":"https://github.com/dabolus/cookie-consent","last_synced_at":"2025-04-28T12:21:50.328Z","repository":{"id":57741201,"uuid":"91174469","full_name":"Dabolus/cookie-consent","owner":"Dabolus","description":"A material design cookie consent.","archived":false,"fork":false,"pushed_at":"2018-11-13T21:10:49.000Z","size":345,"stargazers_count":11,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T21:06:19.620Z","etag":null,"topics":["bower","cookie-consent","polymer","polymer-element","web-component"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dabolus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-13T12:57:44.000Z","updated_at":"2022-08-28T16:46:42.000Z","dependencies_parsed_at":"2022-09-09T06:01:41.814Z","dependency_job_id":null,"html_url":"https://github.com/Dabolus/cookie-consent","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fcookie-consent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fcookie-consent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fcookie-consent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fcookie-consent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dabolus","download_url":"https://codeload.github.com/Dabolus/cookie-consent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311395,"owners_count":21569021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bower","cookie-consent","polymer","polymer-element","web-component"],"created_at":"2024-10-02T00:36:06.462Z","updated_at":"2025-04-28T12:21:50.307Z","avatar_url":"https://github.com/Dabolus.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003ccookie-consent\\\u003e\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Dabolus/cookie-consent)\n[![Travis build](https://img.shields.io/travis/Dabolus/cookie-consent.svg)](https://travis-ci.org/Dabolus/cookie-consent)\n[![GitHub release](https://img.shields.io/github/release/Dabolus/cookie-consent/all.svg)](https://github.com/Dabolus/cookie-consent)\n\n_[Demo and API docs](https://www.webcomponents.org/element/Dabolus/cookie-consent)_\n\nA great, simple and fully customizable material design cookie consent that automatically\nshows up only to the users subject to the cookie law (EU users).\n\n## Features\n- Ready out of the box. Just include it and insert a `\u003ccookie-consent\u003e\u003c/cookie-consent\u003e`\n  in your web app and you are ready to go!\n- Fully customizable. It can be completely styled and it supports a lot of properties that\n  allows you to easily change its default behavior.\n- Easily detect what the user does. The readonly `cookies-status` property can be binded to\n  detect whether the user consent is `pending`, `accepted` or `rejected`. It also fires a\n  `cookies-status-changed` event when the user responds, so you can wait for the user to\n  accept or reject the cookies before doing something with their data.\n- Tested using the [web-component-tester](https://github.com/Polymer/web-component-tester)\n\n## Installation\n```\nbower install --save cookie-consent\n```\n\n## Usage\n#### Basic usage\n```html\n\u003ccookie-consent\u003e\u003c/cookie-consent\u003e\n```\n#### Custom text, policy link and consent rejection\n```html\n\u003ccookie-consent\n  text=\"This website uses yummy cookies\"\n  policy-link=\"/policy\"\n  rejectable\u003e\n\u003c/cookie-consent\u003e\n```\n\n#### Full customization\nYou can even set an empty text and then use a span with the class `.text` to insert anything\nyou want (icons, etc.). The same can be done with the policy link. Just use the `.policy-link`\nclass in an anchor tag inside the `cookie-consent`.\n```html\n\u003ccookie-consent use-local-storage\u003e\n  \u003cspan class=\"text\"\u003e\n    This website uses cookies \n    \u003ciron-icon icon=\"editor:insert-emoticon\"\u003e\u003c/iron-icon\u003e\n  \u003c/span\u003e\n  \u003ca href=\"/policy\" class=\"policy-link\"\u003eYay!\u003c/a\u003e\n\u003c/cookie-consent\u003e\n```\n\n_**Note:** the user response is saved by default in a permanent cookie.\nYou can change this behavior by adding the `use-local-storage`\nor the `use-session-storage` properties._\n\n## Styling\n\nThe following custom properties and mixins are available for styling:\n\n| Custom property                      | Description                                                      | Default                 |\n| ------------------------------------ | ---------------------------------------------------------------- | ----------------------- |\n| `--cookie-consent-background-color`  | The background color of the cookie consent                       | `#323232`               |\n| `--cookie-consent-text-color`        | The color of text in the cookie consent                          | `#f1f1f1`               |\n| `--cookie-consent-policy-link-color` | The color of the link to the cookie policy                       | `--light-accent-color`  |\n| `--cookie-consent-reject-text-color` | The main color of the button to reject the cookie policy         | `--disabled-text-color` |\n| `--cookie-consent-reject-background` | The background of the button to reject the cookie policy         | `transparent`           |\n| `--cookie-consent-reject-ink-color`  | The color of the ink displayed when the reject button is pressed | `--disabled-text-color` |\n| `--cookie-consent-accept-text-color` | The main color of the button to accept the cookie policy         | `--accent-color`        |\n| `--cookie-consent-accept-background` | The background of the button to accept the cookie policy         | `transparent`           |\n| `--cookie-consent-accept-ink-color`  | The color of the ink displayed when the accept button is pressed | `--accent-color`        |\n| `--cookie-consent-accept-button`     | Mixin applied to the accept button                               | `{}`                    |\n| `--cookie-consent-reject-button`     | Mixin applied to the reject button                               | `{}`                    |\n| `--cookie-consent-buttons`           | Mixin applied to both the accept and reject buttons              | `{}`                    |\n| `--cookie-consent-policy-link`       | Mixin applied to the policy link                                 | `{}`                    |\n| `--cookie-consent-text`              | Mixin applied to the cookie consent text                         | `{}`                    |\n| `--cookie-consent-toast`             | Mixin applied to the cookie consent toast                        | `{}`                    |\n| `--cookie-consent`                   | Mixin applied to the cookie consent                              | `{}`                    |\n\nThis 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`.\nIn order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabolus%2Fcookie-consent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabolus%2Fcookie-consent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabolus%2Fcookie-consent/lists"}