How to Add Asyntai AI Chatbot to Sanity

Step-by-step guide for Sanity-powered websites

Platform:

Important: Sanity is a headless CMS that delivers content via APIs. The chatbot code needs to be added to your frontend application (Next.js, Gatsby, Nuxt, plain HTML, etc.), not to the Sanity Studio itself.

Step 1: Get Your Embed Code

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Note: The code above is just an example. You must copy your own unique embed code from your Dashboard as it contains your personal widget ID.

Step 2: Add to Next.js Frontend (Most Common)

If your Sanity-powered site uses Next.js (the most common pairing), add the chatbot to your root layout:

App Router (Next.js 13+)

Open app/layout.js (or app/layout.tsx) and add the Script component:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

If using the Pages Router, open pages/_app.js:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Tip: The strategy="afterInteractive" option ensures the chatbot loads after the page becomes interactive, providing the best user experience without affecting page load performance.

Alternative Method 1: Gatsby Frontend

If your Sanity site uses Gatsby, add the script via gatsby-ssr.js:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Note: You also need to add the same code to gatsby-browser.js if you want the widget to persist during client-side navigation. Alternatively, add it to your root layout component.

Alternative Method 2: Nuxt.js Frontend

If your Sanity site uses Nuxt.js, add the script in nuxt.config.js (or nuxt.config.ts):

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

Alternative Method 3: Plain HTML Frontend

If your Sanity-powered site uses plain HTML or a static site generator consuming the Sanity API:

Open your main HTML file (usually index.html)
Add the embed code just before the closing </body> tag:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Alternative Method 4: React (Vite or Create React App)

If your frontend uses React with Vite or Create React App:

Add the script to index.html in the public/ directory:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Or use a useEffect hook in your root component:

// App.jsx or App.tsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

Step 3: Deploy and Verify

After adding the code to your frontend application:

Deploy your frontend to your hosting provider (Vercel, Netlify, etc.)
Open your live site in a new browser tab
You should see the chat widget button in the bottom right corner
Click it to ensure it opens and functions correctly

Not seeing the widget? Make sure you replaced YOUR_WIDGET_ID with your actual widget ID from the dashboard. Check that the script is loading in your browser's Network tab (F12 > Network). Verify the frontend was redeployed after adding the code. For Next.js, ensure you're using the Script component from next/script, not a regular <script> tag. Clear your browser cache or test in incognito mode.

Documentation