This is currently experimental because we need more research to validate it.
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. 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
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
When to use this component
Use this component if your website or service sets any cookies on a user’s device.
- 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
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
- 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
To understand user behaviour, you can track clicks on links in the cookie banner via 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.
Using the Design System’s ‘tracking’ script will add the data attributes automatically.
Feedback, help and support
There is a problem
Thanks for your feedback