Cookie consent integrations with Sanity

How to integrate a cookie consent banner with your Sanity-powered website

This guide shows you how to add a cookie consent banner to a Sanity-powered website without changing your Sanity content workflow.

Popular cookie consent management platforms like CookieYes, Cookiebot, or OneTrust provide ready-to-use solutions that can be integrated into any frontend framework that displays your Sanity content. These solutions offer customizable banners, consent tracking, and compliance with major privacy regulations.

Cookie consent runs in the browser, so you add the banner to the frontend that displays your Sanity content, not to Sanity itself.

This guide uses Next.js, but you can add a cookie consent banner with other frontend frameworks, such as Vue.js, Angular, or React without Next.js. In most frameworks, you follow your consent platform's instructions for that framework and add a script tag or component to your application's main template or layout file.

Get your banner script from your cookie consent platform. This guide uses Cookiebot, but you can also use other platforms, such as CookieYes or OneTrust. After you register your domain with Cookiebot, it gives you a script like this:

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="YOUR_CBID" data-blockingmode="auto" type="text/javascript"></script>

Replace YOUR_CBID with your Domain ID, the data-cbid value from the Your scripts tab in the Cookiebot Manager.

This step uses the Next.js App Router. If your project uses the Pages Router, add the plain <script> tag from Step 1 as the first element inside <Head> in pages/_document.tsx instead.

In your root layout, app/layout.tsx, add the script with the Script component from next/script and set strategy to "beforeInteractive" so Cookiebot loads before React hydrates the page. Place <Script> directly inside <body>, not inside a hand-written <head>, and don't add async or defer:

import Script from 'next/script'

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>
        <Script
          id="cookiebot"
          src="https://consent.cookiebot.com/uc.js"
          data-cbid="YOUR_CBID"
          data-blockingmode="auto"
          strategy="beforeInteractive"
        />
        {children}
      </body>
    </html>
  )
}

Use strategy="beforeInteractive" only for the Cookiebot script. Scripts that load with beforeInteractive run before the Cookiebot autoblocker starts, so it can't block them. Load other third-party scripts, such as analytics tags, with the default afterInteractive strategy or with lazyOnload.

Open your website and check that the cookie banner appears, then run the verification tool that your cookie consent service provides. If verification fails, check your implementation code and the browser console for errors.

To customize the banner's appearance, position, languages, and consent categories, follow your platform's documentation, such as the Cookiebot help center.