Back to Dashboard

Documentation

Learn how to use Asyntai

Getting Started
Installation Knowledge Base Test Your AI Manage Websites
Customization
Widget Colors AI Assistant Name Initial Message Widget Position Auto-Trigger Notification Bubble Unread Badge Instruction Mode Ask Questions Use Emoji Collect Emails Collect Phone Numbers Smart Lead Capture Localization Hide Branding Privacy Link Custom Notice Transcript Download New Conversation Conversation History Tagline & Status Dot Speech to Text Chat Icon Company Logo Character Limit Temperature
AI Instructions Tips Compare Plans
Features
Website Crawl Knowledge Gaps Product Cards User Context Live Monitoring Human Takeover Escalation AI Notifications Daily Report Real-Time Data Feed Real-Time Data Feed Max Team Members Single Sign-On Include Images Image Vision Translation Widget Localization Leads Smart Lead Capture Support Tickets Bookings Exclude Pages Smarter Model Enable Thinking Reply Suggestions Follow-up Messages Speech to Text Transcript Download Embedded Chat
Analytics
Chat Analytics Chat Logs
Integrations
REST API Instagram Messenger WhatsApp Zapier Email Mobile Apps
Other
Add to Home Screen Custom Open Button

How to Add Asyntai AI Chatbot to DatoCMS

Step-by-step guide for DatoCMS-powered websites

Get Embed Code
Platform:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

Headless CMS: DatoCMS is a headless CMS that delivers content via APIs. The chatbot code needs to be added to your frontend application (Next.js, Gatsby, Nuxt, etc.), not to the DatoCMS dashboard.

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)

Next.js is the most popular frontend framework used with DatoCMS. Add the chatbot using the Script component:

App Router (app/layout.tsx):

  1. Open your root layout file: app/layout.tsx
  2. 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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Replace YOUR_WIDGET_ID with your actual widget ID
  4. Save the file and restart your development server

Pages Router (pages/_app.tsx):

  1. Open your pages/_app.tsx file
  2. Add the Script component:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

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

Tip: Using strategy="afterInteractive" ensures the chatbot loads right after the page becomes interactive, providing a good balance between performance and availability.

Alternative Method 1: Gatsby Frontend

For Gatsby sites pulling content from DatoCMS via gatsby-source-datocms:

  1. 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"
        />
      ])
    }
  2. Replace YOUR_WIDGET_ID with your actual widget ID
  3. Restart your Gatsby development server

Alternative Method 2: Nuxt.js Frontend

For Nuxt.js applications consuming DatoCMS content:

  1. 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'
            }
          ]
        }
      }
    })
  2. Replace YOUR_WIDGET_ID with your actual widget ID
  3. Restart your Nuxt development server

Alternative Method 3: Plain HTML / Static Site

If you're using DatoCMS's Content Delivery API with a static HTML site or static site generator:

  1. 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>
  2. Replace YOUR_WIDGET_ID with your actual widget ID
  3. Save the file and upload to your hosting

Alternative Method 4: React (Vite/CRA)

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

Option A: Add to public/index.html

  1. Open your public/index.html file (CRA) or index.html (Vite)
  2. 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>
  3. Save the file

Option B: useEffect in Root Component

  1. Create a chatbot component or add to your root 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
    }
  2. Import and render the component in your App.jsx or root layout

Step 3: Deploy and Verify

After adding the chatbot code to your DatoCMS-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.