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 traves de API pero no incluye un frontend integrado. La instalación del chatbot depende del framework de frontend que estes usando para renderizar su contenido de Strapi. Elija el método a continuacion que coincida con su configuración.

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

Primero, ve a su Panel de control de Asyntai y desplácese hasta la sección "Código de inserción". Copie su 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 estas usando Next.js como su frontend de Strapi (la configuración mas comun), agrega 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 edita 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

For standard React apps (Create React App, Vite) consuming Strapi API:

Abra su archivo public/index.html (CRA) o index.html (Vite)
Add the embed code before the closing </body> tag:
<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:

Edita su archivo src/app.html
Add the embed code before the closing </body> tag:
<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 usas 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, despliega o ejecuta su servidor de desarrollo. Visite su sitio web en una nueva pestana del navegador o en una ventana de incognito. Deberias ver el botón del widget de chat en la esquina inferior derecha. Haga clic en el para asegurarte de que se abra y funciona 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, considera 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