# How to install the cookie banner on the Next.js 12 and 11 versions?
> For the complete site index, see [llms.txt](/llms.txt). Every page is also available as Markdown: replace the trailing slash with `.md` (`/pricing/` becomes `/pricing.md`), or send `Accept: text/markdown` to the page URL itself.
Learn how to install the CookieYes cookie banner on your Next.js 12 and below website with this step-by-step guide.
---
**Last updated:** June 2, 2025
**URL:** https://www.cookieyes.com/documentation/install-cookie-banner-on-next-js-12-and-below-versions/
---
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:
```js
import Script from 'next/script';
```
**Step 2: Add CookieYes Installation code.**
To enable CookieYes on your website, add the CookieYes Installation code:
```js
```
> **Note: **
> 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.
**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.
```js
strategy="beforeInteractive"
```
After completing the above steps, the ‘_document.js’ should be like this:
> **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 `