CookieConsent

Usage

This documentation page is about HDS CookieCompliance component. If you are looking for documentation about cookies in general, please refer to the HDS cookie pattern documentation page.

Example

View modal example in Storybook

Principles

• Include the cookie consent component on every page of the service. The user may arrive on any page of the service (e.g. via a search engine). The component checks, if it should be rendered or not.
• The cookie consent can be rendered either as a modal or as a page. This allows using the same cookie data for both presentation variations.
  • Use the modal variant as a banner when the user enters the site.
  • Use the page variant as a full page that the user can access from the page Footer element.
• You must offer the cookie consent modal and page in all languages that your service supports.
  • By default, the cookie consent banner should use the same language as the service is using.
  • The component has its language switcher so the user can easily switch the language of the dialog even if they opened the service with a language they do not understand.
  • The component supports Finnish, Swedish and English.

Variations

Modal

The default banner variant opens at the bottom of the viewport. It is opened if the consent for cookies has not been given or if the cookies have changed. The banner can be expanded to view and change cookie settings.

View modal example in Storybook

Rendered on a page

The cookie consent expanded settings page can be rendered as a separate page. This is used to create a cookie page that the user can access via a link in the Footer element. This allows the user to view or edit cookie settings after the initial consent has been given.

View page example in Storybook