Cookie banner

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

            <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 type="button" class="ds_button  ds_button--small  js-accept-all-cookies">Accept all cookies</button>
                <button type="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 banner  at the top of all site pages. It gives users the option to accept or reject non-essential cookies. You should use it in combination with the cookie page pattern.

Users will see the cookie banner every time they access your website or service until they:

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

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

<div id="cookie-confirm" class="ds_notification  ds_notification--cookie-success  ds_reversed  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 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 is more than one notification banner on a page, the cookie banner should appear first.

Why we use this component

The cookie banner component you 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. Only a very low percentage of users will go through to the (secondary) cookie settings page because of this users must be able to reject cookies from the banner in the same number of clicks as to accept cookies.

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 that they need to accept essential cookies
• 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

You can track clicks on links in the cookie banner using the data-banner data attribute. You can also record against the original page path the click URL, the click text or a data attribute for button clicks.

The Design System’s ‘tracking’ script adds the data attributes.