Contentful

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 Assistant Component

Create a new component for the Invent assistant:

// 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 (
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
  );
}

Add to Layout

Import and use in your layout component:

// app/layout.jsx or pages/_app.jsx
import InventAssistant from '@/components/InventAssistant';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <InventAssistant />
      </body>
    </html>
  );
}

Gatsby

Install React Helmet

npm install react-helmet

Add to gatsby-browser.js

// 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);
  }
};

Add Component

// src/components/layout.jsx
import { Helmet } from 'react-helmet';

const Layout = ({ children }) => (
  <>
    <Helmet>
      <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    </Helmet>
    {children}
  </>
);

Vue.js / Nuxt

<!-- components/InventAssistant.vue -->
<template>
  <div>
    <invent-assistant :assistant-id="assistantId" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      assistantId: 'ast_YOUR_ASSISTANT_ID'
    }
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://www.useinvent.com/embed.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }
}
</script>

Static HTML

For static site generators that output HTML:

<!-- Add to your template file -->
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>

Passing Contentful Data

You can pass Contentful content data to provide context to your assistant:

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 (
    <div>
      <h1>{entry.fields.title}</h1>
      {/* Your content */}
    </div>
  );
}

Environment Variables

Store your assistant ID in environment variables:

# .env.local
NEXT_PUBLIC_INVENT_ASSISTANT_ID=ast_YOUR_ASSISTANT_ID

<invent-assistant
  assistant-id={process.env.NEXT_PUBLIC_INVENT_ASSISTANT_ID}
/>

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:

Generate a secret key in your assistant settings
On your backend, generate an HMAC-SHA256 hash of the user ID
Pass the hash along with user information to the assistant

See the Widget Authentication guide for complete authentication details.

Framework-Specific Tips

Next.js

Use in _app.jsx or layout.tsx for global availability

Gatsby

Add to gatsby-browser.js for all pages

Nuxt

Create as a plugin in plugins/ directory

SvelteKit

Add to root +layout.svelte

Troubleshooting

Component not rendering in React

Solutions:

Ensure script loads after component mounts
Check for hydration issues in SSR
Verify custom element support in your build

SSR/SSG issues

Solutions:

Load script only on client side
Use useEffect or mounted lifecycle
Check for window object availability

Getting Started

Assistants

Features

Broadcasts

Workspace Management

Overview

Installation Methods

React / Next.js

Gatsby

Vue.js / Nuxt

Static HTML

Passing Contentful Data

Environment Variables

User Authentication

Framework-Specific Tips

Next.js

Gatsby

Nuxt

SvelteKit

Troubleshooting

​Overview

​Installation Methods

​React / Next.js

​Gatsby

​Vue.js / Nuxt

​Static HTML

​Passing Contentful Data

​Environment Variables

​User Authentication

​Framework-Specific Tips

Next.js

Gatsby

Nuxt

SvelteKit

​Troubleshooting

Overview

Installation Methods

React / Next.js

Gatsby

Vue.js / Nuxt

Static HTML

Passing Contentful Data

Environment Variables

User Authentication

Framework-Specific Tips

Troubleshooting