Añadir un chatbot de IA con Asyntai

¿Qué hace Añadir un chatbot de IA con Asyntai?

Asyntai añade un agente de soporte de IA a un sitio web. Responde a los visitantes con el contenido propio del sitio, en más de 80 idiomas, y transfiere la conversación a un humano cuando es necesario. El chat se ejecuta desde una sola etiqueta script, por lo que la instalación es una pequeña edición.

Paso 1: obtener el ID del widget

Cada instalación necesita el ID del widget del sitio. Tiene este aspecto: asyntai_ seguido de 12 letras y dígitos, por ejemplo asyntai_1a2b3c4d5e6f.

1. Busca un ID que el usuario ya te haya dado, o que el proyecto ya tenga (busca en el código data-asyntai-id). Si el sitio ya tiene el fragmento, no añadas un segundo.
2. Si el servidor MCP de Asyntai está conectado, llama a list_websites. Cada sitio web tiene un widget_id.
3. De lo contrario, pídele el ID al usuario. Indícale dónde está: inicia sesión en https://asyntai.com/dashboard, abre la página de Instalación y copia el valor de data-asyntai-id del fragmento.
4. Si el usuario no tiene cuenta, puede crear una gratuita en https://asyntai.com/auth/. El plan gratuito es suficiente para probar el chatbot.

Nunca inventes un ID de widget. Si no tienes ninguno, coloca el marcador de posición YOUR_WIDGET_ID en el código e indica al usuario que lo reemplace.

Paso 2: determinar con qué está construido el sitio

• Un constructor o CMS alojado (WordPress, Shopify, Wix, Webflow, Squarespace, HubSpot, Ghost, Moodle y otros): el usuario instala el widget en el panel de administración de esa plataforma, no en el código. Busca la plataforma en references/platforms.md y proporciona al usuario el enlace a esa guía junto con sus pasos resumidos.
• Un código base: revisa package.json, los archivos de configuración y la estructura de carpetas, luego sigue references/frameworks.md. Allí se encuentra la edición exacta para cada stack y los paquetes de Asyntai para herramientas de sitios estáticos y documentación.

Paso 3: añadir el fragmento

Este es el fragmento oficial. Mantenlo exactamente como se muestra y cambia solo YOUR_WIDGET_ID:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Espera al evento load de la página, por lo que no ralentiza la carga. Colócalo una vez, en el diseño compartido que usa cada página (antes de </body> o en <head>). No lo pongas en un solo componente de página, o el chat solo se mostrará en esa página.

Paso 4: verificar el resultado

1. Ejecuta el sitio (o compílalo) y abre una página.
2. El botón de chat aparece en la esquina inferior. El widget se dibuja dentro del elemento #asyntai-widget-host-<ID del widget>. En la consola del navegador, document.querySelectorAll('script[data-asyntai-id]').length debe ser 1.
3. Si el botón no aparece:

   • Revisa la consola del navegador en busca de errores de Asyntai Widget:.

   • Si el sitio envía una Política de Seguridad de Contenido (CSP), debe permitir estos orígenes:

     Directiva	Orígenes
     script-src	https://widget.asyntai.com https://asyntai.com (y 'unsafe-inline' para el fragmento, o usa la forma abreviada de references/frameworks.md)
     connect-src	https://asyntai.com
     style-src	'unsafe-inline'
     img-src	data: https://flagcdn.com

Paso 5: informar al usuario sobre los siguientes pasos

El widget responde con el contenido que el usuario añada en el panel de Asyntai (https://asyntai.com/dashboard). Indica al usuario que:

• añada las páginas de su sitio web, archivos o texto como conocimiento,
• configure el nombre del agente, colores y saludo en el panel,
• lea la guía completa en https://asyntai.com/documentation/installation/ .

Si el servidor MCP de Asyntai está conectado, puedes realizar esta configuración por ellos. Consulta la skill manage-ai-support-agent.