Chapter 2:

How to Add Cookie Banner on Gatsby Website

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.

To begin, follow the below steps:

1. Sign up on CookieYes and try it for free. 
2. Once you have created the account, create a cookie banner for your 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:

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 can copy your installation code from Advanced Settings from the top navigation panel of your CookieYes dashboard.

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

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>,
 ]);
}

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 ”.

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.

Still have questions or facing issues? Contact technical support

Next chapter:

Complete website scanning