<vaadin-cookie-consent>
Live Demo ↗
|
API documentation ↗
<vaadin-cookie-consent> is a web component used for showing a cookie consent banner the first time a user visits the application. Cookie Consent is part of the Vaadin components.
Getting Started
Install Vaadin Cookie Consent in your project
$ bower install --save vaadin/vaadin-cookie-consent
Import Vaadin Cookie Consent
Add html import
<link rel="import" href="../../bower_components/vaadin-cookie-consent/vaadin-cookie-consent.html">
Use Vaadin Cookie Consent
Create your first Vaadin Cookie Consent
<vaadin-cookie-consent></vaadin-cookie-consent>
Install License Key
After one day using Vaadin Cookie Consent in a development environment you will see a pop-up that asks you to enter the license key.
You can get your trial key from https://vaadin.com/pro/licenses.
If the license is valid, it will be saved to the local storage of the browser and you will not see the pop-up again.
Customizing Vaadin Cookie Consent
<vaadin-cookie-consent
message="We are using cookies to make your visit here awesome!"
dismiss="Accept"
learn-more="Why?"
learn-more-link="https://yourdomain.com/terms-of-service">
</vaadin-cookie-consent>
The file structure for Vaadin components
Vaadin components use the Lumo theme by default.
-
src/vaadin-cookie-consent.html
Unstyled component.
-
theme/lumo/vaadin-cookie-consent.html
Component with Lumo theme.
-
vaadin-cookie-consent.html
Alias for theme/lumo/vaadin-cookie-consent.html
Running demos and tests in browser
-
Fork the vaadin-cookie-consent
repository and clone it locally.
-
Make sure you have npm installed.
-
When in the vaadin-cookie-consent
directory, run npm install
and then bower install
to install dependencies.
-
Make sure you have polymer-cli installed globally: npm i -g polymer-cli
.
-
Run polymer serve --open
, browser will automatically open the component API documentation.
-
You can also open demo or in-browser tests by adding demo or test to the URL, for example:
Running tests from the command line
- When in the
vaadin-cookie-consent
directory, run polymer test
Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.
Following the coding style
We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running gulp lint
, which will automatically lint all .js
files as well as JavaScript snippets inside .html
files.
Contributing
To contribute to the component, please read the guideline first.
License
Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.
Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.