---
title: Add a cookie consent banner to a Gatsby site
description: Put the Cookie Compliance snippet first in the head through gatsby-ssr.js (setHeadComponents, snippet first in the list) or a custom src/html.js.
kind: platform
last_verified: 2026-11-12
---
# Add a cookie consent banner to a Gatsby site
**In short:** paste the **live** snippet as the **first two entries** of `setHeadComponents([...])` in `gatsby-ssr.js`, or as the first thing in `` of a custom `src/html.js`. Place it above your analytics entry.
Confirmed on a Gatsby site: with `setHeadComponents` (snippet first), the banner tags are the first scripts in the built page's ``.
## You need
- A Cookie Compliance AppID and the live snippet from MCP `install.getSnippet` or dashboard **Integrations → Manual Integration** (a new app uses `/v2/hu-banner.min.js`; an existing app keeps the URL in that snippet). A domain added in the dashboard is published automatically; if the status check still says the app is not published yet, or after later edits, click **Publish Now**, then copy the snippet. A snippet copied before publishing must be copied again. No account yet? [Sign up](https://app.hu-manity.co/#/register?enable-free=true&discount=JOIN-40D&utm_source=agent-manual&utm_medium=docs&utm_content=cookbook-gatsby) (free plan, no card); with MCP, call `help.startSignup`.
- Edit access to `gatsby-ssr.js` (create it in the project root if it does not exist) or `src/html.js`.
## Where it goes
1. Copy the live snippet (see above).
2. In `gatsby-ssr.js`, put the two banner tags **first** in the array you pass to `setHeadComponents`:
```js
const React = require("react")
exports.onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
// Cookie Compliance: first entries (use the live snippet's values)
,
,
// your existing tags stay after them
,
])
}
```
Gatsby writes its own meta tags first and then your array, so the snippet is the first script in ``. Keep the banner tags synchronous (no `async` or `defer`).
3. Alternative: eject the HTML shell (copy `node_modules/gatsby/cache-dir/default-html.js` to `src/html.js`) and put the two script tags as the first thing inside ``.
4. Run `gatsby build`.
Use `setHeadComponents` (not `setPostBodyComponents`) and keep the banner entries first in the array; Gatsby keeps array order.
## What the order controls
The banner holds recognised trackers that load after it until the visitor chooses, in regions whose rule requires consent first. A script placed above the snippet runs straight away, and a script you mark `data-hu-category="1"` is treated as essential. What runs before consent is your decision, so keep analytics and pixels below the snippet.
## Confirm the result
Build or render the site, then **view the page source** of the output (not the browser's Elements panel): the `huOptions` script and `hu-banner.min.js` are the first two `