Volver al panel

Documentación

Aprende a usar Asyntai

Primeros pasos
Instalación Base de conocimientos Pruebe su IA Gestionar sitios web
Personalización
Colores del widget Nombre del asistente IA Mensaje inicial Posición del widget Activación automática Burbuja de saludo Insignia de no leído Modo de instrucción Hacer preguntas Usar emoji Recopilar emails Recopilar números de teléfono Captura inteligente de prospectos Localización Ocultar marca Enlace de privacidad Aviso personalizado Descarga de transcripción Nueva conversación Historial de conversaciones Subtítulo y punto de estado Voz a texto Icono del chat Logo de la empresa Límite de caracteres Temperatura
Consejos para instrucciones de IA Comparar planes
Características
Rastreo del sitio web Lagunas de conocimiento Fichas de producto Tarjetas de productos dinámicas Dynamic Images Contexto de usuario Monitoreo en vivo Toma de control humano Transferencia Notificaciones IA Informe diario Fuente de datos en tiempo real Fuente de datos en tiempo real Max Miembros del equipo Inicio de sesión único Incluir imágenes Visión por imagen Widget de traducción Localización Prospectos Captura inteligente de prospectos Tickets de soporte Reservas Incrustaciones Excluir páginas IPs bloqueadas Modelo más inteligente Activar razonamiento Sugerencias de respuesta Mensajes de seguimiento Voz a texto Descarga de transcripción Chat integrado
Análisis
Analíticas de chat Registros de chat
Integraciones
REST API Instagram Messenger WhatsApp Zapier Email Aplicaciones móviles
Otros
Añadir a pantalla de inicio Botón de apertura personalizado
Preguntar a la IA

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

Guía paso a paso para sitios web con DatoCMS

Obtener código de inserción
Plataforma:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

CMS headless: DatoCMS es un CMS headless que entrega contenido a través de APIs. El código del chatbot debe añadirse a su aplicación frontend (Next.js, Gatsby, Nuxt, etc.), no al panel de DatoCMS.

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)

Next.js es el framework frontend más popular usado con DatoCMS. Añada el chatbot usando el componente Script:

App Router (app/layout.tsx):

  1. Abra su archivo de diseño raíz: app/layout.tsx
  2. 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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Reemplaza YOUR_WIDGET_ID con su ID de widget real
  4. Guarde el archivo y reinicia su servidor de desarrollo

Pages Router (pages/_app.tsx):

  1. Abra su archivo pages/_app.tsx
  2. Añada el componente Script:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

Consejo: Usar strategy="afterInteractive" asegura que el chatbot se cargue justo después de que la página sea interactiva, proporcionando un buen equilibrio entre rendimiento y disponibilidad.

Método alternativo 1: Frontend de Gatsby

Para sitios Gatsby que obtienen contenido de DatoCMS a través de gatsby-source-datocms:

  1. 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"
        />
      ])
    }
  2. Reemplaza YOUR_WIDGET_ID con su ID de widget real
  3. Reinicia su servidor de desarrollo de Gatsby

Método alternativo 2: Frontend de Nuxt.js

Para aplicaciones Nuxt.js que consumen contenido de DatoCMS:

  1. 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'
            }
          ]
        }
      }
    })
  2. Reemplaza YOUR_WIDGET_ID con su ID de widget real
  3. Reinicie su servidor de desarrollo de Nuxt

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

Si estás usando la Content Delivery API de DatoCMS con un sitio HTML estático o un generador de sitios estáticos:

  1. 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>
  2. Reemplaza YOUR_WIDGET_ID con su ID de widget real
  3. Guarde el archivo y súbelo a su hosting

Método alternativo 4: React (Vite/CRA)

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

Opción A: Añadir a public/index.html

  1. Abra su archivo public/index.html (CRA) o index.html (Vite)
  2. 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>
  3. Guarde el archivo

Opción B: useEffect en el componente raíz

  1. Cree un componente de chatbot o añádalo a su componente raíz:
    // 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
    }
  2. Importe y renderice el componente en su App.jsx o diseño raíz

Paso 3: Desplegar y verificar

Después de añadir el código del chatbot a su sitio con DatoCMS, 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.