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

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

Plataforma:

CMS headless: Strapi es un CMS headless que proporciona contenido a través de API pero no incluye un frontend integrado. La instalación del chatbot depende del framework de frontend que esté usando para renderizar su contenido de Strapi. Elija el método a continuación que coincida con su configuración.

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.

Método 1: Next.js con Strapi (Recomendado)

Si está usando Next.js como su frontend de Strapi (la configuración más común), agregue el chatbot usando el componente Script:

Abra su archivo de diseño principal: app/layout.tsx (App Router) o pages/_app.tsx (Pages Router)
Importa el componente Script y añada el 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> ) }
Reemplaza YOUR_WIDGET_ID con su ID de widget real
Guarde el archivo y reinicia su servidor de desarrollo

Consejo: Usar strategy="lazyOnload" asegura que el chatbot se cargue después de que la página sea completamente interactiva, proporcionando el mejor rendimiento para su sitio impulsado por Strapi.

Método 2: Gatsby con Strapi

Para sitios Gatsby que usan gatsby-source-strapi:

Cree o edite gatsby-ssr.js en la raíz de su proyecto:
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" /> ]) }
Reemplaza YOUR_WIDGET_ID con su ID de widget real
Reinicia su servidor de desarrollo de Gatsby

Método 3: Nuxt.js con Strapi

Para aplicaciones Nuxt.js que usan @nuxtjs/strapi:

Nuxt 3:

Añada a su 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' } ] } } })

Nuxt 2:

Añada a su nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Método 4: React con Strapi

Para apps React estándar (Create React App, Vite) que consumen la API de Strapi:

Abra su archivo public/index.html (CRA) o index.html (Vite)
Agrega el código de incrustación 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>
Guarde el archivo

O cree un componente React:

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

Método 5: SvelteKit con Strapi

Para aplicaciones SvelteKit que consumen contenido de Strapi:

Edite su archivo src/app.html
Agrega el código de incrustación 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>
Guarde el archivo

Método 6: Sitio estático con API de Strapi

Si usa la API REST o GraphQL de Strapi con un sitio HTML estático:

Añada el código de inserción a su archivo HTML 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>
Guarde el archivo y súbelo a su hosting

Paso 2: Verificar la instalación

Después de agregar el código del chatbot a su sitio impulsado por Strapi, despliegue o ejecute su servidor de desarrollo. Visite su sitio web en una nueva pestaña del navegador o en una ventana de incógnito. Debería ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él para asegurarse de que se abra y funcione correctamente.

¿No ves el widget? Asegúrese de haber añadido el script al archivo correcto para su framework. Revise la consola de desarrollador de su navegador para verificar si hay errores. Si usas renderizado del lado del servidor, asegúrese de que el script se ejecute en el lado del cliente. Intenta limpiar la caché de su navegador o ver en una ventana de incógnito.

Variables de entorno: Para mayor seguridad y flexibilidad, considere almacenar su ID de widget en una variable de entorno (por ejemplo, NEXT_PUBLIC_ASYNTAI_ID para Next.js o VITE_ASYNTAI_ID para Vite) en lugar de codificarlo directamente.

Documentación