Cookie banner examples

• # default

  Open this example in a new tab

  Cookies on this government service

  We use analytics cookies to help understand how users use our service.

  View cookie preferences

  {
    "messages": [
      {
        "headingText": "Cookies on this government service",
        "text": "We use analytics cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "headingText": "Cookies on this government service",
        "text": "We use analytics cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      }
    ]
  }) }}
          

• # accepted confirmation banner

  Open this example in a new tab

  Your cookie preferences have been saved. You have accepted cookies.

  {
    "messages": [
      {
        "text": "Your cookie preferences have been saved. You have accepted cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "text": "Your cookie preferences have been saved. You have accepted cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }) }}
          

• # rejected confirmation banner

  Open this example in a new tab

  Your cookie preferences have been saved. You have rejected cookies.

  {
    "messages": [
      {
        "text": "Your cookie preferences have been saved. You have rejected cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "text": "Your cookie preferences have been saved. You have rejected cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }) }}
          

• # with html

  Open this example in a new tab

  Cookies on my service

  We use cookies in our service.

  We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.

  View cookie preferences

  {
    "messages": [
      {
        "headingHtml": "Cookies on <span>my service</span>",
        "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n<p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>\n",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "headingHtml": "Cookies on <span>my service</span>",
        "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n<p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>\n",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      }
    ]
  }) }}
          

• # heading html

  Open this example in a new tab

  Cookies on my service

  {
    "messages": [
      {
        "headingHtml": "Cookies on <span>my service</span>"
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "headingHtml": "Cookies on <span>my service</span>"
      }
    ]
  }) }}
          

• # heading html as text

  Open this example in a new tab

  Cookies on <span>my service</span>

  {
    "messages": [
      {
        "headingText": "Cookies on <span>my service</span>"
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "headingText": "Cookies on <span>my service</span>"
      }
    ]
  }) }}
          

• # html

  Open this example in a new tab

  We use cookies in our service.

  {
    "messages": [
      {
        "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>"
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>"
      }
    ]
  }) }}
          

• # classes

  Open this example in a new tab

  {
    "messages": [
      {
        "classes": "app-my-class"
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "classes": "app-my-class"
      }
    ]
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "messages": [
      {
        "attributes": {
          "data-attribute": "my-value"
        }
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "attributes": {
          "data-attribute": "my-value"
        }
      }
    ]
  }) }}
          

• # custom aria label

  Open this example in a new tab

  We use cookies on GOV.UK

  {
    "ariaLabel": "Cookies on GOV.UK",
    "messages": [
      {
        "text": "We use cookies on GOV.UK"
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "ariaLabel": "Cookies on GOV.UK",
    "messages": [
      {
        "text": "We use cookies on GOV.UK"
      }
    ]
  }) }}
          

• # hidden

  Open this example in a new tab

  {
    "messages": [
      {
        "hidden": true
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "hidden": true
      }
    ]
  }) }}
          

• # hidden false

  Open this example in a new tab

  {
    "messages": [
      {
        "hidden": false
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "hidden": false
      }
    ]
  }) }}
          

• # default action

  Open this example in a new tab

  {
    "messages": [
      {
        "actions": [
          {
            "text": "This is a button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "This is a button"
          }
        ]
      }
    ]
  }) }}
          

• # link

  Open this example in a new tab

  This is a link

  {
    "messages": [
      {
        "actions": [
          {
            "text": "This is a link",
            "href": "/link"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "This is a link",
            "href": "/link"
          }
        ]
      }
    ]
  }) }}
          

• # link with false button options

  Open this example in a new tab

  This is a link

  {
    "messages": [
      {
        "actions": [
          {
            "text": "This is a link",
            "href": "/link",
            "value": "cookies",
            "name": "link"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "This is a link",
            "href": "/link",
            "value": "cookies",
            "name": "link"
          }
        ]
      }
    ]
  }) }}
          

• # link as a button

  Open this example in a new tab

  {
    "messages": [
      {
        "actions": [
          {
            "text": "This is a link",
            "href": "/link",
            "type": "button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "This is a link",
            "href": "/link",
            "type": "button"
          }
        ]
      }
    ]
  }) }}
          

• # type

  Open this example in a new tab

  {
    "messages": [
      {
        "actions": [
          {
            "text": "Button",
            "type": "button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "Button",
            "type": "button"
          }
        ]
      }
    ]
  }) }}
          

• # button classes

  Open this example in a new tab

  {
    "messages": [
      {
        "actions": [
          {
            "text": "Button with custom classes",
            "classes": "my-button-class app-button-class"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "Button with custom classes",
            "classes": "my-button-class app-button-class"
          }
        ]
      }
    ]
  }) }}
          

• # button attributes

  Open this example in a new tab

  {
    "messages": [
      {
        "actions": [
          {
            "text": "Button with attributes",
            "attributes": {
              "data-button-attribute": "my-value"
            }
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "Button with attributes",
            "attributes": {
              "data-button-attribute": "my-value"
            }
          }
        ]
      }
    ]
  }) }}
          

• # link classes

  Open this example in a new tab

  Link with custom classes

  {
    "messages": [
      {
        "actions": [
          {
            "text": "Link with custom classes",
            "href": "/my-link",
            "classes": "my-link-class app-link-class"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "Link with custom classes",
            "href": "/my-link",
            "classes": "my-link-class app-link-class"
          }
        ]
      }
    ]
  }) }}
          

• # link attributes

  Open this example in a new tab

  Link with attributes

  {
    "messages": [
      {
        "actions": [
          {
            "text": "Link with attributes",
            "href": "/link",
            "attributes": {
              "data-link-attribute": "my-value"
            }
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "actions": [
          {
            "text": "Link with attributes",
            "href": "/link",
            "attributes": {
              "data-link-attribute": "my-value"
            }
          }
        ]
      }
    ]
  }) }}
          

• # client-side implementation

  Open this example in a new tab

  Cookies on this service

  We use cookies to help understand how users use our service.

  View cookie preferences

  {
    "messages": [
      {
        "headingText": "Cookies on this service",
        "text": "We use cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have accepted cookies.",
        "role": "alert",
        "hidden": true,
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have rejected cookies.",
        "role": "alert",
        "hidden": true,
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "headingText": "Cookies on this service",
        "text": "We use cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have accepted cookies.",
        "role": "alert",
        "hidden": true,
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have rejected cookies.",
        "role": "alert",
        "hidden": true,
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }) }}
          

• # full banner hidden

  Open this example in a new tab

  {
    "hidden": true,
    "classes": "hide-cookie-banner",
    "attributes": {
      "data-hide-cookie-banner": "true"
    },
    "messages": [
      {
        "headingText": "Cookies on this service",
        "text": "We use cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have accepted cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have rejected cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "hidden": true,
    "classes": "hide-cookie-banner",
    "attributes": {
      "data-hide-cookie-banner": "true"
    },
    "messages": [
      {
        "headingText": "Cookies on this service",
        "text": "We use cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have accepted cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      },
      {
        "text": "Your cookie preferences have been saved. You have rejected cookies.",
        "role": "alert",
        "actions": [
          {
            "text": "Hide cookie message",
            "type": "button"
          }
        ]
      }
    ]
  }) }}
          

• # rebrand

  Open this example in a new tab

  Cookies on this government service

  We use analytics cookies to help understand how users use our service.

  View cookie preferences

  {
    "messages": [
      {
        "headingText": "Cookies on this government service",
        "text": "We use analytics cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      }
    ]
  }

  
  {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
  
  {{ govukCookieBanner({
    "messages": [
      {
        "headingText": "Cookies on this government service",
        "text": "We use analytics cookies to help understand how users use our service.",
        "actions": [
          {
            "text": "Accept analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "accept"
          },
          {
            "text": "Reject analytics cookies",
            "type": "submit",
            "name": "cookies",
            "value": "reject"
          },
          {
            "text": "View cookie preferences",
            "href": "/cookie-preferences"
          }
        ]
      }
    ]
  }) }}