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

Guía paso a paso para sitios web con Contentful

Plataforma:

CMS headless: Contentful es un CMS headless, lo que significa 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és usando para renderizar su contenido de Contentful. 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 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 Contentful (Recomendado)

Si estás usando Next.js para renderizar su contenido de Contentful, añada 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.

Método 2: Gatsby con Contentful

Para sitios Gatsby que obtienen contenido de Contentful:

Instale gatsby-plugin-load-script (opcional pero recomendado):
npm install gatsby-plugin-load-script
Añada a su gatsby-config.js:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Alternativamente, use gatsby-ssr.js:
// gatsby-ssr.js 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" /> ]) }
Reinicia su servidor de desarrollo de Gatsby

Método 3: React con Contentful

Para aplicaciones React estándar (Create React App, Vite, etc.) que usan Contentful:

Abra su archivo public/index.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

O use un componente React con useEffect:

// 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 4: Vue/Nuxt con Contentful

Para aplicaciones Vue o Nuxt.js que usan Contentful:

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' } ] } } })

Vue 3:

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

Método 5: HTML estático con API de Contentful

Si estás usando la Content Delivery API de Contentful con JavaScript puro:

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 añadir el código del chatbot a su sitio con Contentful, despliega o ejecuta su servidor de desarrollo. Visite su sitio web en una nueva pestaña del navegador o en una ventana de incógnito. Deberías ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él 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) en lugar de codificarlo directamente.

Documentación