Cookie banner

Experimental

This component is currently experimental because we need more research to validate it.

A notice to help users to understand what cookies do. It allows users to accept or reject cookies that are not essential to making your website or service work.

Sample HTML

<div id="cookie-notice" class="ds_notification  ds_notification--large  ds_notification--cookie  js-initial-cookie-content  fully-hidden" data-module="ds-cookie-notification">
    <div class="ds_wrapper">
        <div class="ds_notification__content">
            <div role="heading" class="visually-hidden">Information</div>

            <div class="ds_notification__text">
                <p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
                    experience.</p>
                <p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
                    To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
            </div>

            <div class="ds_notification__actions">
                <button class="ds_button  ds_button--small  js-accept-all-cookies">Accept all cookies</button>
                <button class="ds_button  ds_button--small  ds_button--secondary  js-accept-essential-cookies">Use essential cookies only</button>
                <a href="/cookies/">Set cookie preferences</a>
            </div>
        </div>
    </div>
</div>

About this component

The cookie banner is a notification at the top of all site pages. It gives users the option to accept or reject non-essential cookies. It is used in combination with the cookie settings pattern.

The cookie banner is shown every time a user accesses your website or service until they either:

  • accept or reject cookies using the options in the cookie banner
  • save their cookie preferences on your cookie settings page

The term ’cookies’ on this page refers to:

  • browser and HTTP-only cookies
  • HTML5 local storage
  • service workers
  • any other technologies you use that store files on a user's device

Confirmation message

When a user has accepted or rejected cookies:

  • the cookie banner changes to a confirmation message and is not shown again
  • a cookie is set that remembers the user’s choice for 1 year

Sample HTML

<div id="cookie-confirm" class="ds_notification  ds_notification--cookie-success  ds_reversed  fully-hidden  js-confirm-cookie-content" data-module="ds-notification">
    <div class="ds_wrapper">
        <div class="ds_notification__content">
            <div class="ds_notification__text">
                <h2 class="visually-hidden">Information</h2>

                <div class="ds_notification__text">
                    <p>Your cookie preferences have been saved. You can <a href="/cookies/">change your cookie settings</a> at any time.</p>
                </div>

                <button class="ds_notification__close  js-close-notification" type="button">
                    <span class="visually-hidden">Close this notification</span>
                    <svg class="ds_icon  ds_icon--fill" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#close"></use></svg>
                </button>
            </div>
        </div>
    </div>
</div>

When to use this component

Use this component if your website or service sets any cookies on a user’s device.

You must:

  • inform users about any cookies that you set on their device
  • allow users to reject any cookies that are not essential

If there are multiple notification banners on a page, the cookie banner should appear first.

Why we use this component

The cookie banner component helps a website or service to meet data protection legislation including:

  • Privacy and Electronic Communications Regulations (PECR)
  • General Data Protection Regulation (GDPR)

PECR asks that websites:

  • say what cookies will be set
  • explain what the cookies will do
  • get consent from users to store cookies on their devices

Evidence

This component is currently experimental because we need more research to validate it. 47%+ of all users on mygov.scot interacted with this pattern in September 2021. But we also know from a survey carried out in 2019 and 2020 that many users have become blind to cookie notices.

Using that user survey and desk-based research, we set these rules for the new cookie banner. The cookie notice and cookie settings page should:

  • be non-intrusive across all devices
  • ensure that users know essential cookies cannot be switched off
  • make it clear that we need the user’s consent to use cookies
  • show users how cookies help them to get the most out of a site
  • never use ‘dark patterns’ that trick users, such as where clicking ‘x’ accepts cookies
  • enable users to have control over cookie preferences for non-essential cookies

Website analytics

To understand user behaviour, you can track clicks on links in the cookie banner. You can also record against the original page path the click URL, the click text or a data attribute for button clicks.

Using the Design System’s ‘tracking’ script will add the data attributes automatically.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top