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

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

Plataforma:

Importante: Sanity es un CMS headless que entrega contenido a través de APIs. El código del chatbot debe agregarse a su aplicación frontend (Next.js, Gatsby, Nuxt, HTML plano, etc.), no al propio Sanity Studio.

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)

Si su sitio impulsado por Sanity usa Next.js (la combinación más común), agregue el chatbot a su layout raíz:

App Router (Next.js 13+)

Abra app/layout.js (o app/layout.tsx) 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 usa el Pages Router, abra pages/_app.js:

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 de Gatsby

Si su sitio Sanity usa Gatsby, agregue el script a través de gatsby-ssr.js:

// 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 necesita 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: Frontend de Nuxt.js

Si su sitio Sanity usa Nuxt.js, agregue el script en nuxt.config.js (o nuxt.config.ts):

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

Método alternativo 3: Frontend HTML plano

Si su sitio impulsado por Sanity usa HTML plano o un generador de sitios estáticos que consume la API de Sanity:

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>

Método alternativo 4: React (Vite o Create React App)

Si su frontend usa React con Vite o Create React App:

Agregue el script a index.html en el directorio public/:

<!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.jsx or App.tsx
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
  );
}

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