Cookie Consent
Note | Commercial feature A commercial Vaadin subscription is required to use Cookie Consent in your project. |
Cookie Consent aims to help you comply with privacy laws such as GDPR and CCPA. They require users be informed and explicitly give consent to the usage of cookies.
Important | Scaled down examples
The examples on this page are scaled down so that their viewport-size-dependent behavior can be demonstrated.
Some examples also change their behavior based on your browser viewport size.
|
By default, the banner is shown at the top of the screen with a predefined text, a link to cookiesandyou.com which explains what cookies are, and a consent button.
Localization
Cookie Consent is fully customizable. You can customize the message, the "Learn More" link, the "Dismiss" button, as well as the component’s position.
new tab
<vaadin-cookie-consent
message="Tämä sivusto käyttää evästeitä parhaan kokemuksen tarjoamiseksi"
dismiss="Selvä"
learn-more="Lue lisää"
learn-more-link="https://vaadin.com/terms-of-service"
></vaadin-cookie-consent>Positioning
Cookie Consent can be positioned in the viewport in 4 non-stretched positions, or stretched across the top or bottom:
Top left | Top right |
Bottom left | Bottom right |
Top (stretch, default) |
Bottom (stretch) |
On smaller viewports, the component always takes up the entire width of the viewport.
Theming
Cookie Consent’s theme is modified using CSS.
new tab
connectedCallback() {
super.connectedCallback();
document.documentElement.classList.add('cookie-consent-theming');
}
render() {
return html`<vaadin-cookie-consent></vaadin-cookie-consent>`;
}08024FA4-E49A-4B1C-AB3E-B7053C8D3322