Cookie Consent

Note
Commercial feature

A commercial Vaadin subscriptions 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.
Open in a
new tab
CookieConsent cookieConsent = new CookieConsent();
add(cookieConsent);

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.

Open in a
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.

Open in a
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);
}