How to install the cookie banner on the Next.js 12 and 11 versions?

Last updated on December 5, 2024

To install the cookie banner, navigate to the pages>_document.js and add the following steps:

Step 1: Import the next/script component.

To load CookieYes in your Next.js application, add the following import statement:

import Script from 'next/script';
Step 2: Add CookieYes Installation code.

To enable CookieYes on your website, add the CookieYes Installation code:

<Script src={`https://cdn-cookieyes.com/client_data/XXXXXXXX/script.js`}>
</Script>

You need to replace ‘XXXXXXXX’ with your CookieYes website key.

You can copy your installation code from Site Settings from the top navigation panel of your CookieYes dashboard.

Installation Code
Step 3: Add the strategy property beforeInteractive.

To ensure the script loads and executes without delaying the rendering of the page, add the following strategy below the CookieYes script code.

strategy="beforeInteractive"

After completing the above steps, the ‘_document.js’ should be like this:

document.js file

Note

CookieYes does not support the crossorigin attribute, as it may cause caching issues when used with the CookieYes script. If your website automatically adds this attribute when using the Next.js script component, we recommend using the standard <script> tag provided by CookieYes (installation script) instead to ensure that updates are applied immediately.

Have more questions?

Reach out to us and we'll answer them.

Contact us