> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useinvent.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Contentful
> Add your Invent assistant to Contentful-powered sites
## Overview
Add your Invent AI assistant to websites powered by Contentful. Perfect for headless CMS architectures using React, Next.js, Gatsby, or any other framework.
## Installation Methods
Since Contentful is a headless CMS, the implementation depends on your frontend framework.
### React / Next.js
Create a new component for the Invent assistant:
```jsx theme={"system"}
// components/InventAssistant.jsx
import { useEffect } from 'react';
export default function InventAssistant() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://www.useinvent.com/embed.js';
script.async = true;
script.defer = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
);
}
```
Import and use in your layout component:
```jsx theme={"system"}
// app/layout.jsx or pages/_app.jsx
import InventAssistant from '@/components/InventAssistant';
export default function Layout({ children }) {
return (
{children}
);
}
```
### Gatsby
```bash theme={"system"}
npm install react-helmet
```
```javascript theme={"system"}
// gatsby-browser.js
export const onRouteUpdate = () => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = 'https://www.useinvent.com/embed.js';
script.async = true;
script.defer = true;
document.body.appendChild(script);
}
};
```
```jsx theme={"system"}
// src/components/layout.jsx
import { Helmet } from 'react-helmet';
const Layout = ({ children }) => (
<>
{children}
);
```
### Vue.js / Nuxt
```vue theme={"system"}
```
### Static HTML
For static site generators that output HTML:
```html theme={"system"}
```
## Passing Contentful Data
You can pass Contentful content data to provide context to your assistant:
```jsx theme={"system"}
import { useEffect } from 'react';
export default function ContentfulPage({ entry }) {
useEffect(() => {
if (typeof window !== 'undefined') {
window.inventContext = {
contentType: entry.sys.contentType.sys.id,
entryId: entry.sys.id,
title: entry.fields.title,
// Add relevant fields
};
}
}, [entry]);
return (
{entry.fields.title}
{/* Your content */}
);
}
```
## Environment Variables
Store your assistant ID in environment variables:
```bash theme={"system"}
# .env.local
NEXT_PUBLIC_INVENT_ASSISTANT_ID=ast_YOUR_ASSISTANT_ID
```
```jsx theme={"system"}
```
## User Authentication
**Security Requirement:** When using any `user-*` attributes (`user-id`, `user-name`, `user-avatar`), you **must** also provide `user-hash`. Both `user-id` and `user-hash` must be provided together, or neither should be provided. The `user-hash` must be generated on your backend using HMAC-SHA256 with your assistant's secret key. Never expose the secret key to the client or generate the hash in frontend code.
To authenticate users from your application and provide personalized experiences:
1. Generate a secret key in your assistant settings
2. On your backend, generate an HMAC-SHA256 hash of the user ID
3. Pass the hash along with user information to the assistant
See the [Widget Authentication](/assistants/widget#user-authentication-optional) guide for complete authentication details.
## Framework-Specific Tips
Use in \_app.jsx or layout.tsx for global availability
Add to gatsby-browser.js for all pages
Create as a plugin in plugins/ directory
Add to root +layout.svelte
## Troubleshooting
**Solutions:**
* Ensure script loads after component mounts
* Check for hydration issues in SSR
* Verify custom element support in your build
**Solutions:**
* Load script only on client side
* Use useEffect or mounted lifecycle
* Check for window object availability