How to Add Asyntai AI Chatbot to PayloadCMS

Step-by-step guide for PayloadCMS-powered websites

Platform:

Important: PayloadCMS is a headless CMS. The chatbot code needs to be added to your frontend application, not to the Payload admin panel.

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)

PayloadCMS commonly uses Next.js as its frontend framework. Add the chatbot to your root layout:

App Router (Next.js 13+)

Open 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.tsx:

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: Custom React Frontend

If your PayloadCMS project uses a custom React frontend instead of Next.js, you can load the chatbot dynamically with a useEffect hook:

// App.tsx or App.jsx
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
  );
}

Note: Replace YOUR_WIDGET_ID with your actual widget ID from the dashboard. The cleanup function in the return statement ensures the script is removed if the component unmounts.

Alternative Method 2: Using Payload's Custom Components (Admin Panel Only)

If you want the chatbot to appear inside the Payload admin panel itself (for internal support), you can register a custom component in your payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Then create the component file:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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 null;
};

export default AsyntaiChatbot;

Tip: This method is only for adding the chatbot to the Payload admin panel. For your public-facing website, use Step 2 or Alternative Method 1 instead.

Alternative Method 3: Plain HTML/Static Site

If your PayloadCMS-powered site uses a plain HTML or static frontend consuming the Payload API, add the embed code directly to your HTML:

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>

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