Integrate with Hydrogen

This guide walks you through integrating Avada Accessibility with a Shopify Hydrogen (headless) store.

Prerequisites

A Shopify Hydrogen store set up and running.
Node.js and npm installed in your development environment.

Installation

Step 1: Set up your Hydrogen store

Ensure your Hydrogen store is running and you have access to your project codebase. If you have not set up Hydrogen yet, follow the Shopify Hydrogen documentation (opens in a new tab).

Step 2: Install the SDK

Install the Avada Accessibility Hydrogen SDK in your project:

npm install avada-accessibility-hydrogen-sdk-v1

Step 3: Implement the SDK

Load accessibility configuration

Use the getAvadaAccessibilityConfigShop function to fetch your store's accessibility configuration. This should be called on the server side (e.g., in your root loader).

import { getAvadaAccessibilityConfigShop } from 'avada-accessibility-hydrogen-sdk-v1';
 
export async function loader({ context }) {
  const accessibilityConfig = await getAvadaAccessibilityConfigShop({
    shop: context.storefront.getShopifyDomain(),
  });
 
  return {
    accessibilityConfig,
    // ...other loader data
  };
}

Initialize the accessibility widget

Use the useAvadaAccessibility hook in your root component to initialize the widget on the client side.

import { useAvadaAccessibility } from 'avada-accessibility-hydrogen-sdk-v1';
 
export default function App() {
  const { accessibilityConfig } = useLoaderData();
 
  useAvadaAccessibility({
    config: accessibilityConfig,
  });
 
  return (
    // ...your app JSX
  );
}

Update Content Security Policy (CSP)

Add the following domains to your Content Security Policy whitelist to allow the accessibility widget to load its resources:

cdn-accessibility.avada.io
sea-accessibility.firebaseapp.com

If you are using Hydrogen's built-in CSP configuration, update it in your entry.server.tsx:

const { nonce, header, NonceProvider } = createContentSecurityPolicy({
  connectSrc: [
    "'self'",
    'cdn-accessibility.avada.io',
    'sea-accessibility.firebaseapp.com',
  ],
  scriptSrc: [
    "'self'",
    'cdn-accessibility.avada.io',
    'sea-accessibility.firebaseapp.com',
  ],
});

⚠️

The CSP whitelist is required for the widget to function correctly. Without it, the browser will block the widget's scripts and styles from loading.

After completing the integration, visit your Hydrogen storefront to verify the accessibility widget appears and functions correctly.

Report Management App Embed Status