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 dependant behavior can be demonstrated.
Some examples change their behavior also 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
CookieConsent cookieConsent = new CookieConsent();
cookieConsent.setMessage("Tämä sivusto käyttää evästeitä parhaan kokemuksen tarjoamiseksi");
cookieConsent.setDismissLabel("Selvä");
cookieConsent.setLearnMoreLabel("Lue lisää");
cookieConsent.setLearnMoreLink("https://vaadin.com/terms-of-service");
add(cookieConsent);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
.cookie-consent-theming div.cc-window.cc-banner {
background-color: var(--lumo-primary-color);
box-shadow: var(--lumo-box-shadow-s);
color: var(--lumo-primary-contrast-color);
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-m);
}
.cookie-consent-theming a.cc-link {
opacity: 1;
padding: 0 var(--lumo-space-s);
}
.cookie-consent-theming a.cc-btn.cc-dismiss {
background-color: var(--lumo-base-color);
border-radius: var(--lumo-border-radius);
color: var(--lumo-primary-text-color);
font-size: var(--lumo-font-size-m);
line-height: var(--lumo-size-m);
min-width: 0;
padding: 0 calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius) / 2);
}79390985-6D82-4F30-A503-7166FC1E8C00