CookieConsent

Usage

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

Example

View 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 banner or as a page. This allows using the same cookie data for both presentation variations.
  • Use the banner variant 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 banner 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 supports Finnish, Swedish and English.

Variations

Banner

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 banner 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

Standalone version

The cookie consent can be used as a stand-alone version. It has all the styles and functionality in a minified file. This is especially useful for the site that do not have React or HDS in use.

View stand-alone banner example in Storybook

View stand-alone page example in Storybook