How to Add Asyntai AI Chatbot to MedusaCMS

Step-by-step guide for Medusa-powered storefronts

Platform:

Important: Medusa is a headless e-commerce platform. The chatbot code needs to be added to your storefront application, not to the Medusa server/admin.

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 Storefront (Most Common)

Medusa's default storefront starter uses Next.js. Add the chatbot to your storefront's root layout:

App Router (Next.js 13+)

Open app/layout.tsx in your storefront project 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 your storefront uses the Pages Router, open pages/_document.tsx or pages/_app.tsx:

// 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: Gatsby Storefront

If your Medusa storefront uses Gatsby, add the script via gatsby-ssr.js using onRenderBody and setPostBodyComponents:

// 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 should also 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: Custom React Storefront

If your Medusa storefront uses a custom React setup (Vite, Create React App, etc.):

Add the script to public/index.html just before the closing </body> tag:

<!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.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
  );
}

Alternative Method 3: Any Custom Frontend

If your Medusa-powered store uses any other HTML-based frontend, simply add the standard script tag 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>

Tip: This method works with any frontend framework or static site generator that outputs HTML, including Vue, Svelte, Angular, Astro, and others connected to the Medusa backend.

Step 3: Deploy and Verify

After adding the code to your storefront application:

Deploy your storefront to your hosting provider (Vercel, Netlify, Railway, etc.)
Open your live storefront 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 storefront was redeployed after adding the code. For Next.js, ensure you're using the Script component from next/script, not a regular <script> tag. Remember, the code goes in the storefront, not the Medusa server. Clear your browser cache or test in incognito mode.

Documentation