CookieConsent

DraftAccessible

The cookie consent component informs users about cookie usage. This banner is shown when they visit a website or an application for the first time.

Code

Code examples

import { CookieConsentContextProvider, CookieBanner } from 'hds-react';


// properties of the context are omitted to simplify the example
<CookieConsentContextProvider {...properties}>
  <CookieBanner />
</CookieConsentContextProvider>;

Rendered on a page

import { CookieConsentContextProvider, CookieSettingsPage } from 'hds-react';


// properties of the context are omitted to simplify the example
<CookieConsentContextProvider {...properties}>
  <CookieSettingsPage />
</CookieConsentContextProvider>;

Standalone version

The standalone version does not require other HDS components to be installed. The javascript can be included on the page and it has all needed styles and elements included.

// add these scripts to the <head> tag
<script>
  function checkCookieConsents() {
    const siteSettings = 'url to the settings json or settings as an object';
    const options = {
      // options
    };
    hds.CookieConsentCore.create(siteSettings, options);
  }
</script>


<script
  src="https://cdn.jsdelivr.net/npm/hds-js@latest/standalone/cookieConsent/index.js"
  onload="checkCookieConsents()"
></script>

View stand-alone banner example in Storybook

View stand-alone page example in Storybook

The required javascript file can also be downloaded and placed to your server. The file is in NPM. The path to the file is standalone/cookieConsent/index.js (download).

Packages

PackageIncludedStorybook linkSource link
HDS React
Yes
View in StorybookView source
HDS JS*
Yes
-View source
HDS Core**
Yes
-View source

* HDS JS includes standalone version of the cookie consent.

** HDS Core includes styles for the cookie consent. For the actual functionality React or Javascript version is needed.

Properties

PropertyDescriptionType
siteSettingsObjMain configurations of the Cookie Consent. See the detailed description.object
optionsAn object representing the instance settings.See the detailed description.object