Cómo añadir el chatbot de IA de Asyntai a MedusaCMS

Guía paso a paso para tiendas impulsadas por Medusa

Plataforma:

Importante: Medusa es una plataforma de comercio electrónico headless. El código del chatbot debe agregarse a tu aplicación de tienda, no al servidor/administración de Medusa.

Paso 1: Obtén su código de inserción

Primero, ve a tu Panel de control de Asyntai y desplázate hasta la sección "Código de inserción". Copia tu código de inserción único que se verá así:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: El código anterior es solo un ejemplo. Debe copiar su propio código de inserción único desde su Panel de control ya que contiene su ID de widget personal.

Paso 2: Añadir a la tienda Next.js (Más común)

El storefront starter predeterminado de Medusa usa Next.js. Agregue el chatbot al layout raíz de su storefront:

App Router (Next.js 13+)

Abra app/layout.tsx en su proyecto de storefront y agregue el componente Script:

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

Si su storefront usa el Pages Router, abra pages/_document.tsx o 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"
      />
    </>
  )
}

Consejo: La opción strategy="afterInteractive" asegura que el chatbot se cargue después de que la página sea interactiva, proporcionando la mejor experiencia de usuario sin afectar el rendimiento de carga de la página.

Método alternativo 1: Tienda Gatsby

Si su storefront de Medusa usa Gatsby, agregue el script a través de gatsby-ssr.js usando onRenderBody y 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"
    />
  ]);
};

Nota: También debería agregar el mismo código a gatsby-browser.js si desea que el widget persista durante la navegación del lado del cliente. Alternativamente, agréguelo a su componente de layout raíz.

Método alternativo 2: Tienda React personalizada

Si su storefront de Medusa usa una configuración personalizada de React (Vite, Create React App, etc.):

Agrega el script a public/index.html justo antes de la etiqueta de cierre </body>:

<!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>

O use un hook useEffect en su componente raíz:

// 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
  );
}

Método alternativo 3: Cualquier frontend personalizado

Si su tienda impulsada por Medusa usa cualquier otro frontend basado en HTML, simplemente agregue la etiqueta de script estándar justo antes de la etiqueta de cierre </body>:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Consejo: Este método funciona con cualquier framework de frontend o generador de sitios estáticos que produzca HTML, incluyendo Vue, Svelte, Angular, Astro y otros conectados al backend de Medusa.

Paso 3: Desplegar y verificar

Después de añadir el código a su aplicación de tienda:

Despliegue su storefront en su proveedor de hosting (Vercel, Netlify, Railway, etc.)
Abra su tienda en vivo en una nueva pestaña del navegador
Deberías ver el botón del widget de chat en la esquina inferior derecha
Haz clic en él para asegurarte de que se abre y funciona correctamente

¿No ves el widget? Asegúrate de haber reemplazado YOUR_WIDGET_ID con tu ID de widget real del panel. Verifica que el script se esté cargando en la pestaña Red de tu navegador (F12 > Red). Verifica que la tienda se haya redesplegado después de agregar el código. Para Next.js, asegúrate de usar el componente Script de next/script, no una etiqueta <script> normal. Recuerda, el código va en la tienda, no en el servidor Medusa. Limpia la caché del navegador o prueba en modo incógnito.

Documentación