How to Add Asyntai AI Chatbot to Strapi

Step-by-step guide for Strapi-powered websites

Platform:

Headless CMS: Strapi is a headless CMS that provides content via API but doesn't include a built-in frontend. The chatbot installation depends on which frontend framework you're using to render your Strapi content. Choose the method below that matches your setup.

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.

Method 1: Next.js with Strapi (Recommended)

If you're using Next.js as your Strapi frontend (the most common setup), add the chatbot using the Script component:

Open your main layout file: app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
Import the Script component and add the chatbot:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Save the file and restart your development server

Tip: Using strategy="lazyOnload" ensures the chatbot loads after the page is fully interactive, providing the best performance for your Strapi-powered site.

Method 2: Gatsby with Strapi

For Gatsby sites using gatsby-source-strapi:

Create or edit gatsby-ssr.js in your project root:
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Restart your Gatsby development server

Method 3: Nuxt.js with Strapi

For Nuxt.js applications using @nuxtjs/strapi:

Nuxt 3:

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

Nuxt 2:

Add to your nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Method 4: React with Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Open your public/index.html file (CRA) or index.html (Vite)
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Save the file

Or create a React component:

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Method 5: SvelteKit with Strapi

For SvelteKit applications consuming Strapi content:

Edit your src/app.html file
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Save the file

Method 6: Static Site with Strapi API

If you're using Strapi's REST or GraphQL API with a static HTML site:

Add the embed code to your HTML file before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Save the file and upload to your hosting

Step 2: Verify Installation

After adding the chatbot code to your Strapi-powered site, deploy or run your development server. Visit your website in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to make sure it opens and works correctly.

Not seeing the widget? Make sure you've added the script to the correct file for your framework. Check your browser's developer console for any errors. If using server-side rendering, ensure the script runs on the client side. Try clearing your browser cache or viewing in an incognito window.

Environment Variables: For better security and flexibility, consider storing your widget ID in an environment variable (e.g., NEXT_PUBLIC_ASYNTAI_ID for Next.js or VITE_ASYNTAI_ID for Vite) rather than hardcoding it.

Documentation