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 notificación 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 Contexto de usuario Monitoreo en vivo Control humano Escalamiento 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 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

Cómo añadir el chatbot de IA Asyntai a cualquier sitio web

Universal guide for HTML, custom sites, and static generators

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

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.

Paso 2: Añadir a su archivo HTML

La forma más simple de añadir el chatbot es pegar el código de inserción directamente en su archivo HTML:

  1. Abra su archivo HTML en un editor de texto
  2. Encuentra la etiqueta de cierre </body>
  3. Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>
  4. Guarde el archivo
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Consejo: Añadir el script antes de la etiqueta de cierre </body> asegura que se cargue después del contenido de su página, lo cual es óptimo para el rendimiento y no ralentizará su página.

Para sitios web de múltiples páginas

Si su sitio web tiene múltiples páginas HTML, tiene varias opciones:

Opción A: Añadir a cada página

Añada el código de inserción a cada archivo HTML donde desees que aparezca el chatbot.

Opción B: Usar un archivo de pie de página común

If you're using server-side includes (SSI), PHP includes, or similar:

  1. Cree un archivo footer.html (o footer.php)
  2. Añada el código de inserción de Asyntai a este archivo
  3. Incluye este archivo de pie de página en todas sus páginas:
    <!-- For PHP -->
    <?php include 'footer.php'; ?>

    <!-- For SSI -->
    <!--#include virtual="/footer.html" -->

Opción C: Carga dinámica con JavaScript

Create a single JavaScript file that loads the chatbot on all pages:

  1. Cree un archivo llamado asyntai-loader.js:
    (function() {
      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://asyntai.com/static/js/chat-widget.js';
      script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
      document.body.appendChild(script);
    })();
  2. Reemplaza YOUR_WIDGET_ID con su ID de widget real
  3. Incluye este script en todas sus páginas:
    <script src="/js/asyntai-loader.js"></script>

Para generadores de sitios estáticos

Si estás usando un generador de sitios estáticos, añada el código de inserción a su diseño base o plantilla:

Jekyll

Añadir a _includes/footer.html o _layouts/default.html

Hugo

Añadir a layouts/partials/footer.html o layouts/_default/baseof.html

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

Añadir a pages/_document.js o usar el componente next/script

Nuxt.js

Añada a nuxt.config.js bajo head.script

Eleventy (11ty)

Añada a su diseño base en _includes/

Astro

Añadir a src/layouts/Layout.astro antes de </body>

VuePress

Añada a .vuepress/config.js bajo head

Para apps React / Vue / Angular

Para aplicaciones de una sola página (SPAs), puede añadir el script a su index.html o cargarlo dinámicamente:

React (método index.html)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (método useEffect)

// In your App.js or a component
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);
}, []);

Vue (en main.js o App.vue)

// In mounted() or onMounted()
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);

Angular (en index.html)

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

Paso 3: Verificar la instalación

Después de añadir el código, abra 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? Verifique que el script esté correctamente colocado antes de la etiqueta </body>. Asegúrese de que no haya errores de JavaScript en la consola de su navegador (presiona F12 para abrir las herramientas de desarrollador). Intenta limpiar la caché de su navegador o ver en una ventana de incógnito.

Importante: El chatbot requiere que su sitio web se sirva a través de HTTP o HTTPS (no abierto directamente como archivo). Si estás probando localmente, use un servidor de desarrollo local.