Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Help users to Control cookies

Overview

Use the control cookies pattern to allow users to choose which cookies are enabled when using your service.

There are two parts to this pattern:

  • cookies banner
  • cookies preferences page

Cookies banner

Cookies banner - English

Important information:

If you cannot see the cookie banner in the example you will need to delete the 'ons_cookie_message_displayed' cookie from your browser

Example Cookies Banner contents

Nunjucks

{% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
{{
    onsCookiesBanner()
}}

Nunjucks macro options

NameTypeRequiredDescription
langstringfalseAll parameters have defaults for both English and Welsh. If 'lang': 'cy' is provided the banner will render with Welsh language defaults. If 'lang': 'en' or no lang parameter is provided then English language defaults will be used to render the banner.
ariaLabelstringfalseAria label for the cookie banner region (default is 'cookies banner')
statementTitlestringfalseThe title text for content for the cookie banner that prefixes the serviceName (default is 'Cookies on')
serviceNamestringfalseThe name of the service/website that follows the statementTitle (default is 'ons.gov.uk')
statementTextstringfalseThe text content for the cookie banner. HTML is allowed to create paragraphs. Default is: ”Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work. We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.”
acceptedTextstringfalseThe text content when cookies have been accepted. Will prefix the preferencesText (default is 'You’ve accepted all additional cookies.')
rejectedTextstringfalseThe text content when cookies have been rejected. Will prefix the preferencesText (default is 'You’ve rejected all additional cookies.')
preferencesTextstringfalseThe text content for the confirmation cookie message. HTML is allowable to embed links. Will follow the acceptedText or rejectedText (default is 'You can change your cookie preferences at any time.')
acceptButtonTextstringfalseText for the accept button (default is 'Accept additional cookies')
rejectButtonTextstringfalseText for the reject button (default is 'Reject additional preferences')
confirmationButtonTextstringfalseText for the confirmation banner button (default is 'Hide')
contextSuffixstringfalseAdditional descriptive text for the confirmation banner button to assist screen readers (default is 'the cookie message')
settingsLinkTextstringfalseText for link to cookie settings page (default is 'View cookies')
settingsLinkTextURLstringfalseURL for the cookies settings page (default is '/cookies')
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport

HTML

<div class="ons-cookies-banner" role="region" aria-label="Cookies banner">
  <div class="ons-container ons-cookies-banner__primary">
    <div class="ons-grid">
      <div class="ons-grid__col ons-col-8@m">
        <h2 class="ons-cookies-banner__title ons-u-mb-xs">Cookies on ons.gov.uk</h2>
        <div class="ons-cookies-banner__statement">
          <p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to
            make this website work.</p>
          <p>We would like to set <a href="/cookies">additional cookies</a> to remember your settings and understand how
            you use the site. This helps us to improve our services. </p>
        </div>
      </div>
    </div>
    <div class="ons-grid ons-grid--flex ons-u-mt-s">
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn"
          data-button="accept">
          <span class="ons-btn__inner"><span class="ons-btn__text">Accept additional cookies</span>
          </span>
        </button>
      </div>
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn"
          data-button="reject">
          <span class="ons-btn__inner"><span class="ons-btn__text">Reject additional cookies</span>
          </span>
        </button>
      </div>
      <div class="ons-grid__col">
        <a class="ons-cookies-banner__link" href="/cookies">View cookies</a>
      </div>
    </div>
  </div>
  <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
    <div
      class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
      <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
        <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">You
            have accepted all additional cookies. </span><span class="ons-js-rejected-text ons-u-d-no">You have rejected
            all additional cookies. </span><span class="ons-cookies-banner__preferences-text">You can <a
              href="/cookies">change your cookie preferences</a> at any time.</span></p>
      </div>
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button">
          <span class="ons-btn__inner"><span class="ons-btn__text">Hide</span>
          </span>
          <span class="ons-btn__context ons-u-vh">cookie message</span>
        </button>
      </div>
    </div>
  </div>
</div>

Cookies banner - Welsh

Example Cookies Banner Cymraeg contents

Nunjucks

{% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
{{
    onsCookiesBanner({
        'lang': 'cy'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
langstringfalseAll parameters have defaults for both English and Welsh. If 'lang': 'cy' is provided the banner will render with Welsh language defaults. If 'lang': 'en' or no lang parameter is provided then English language defaults will be used to render the banner.
ariaLabelstringfalseAria label for the cookie banner region (default is 'cookies banner')
statementTitlestringfalseThe title text for content for the cookie banner that prefixes the serviceName (default is 'Cookies on')
serviceNamestringfalseThe name of the service/website that follows the statementTitle (default is 'ons.gov.uk')
statementTextstringfalseThe text content for the cookie banner. HTML is allowed to create paragraphs. Default is: ”Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work. We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.”
acceptedTextstringfalseThe text content when cookies have been accepted. Will prefix the preferencesText (default is 'You’ve accepted all additional cookies.')
rejectedTextstringfalseThe text content when cookies have been rejected. Will prefix the preferencesText (default is 'You’ve rejected all additional cookies.')
preferencesTextstringfalseThe text content for the confirmation cookie message. HTML is allowable to embed links. Will follow the acceptedText or rejectedText (default is 'You can change your cookie preferences at any time.')
acceptButtonTextstringfalseText for the accept button (default is 'Accept additional cookies')
rejectButtonTextstringfalseText for the reject button (default is 'Reject additional preferences')
confirmationButtonTextstringfalseText for the confirmation banner button (default is 'Hide')
contextSuffixstringfalseAdditional descriptive text for the confirmation banner button to assist screen readers (default is 'the cookie message')
settingsLinkTextstringfalseText for link to cookie settings page (default is 'View cookies')
settingsLinkTextURLstringfalseURL for the cookies settings page (default is '/cookies')
widebooleanfalseSet to “true” to increase the maximum width of the layout container to 1280px
fullWidthbooleanfalseSet to “true” to increase the maximum width of the layout container to the full width of the viewport

HTML

<div class="ons-cookies-banner" role="region" aria-label="Cwcis">
  <div class="ons-container ons-cookies-banner__primary">
    <div class="ons-grid">
      <div class="ons-grid__col ons-col-8@m">
        <h2 class="ons-cookies-banner__title ons-u-mb-xs">Cwcis ar ons.gov.uk</h2>
        <div class="ons-cookies-banner__statement">
          <p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio
            rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p>
          <p>Hoffem osod <a href="/cwics">cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n
            defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>
        </div>
      </div>
    </div>
    <div class="ons-grid ons-grid--flex ons-u-mt-s">
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn"
          data-button="accept">
          <span class="ons-btn__inner"><span class="ons-btn__text">Derbyn cwcis ychwanegol</span>
          </span>
        </button>
      </div>
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn"
          data-button="reject">
          <span class="ons-btn__inner"><span class="ons-btn__text">Gwrthod cwcis ychwanegol</span>
          </span>
        </button>
      </div>
      <div class="ons-grid__col">
        <a class="ons-cookies-banner__link" href="/cwics">Gweld cwcis</a>
      </div>
    </div>
  </div>
  <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
    <div
      class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
      <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
        <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span
            class="ons-js-accepted-text ons-u-d-no">Rydych chi wedi derbyn yr holl gwcis ychwanegol. </span><span
            class="ons-js-rejected-text ons-u-d-no">Rydych chi wedi gwrthod yr holl gwcis ychwanegol. </span><span
            class="ons-cookies-banner__preferences-text">Gallwch chi <a href="/cwics">"newid eich dewisiadau o ran
              cwcis</a> ar unrhyw adeg.</span></p>
      </div>
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button">
          <span class="ons-btn__inner"><span class="ons-btn__text">Cuddio</span>
          </span>
          <span class="ons-btn__context ons-u-vh">neges hon</span>
        </button>
      </div>
    </div>
  </div>
</div>

How to use the cookies banner

The ONS cookies banner is displayed when the user has not accepted cookies. It must be placed at the very top of the page, directly above the ONS header.

If you are using the base page template, , place the banner inside the preHeader block. This will ensure that it is displayed before the skip to content link.

It will display if the user hasn’t accepted any ONS cookies via the banner or the cookie preferences page.

The cookies banner component provides default values for all parameters in both English and Welsh. For the English version you don't need to provide any parameters. For the Welsh version, you will need to provide the parameter'lang': 'cy'.

How the cookies banner works

Cookies are grouped by type and have a default boolean value. All but essential cookies are off by default. An initial cookie is set ons_cookie_policy { essential: true, settings: false, usage: false, campaigns: false }

ons_cookie_policy will update when a user accepts all cookies or makes changes via the cookies preferences page. Essential cookies default to true (on) as they allow us to set important cookies such as session cookies that allow a service to work.

Individual cookies need to be added to the cookies-functions.js with key being the cookie name and the value being the cookie group, for example, _ga: 'usage'.

When the user has either accepted cookies or updated cookies preferences another cookie is set ons_cookie_message_displayed: true.

This cookie prevents the banner being displayed while the cookie is present.

How to use

The preferences page uses groups of radio buttons which allow a user to allow or disallow cookies to be set.

Each group of radios must contain a name attribute prefixed with cookies- following with cookieType name, for example, cookies-campaigns. This allows the JavaScript to set the appropriate cookies.

If JavaScript is disabled a message is displayed explaining that JavaScript is required to set and change cookies.

When the form is submitted a success panel is shown to tell the user that their preferences have been updated. The form is handled by JavaScript.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Control cookies’ pattern on GitHub (opens in a new tab)