> For the complete documentation index, see [llms.txt](https://docs.avada.io/cookie-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avada.io/cookie-help-center/integrations/integrate-with-hydrogen.md).
# Integrate with Hydrogen
## Setup for Integrate Avada Cookie Consent with Hydrogen
### Step 1: How to set up your Hydrogen store
If you've already developed your Hydrogen store, you're all set! However, if you haven't started yet or are looking to test a Hydrogen store with Avada Cookie Consent, don't worry. You can easily set up a quick-start Hydrogen store by following this guide:[ Getting Started with Hydrogen](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started).
If you are not on Shopify Plus plan but still want to test this out with the development store first. You can update your .env file with Storefront API key from your Custom App
```
SESSION_SECRET="foobar"
PUBLIC_STOREFRONT_API_TOKEN="YOUR_KEY"
PUBLIC_STORE_DOMAIN="YOUR_STORE.myshopify.com"
```
### Step 2: Installation
`npm install avada-cookie-bar-hydrogen-sdk-v2`
\# or
`yarn add avada-cookie-bar-hydrogen-sdk-v2`
### Step 3: Implementation
1. ### Load Avada Cookie Consent Data:
In your app/root.jsx loader:
```
import {getCookieBarConfigShop} from 'avada-cookie-bar-hydrogen-sdk-v2';
async function loadCriticalData({context}) {
const {storefront} = context;
const [header, shopQuery] = await Promise.all([
storefront.query(HEADER_QUERY, {
cache: storefront.CacheLong(),
variables: {
headerMenuHandle: 'main-menu', // Adjust to your header menu handle
},
}),
getCookieBarConfigShop(storefront),
// Add other queries here, so that they are loaded in parallel
]);
return {
header,
shopData: shopQuery?.shop,
};
}
```
2. **Initialize Avada Cookie Consent in Root Layout**
In your app/root.jsx:
```
import {useAvadaCookieConsent} from 'avada-cookie-bar-hydrogen-sdk-v2';
export default function App() {
const data = useLoaderData();
useAvadaCookieConsent(data);
return ;
}
```
3. **Add CSP whitelist:**
Update your entry.server.jsx to include the CSP whitelist for Avada Cookie Consent:
```
import {RemixServer} from '@remix-run/react';
import {isbot} from 'isbot';
import {renderToReadableStream} from 'react-dom/server';
import {createContentSecurityPolicy} from '@shopify/hydrogen';
/**
* @param {Request} request
* @param {number} responseStatusCode
* @param {Headers} responseHeaders
* @param {EntryContext} remixContext
* @param {AppLoadContext} context
*/
export default async function handleRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
context,
) {
const {nonce, header, NonceProvider} = createContentSecurityPolicy({
shop: {
checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
storeDomain: context.env.PUBLIC_STORE_DOMAIN,
},
scriptSrc: [
'self',
...(process.env.NODE_ENV !== 'production' ? ['unsafe-eval'] : []),
'https://cdn.shopify.com',
'https://shopify.com',
...(process.env.NODE_ENV !== 'production'
? ['https://localhost:*', 'http://localhost:*']
: []),
'https://geoip.apps.getjoy.ai',
'https://cdnapps.avada.io',
'https://cdn-cookie.avada.io',
],
connectSrc: [
'self',
'https://cdn.shopify.com',
'https://shop.app',
'https://monorail-edge.shopifysvc.com',
'https://geoip.apps.getjoy.ai',
'https://thomas-shopify-production-36.myshopify.com',
'ws://127.0.0.1:*',
'ws://localhost:*',
'ws://*:*',
'https://cdnapps.avada.io',
'https://cdn-cookie.avada.io',
],
styleSrc: [
'self',
'unsafe-inline',
'https://cdn.shopify.com',
'https://cdn.builder.io',
'https://fonts.bunny.net',
'https://fonts.googleapis.com',
'https://cdn-cookie.avada.io',
],
fontSrc: [
'self',
'https://fonts.bunny.net',
'data:',
'https://fonts.gstatic.com',
],
});
const body = await renderToReadableStream(
,
{
nonce,
signal: request.signal,
onError(error) {
console.error(error);
responseStatusCode = 500;
},
},
);
if (isbot(request.headers.get('user-agent'))) {
await body.allReady;
}
responseHeaders.set('Content-Type', 'text/html');
responseHeaders.set('Content-Security-Policy', header);
return new Response(body, {
headers: responseHeaders,
status: responseStatusCode,
});
}
/** @typedef {import('@shopify/remix-oxygen').EntryContext} EntryContext */
/** @typedef {import('@shopify/remix-oxygen').AppLoadContext} AppLoadContext */
```
## Turn on the integration in-app
Now, let's head back to the Hydrogen integration screen.
Click 'Turn on' to integrate the Avada Consent banner with your Hydrogen store.
## Test the integration
After these are implemented, you will see the Cookie banner displays on your custom storefront according to your settings. However, you can compare the banner on the custom storefront and the Online Store channel to make sure both are working properly.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avada.io/cookie-help-center/integrations/integrate-with-hydrogen.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.