Cookie banner

How the cookie banner is handled

By default, the Cookie Manager library is configured to display or hide a cookie banner setup within your service. Without any extra configuration, the library is configured out-of-the-box to work with the template listed below.

In short, the library works by binding event listeners to the button defined within each action, with these actions being specified within the config.

Each action defines:

• How consent should be affected
• What confirmation message should be shown

An example action of an action and how it works:

{
    name: 'accept',
    buttonClass: 'cookie-banner-accept-button',
    confirmationClass: 'cookie-banner-accept-message',
    consent: true
}

This action specifies that upon an element with the class cookie-banner-accept-button (within the cookie banner) being clicked:

1. We consent to all optional cookie categories.
2. Any elements with the class cookie-banner-accept-message (within the cookie banner) should be shown.
3. A CookieBannerAction event is then emitted with the activated action’s name (in this case, ‘accept’) being passed to any listening callbacks.

More information about the cookie banner’s functionality and how it can be configured to support a variety of different action/message (stage-based) cookie banners can be found within the cookie banner configuration options.

HTML / Nunjucks template

Here is an example of a cookie banner (utilising the GOV.UK Frontend ‘Cookie Banner’ component). Code has been provided for both HTML and Nunjucks. See the GOV.UK Frontend Design System for more about this component

Cookies on [name of service]

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies

        
<div class="govuk-cookie-banner cookie-banner" data-nosnippet="" role="region" aria-label="Cookies on [name of service]" hidden>
   <div class="govuk-cookie-banner__message govuk-width-container cookie-banner-message">
      <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
            <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
            <div class="govuk-cookie-banner__content">
               <p class="govuk-body">We use some essential cookies to make this service work.</p>
               <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
            </div>
         </div>
      </div>
      <div class="govuk-button-group">
         <button type="button" class="govuk-button cookie-banner-accept-button" data-module="govuk-button">
         Accept analytics cookies
         </button>
         <button type="button" class="govuk-button cookie-banner-reject-button" data-module="govuk-button">
         Reject analytics cookies
         </button>
         <a class="govuk-link" href="#">View cookies</a>
      </div>
   </div>
   <div class="govuk-cookie-banner__message govuk-width-container cookie-banner-accept-message" role="alert" hidden="">
      <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
            <div class="govuk-cookie-banner__content">
               <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
            </div>
         </div>
      </div>
      <div class="govuk-button-group">
         <button class="govuk-button cookie-banner-hide-button" data-module="govuk-button">
         Hide this message
         </button>
      </div>
   </div>
   <div class="govuk-cookie-banner__message govuk-width-container cookie-banner-reject-message" role="alert" hidden="">
      <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
            <div class="govuk-cookie-banner__content">
               <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
            </div>
         </div>
      </div>
      <div class="govuk-button-group">
         <button class="govuk-button cookie-banner-hide-button" data-module="govuk-button">
         Hide this message
         </button>
      </div>
   </div>
</div>

          
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{% set html %}
  <p class="govuk-body">We use some essential cookies to make this service work.</p>
  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
{% endset %}

{% set acceptHtml %}
  <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
{% endset %}

{% set rejectHtml %}
  <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
{% endset %}

{{ govukCookieBanner({
  classes: 'cookie-banner',
  ariaLabel: "Cookies on [name of service]",
  hidden: true,
  messages: [
    {
      classes: 'cookie-banner-message',
      headingText: "Cookies on [name of service]",
      html: html,
      actions: [
        {
          classes: 'cookie-banner-accept-button',
          text: "Accept analytics cookies",
          type: "button"
        },
        {
          classes: 'cookie-banner-reject-button',
          text: "Reject analytics cookies",
          type: "button"
        },
        {
          text: "View cookies",
          href: "#"
        }
      ]
    },
    {
      classes: 'cookie-banner-accept-message',
      html: acceptHtml,
      role: "alert",
      hidden: true,
      actions: [
        {
          classes: 'cookie-banner-hide-button',
          text: "Hide this message"
        }
      ]
    },
    {
      classes: 'cookie-banner-reject-message',
      html: rejectHtml,
      role: "alert",
      hidden: true,
      actions: [
        {
          classes: 'cookie-banner-hide-button',
          text: "Hide this message"
        }
      ]
    }
  ]
}) }}

Warning It is important to ensure the cookie banner is has the `hidden` attribute when the DOM / page is first loaded. The Cookie Manager library will un-hide the banner when appropriate.

Default configuration

The default config for the cookie banner is:

{
  cookieBanner: {
    class: 'cookie-banner',
    actions: [
      {
          name: 'accept',
          buttonClass: 'cookie-banner-accept-button',
          confirmationClass: 'cookie-banner-accept-message',
          consent: true
      },
      {
          name: 'reject',
          buttonClass: 'cookie-banner-reject-button',
          confirmationClass: 'cookie-banner-reject-message',
          consent: false
      },
      {
          name: 'hide',
          buttonClass: 'cookie-banner-hide-button'
      }
    ]
  }
}

You can see the classes in this config used on the messages and buttons on the template above.

Using this default config with the above template should set up a cookie banner that works out of the box with the cookie-manager library,

Note: To disable the cookie banner functionality, set the value of configuration property disableCookieBanner within config category additionalOptions to true when initializing the library.