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

Guía paso a paso para sitios web impulsados por PayloadCMS

Plataforma:

Importante: PayloadCMS es un CMS headless. El código del chatbot debe agregarse a su aplicación frontend, no al panel de administracion de Payload.

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 al frontend de Next.js (Más común)

PayloadCMS comunmente use Next.js como su framework de frontend. Agrega el chatbot a su layout raiz:

App Router (Next.js 13+)

Abra app/layout.tsx y añada 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 usas el Pages Router, abra 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: Frontend React personalizado

Si su proyecto de PayloadCMS use un frontend personalizado de React en lugar de Next.js, puede cargar el chatbot dinamicamente con un hook useEffect:

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

Nota: Reemplaza YOUR_WIDGET_ID con su ID de widget real del panel de control. La función de limpieza en la sentencia return asegura que el script se elimine si el componente se desmonta.

Método alternativo 2: Usando componentes personalizados de Payload (solo panel de administracion)

Si deseas que el chatbot aparezca dentro del propio panel de administracion de Payload (para soporte interno), puede registrar un componente personalizado en su payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Luego cree el archivo del componente:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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 null;
};

export default AsyntaiChatbot;

Consejo: Este método es solo para agregar el chatbot al panel de administracion de Payload. Para su sitio web público, use el Paso 2 o el Método alternativo 1 en su lugar.

Método alternativo 3: HTML plano / Sitio estático

Si su sitio impulsado por PayloadCMS use un frontend HTML plano o estatico que consume la API de Payload, agrega el código de inserción directamente a su HTML:

Abre tu archivo HTML principal (generalmente index.html)
Agrega el código de inserción 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>

Paso 3: Desplegar y verificar

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

Despliega tu frontend en tu proveedor de hosting (Vercel, Netlify, etc.)
Abra su sitio 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? Asegurate de haber reemplazado YOUR_WIDGET_ID con su ID de widget real del panel de control. Verifique que el script se este cargando en la pestana Network del navegador (F12 > Network). Verifique que el frontend se haya redesplegado después de agregar el código. Para Next.js, asegurate de usar el componente Script de next/script, no una etiqueta <script> regular. Limpie la cache del navegador o pruebe en modo incognito.

Documentación