Cookie banner
Help users manage their personal data by telling them when you store cookies on their device.
By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren’t set, or to hide the banner if they are.
Setting data-hide-cookie-banner="true" on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
If the examples below are not showing the banner, make sure the cookies_preferences_set cookie is not present or is set to false.
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/cookie_banner", {
} %>Accessibility acceptance criteria
Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
With custom content (preview)
<%= render "govuk_publishing_components/components/cookie_banner", {
title: "Can we store analytics cookies on your device?",
text: sanitize("This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the <a class='govuk-link' href='/cookies'>cookies page</a>"),
confirmation_message: "You’ve accepted all cookies."
} %>With multi paragraph custom content (preview)
<%= render "govuk_publishing_components/components/cookie_banner", {
title: "Can we store analytics cookies on your device?",
text: [
"This is some custom text in my cookie banner.",
"There are three paragraphs.",
"They are passed as an array"
],
confirmation_message: "You’ve accepted all cookies."
} %>With custom cookie preferences href (preview)
<%= render "govuk_publishing_components/components/cookie_banner", {
cookie_preferences_href: "/cookies"
} %>In services asking for analytics only (preview)
Use this type of banner in your service if it only uses cookies for analytics.
<%= render "govuk_publishing_components/components/cookie_banner", {
title: "Can we store analytics cookies on your device?",
text: "Analytics cookies help us understand how our website is being used.",
confirmation_message: sanitize("You’ve accepted all cookies. You can `<a class='govuk-link' href='/cookies'>change your cookie settings</a>` at any time."),
services_cookies: {
yes: {
text: "Yes",
data_attributes: {
"track-category": "cookieBanner"
}
},
no: {
text: "No",
data_attributes: {
"track-category": "cookieBanner"
}
},
cookie_preferences: {
text: "How we use cookies",
href: "/cookies"
}
}
} %>