Back to Dashboard

Documentation

Learn how to use Asyntai

Getting Started
Installation Knowledge Base Test Your AI Manage Websites Customization AI Instructions Tips
Features
Website Crawl Knowledge Gaps Product Cards User Context Live Monitoring Human Takeover Escalation AI Notifications Daily Report Real-Time Data Feed Team Members Single Sign-On Include Images Image Vision Translation Widget Localization Leads Support Tickets Bookings Exclude Pages Smarter Model Enable Thinking Reply Suggestions Follow-up Messages Transcript Download
Analytics
Chat Analytics Chat Logs
Integrations
REST API Instagram Messenger WhatsApp Zapier Email Mobile Apps
Other
Add to Home Screen

How to Add Asyntai AI Chatbot to Contentful

Step-by-step guide for Contentful-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 Craft CMS Craft CMS Contentful Contentful Strapi Strapi Joomla Joomla Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Statamic Statamic Umbraco Umbraco Moodle Moodle

Headless CMS: Contentful is a headless CMS, meaning it 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 Contentful 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 Contentful (Recommended)

If you're using Next.js to render your Contentful content, add the chatbot using the Script component:

  1. Open your main layout file: app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
  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="lazyOnload"
            />
          </body>
        </html>
      )
    }
  3. Replace YOUR_WIDGET_ID with your actual widget ID
  4. 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.

Method 2: Gatsby with Contentful

For Gatsby sites pulling content from Contentful:

  1. Install gatsby-plugin-load-script (optional but recommended):
    npm install gatsby-plugin-load-script
  2. Add to your gatsby-config.js:
    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-plugin-load-script',
          options: {
            src: 'https://asyntai.com/static/js/chat-widget.js',
            attributes: {
              'data-asyntai-id': 'YOUR_WIDGET_ID',
              async: true
            }
          }
        }
      ]
    }
  3. Alternatively, use gatsby-ssr.js:
    // gatsby-ssr.js
    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"
        />
      ])
    }
  4. Restart your Gatsby development server

Method 3: React with Contentful

For standard React apps (Create React App, Vite, etc.) using Contentful:

  1. Open your public/index.html file
  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

Or use a React component with useEffect:

// 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 4: Vue/Nuxt with Contentful

For Vue or Nuxt.js applications using Contentful:

Nuxt 3:

  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'
            }
          ]
        }
      }
    })

Vue 3:

  1. Add to your index.html before </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Method 5: Static HTML with Contentful API

If you're using Contentful's Content Delivery API with vanilla JavaScript:

  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. Save the file and upload to your hosting

Step 2: Verify Installation

After adding the chatbot code to your Contentful-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) rather than hardcoding it.