# How to Add Cookie Banner on Gatsby Website

Learn how to add a cookie banner on your gatsby website with our step-by-step guide.

---

**Categories:** , 
**Published:** July 30, 2026
**URL:** https://www.cookieyes.com/documentation/cookie-banner-on-gatsby/

---

Welcome to CookieYes! This documentation will guide you through setting up CookieYes on a Gatsby website. By following the steps, you can easily integrate CookieYes into your Gatsby website and enable a cookie consent banner.

## Step 1: Sign Up on CookieYes and Create a Cookie Banner.

To begin, follow the below steps:
1. [Sign up on CookieYes and try it for free](https://app.cookieyes.com/trial?plan=pro-monthly&ref=DGATSBY).
2. Once you have created the account, [create a cookie banner for your website](https://www.cookieyes.com/documentation/add-cookie-banner-to-website/).

## Step 2: Install the cookie banner on the Gatsby website.

To deploy the cookie banner, navigate to the `gatsby-ssr.js` file at the root of your project or create it if it does not exist, and add the CookieYes installation code.
To add the CookieYes `<script>` tag to the head of a page, you can simply include the installation code inside the `setHeadComponents()` function as shown below:

```html
setHeadComponents([
   <script
      id='cookieyes'
      type='text/javascript'
      src='https://cdn-cookieyes.com/client_data/XXXXXXXX/script.js'
    ></script>,
  ]);
```

This will add the` <script>` tag with the CookieYes installation code to the head of the page. 

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

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

![](https://assets.cookieyes.com/Copy_Code_42db741cc9.png)

The final code to be added to the gatsby-ssr.js file should be like this:

```html
import React from 'react';
export function onRenderBody({ setHeadComponents }) {
setHeadComponents([
    <script
      id='cookieyes'
      type='text/javascript'
      src='https://cdn-cookieyes.com/client_data/XXXXXXXX/script.js'
    ></script>,
 ]);
}
```

![](https://assets.cookieyes.com/gatsby2_9473bc988d.png)

## Step 3: Verify Installation

After completing **Step 2,** you can verify the installation by clicking the **Verify Installation** button in the Cookieyes setup screen. If you have successfully installed the banner, you will see a success message showing that the “*Banner is active on your website* ”.

![](https://assets.cookieyes.com/verified_cb8dec7ef7.jpg)

Now you will see the new cookie consent banner on your Gatsby website. From the CookieYes Dashboard, you can complete the website scanning and explore additional customizations and features.

> **See also**
> - [Features and integrations](https://www.cookieyes.com/category/documentation/features/)
> - [How to customize your cookie banner](https://www.cookieyes.com/documentation/add-cookie-banner-to-website/#Step2Customi-1)
> - [Ultimate guide to GDPR cookie consent](https://www.cookieyes.com/blog/gdpr-cookie-consent/)
> - [Frequently asked questions](https://www.cookieyes.com/documentation/helpguide-faq/)
>

Still have questions or facing issues? [Contact technical support.](https://www.cookieyes.com/support/?query=troubleshoot)


---

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Article",
      "headline": "How to Add Cookie Banner on Gatsby Website",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.cookieyes.com/documentation/cookie-banner-on-gatsby/"
      },
      "url": "https://www.cookieyes.com/documentation/cookie-banner-on-gatsby/",
      "publisher": {
        "@type": "Organization",
        "name": "CookieYes",
        "url": "https://www.cookieyes.com",
        "logo": {
          "@type": "ImageObject",
          "url": "https://assets.cookieyes.com/cookieyes.png",
          "width": 250,
          "height": 60
        }
      },
      "description": "Learn how to add a cookie banner on your gatsby website with our step-by-step guide.",
      "datePublished": "2023-04-10T04:57:59+00:00",
      "dateModified": "2025-06-02T06:20:39+00:00",
      "author": {
        "@type": "Person",
        "name": "CookieYes Doc Team"
      },
      "image": [
        "https://assets.cookieyes.com/Gatsby_Logo_445c19d851.png"
      ]
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://www.cookieyes.com/documentation/cookie-banner-on-gatsby/#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://www.cookieyes.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Documentation",
          "item": "https://www.cookieyes.com/documentation/"
        },
        {
          "@type": "ListItem",
          "position": 3,
          "name": "Getting Started",
          "item": "https://www.cookieyes.com/category/documentation/getting-started/"
        },
        {
          "@type": "ListItem",
          "position": 4,
          "name": "How to Add Cookie Banner on Gatsby Website"
        }
      ]
    },
    {
      "@type": "WebSite",
      "@id": "https://www.cookieyes.com/#website",
      "url": "https://www.cookieyes.com/",
      "name": "CookieYes",
      "description": "CookieYes is a Google-certified consent management platform that helps businesses comply with GDPR, CCPA, and other global privacy laws.",
      "inLanguage": "en-US",
      "publisher": {
        "@id": "https://www.cookieyes.com/#organization"
      },
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://www.cookieyes.com/?s={search_term_string}"
        },
        "query-input": {
          "@type": "PropertyValueSpecification",
          "valueRequired": true,
          "valueName": "search_term_string"
        }
      }
    },
    {
      "@type": "Organization",
      "@id": "https://www.cookieyes.com/#organization",
      "name": "CookieYes",
      "url": "https://www.cookieyes.com/",
      "logo": {
        "@type": "ImageObject",
        "@id": "https://www.cookieyes.com/#/schema/logo/image/",
        "inLanguage": "en-US",
        "url": "https://assets.cookieyes.com/cookieyes.png",
        "contentUrl": "https://assets.cookieyes.com/cookieyes.png",
        "width": 19701,
        "height": 3176,
        "caption": "CookieYes"
      },
      "image": {
        "@id": "https://www.cookieyes.com/#/schema/logo/image/"
      }
    }
  ]
}
```