🔌 Cómo incrustar el script de Ánima Bot en tu página web

¿Que estas buscando?

Contenidos
< All Topics
Print
Posted
Updated
Bywp-user-anima

El chat web de Ánima Bot se integra en tu sitio mediante un pequeño fragmento de código llamado script de incrustación.
Este script es el encargado de:

  • Cargar la burbuja del chatbot en tu sitio web.
  • Conectar tu página con el bot que creaste.
  • Mantener la misma experiencia de chat en todas las páginas donde lo instales.

En esta guía vas a aprender, paso a paso, cómo copiar el script desde Ánima Bot y cómo incrustarlo correctamente en tu sitio, ya sea HTML o WordPress.

1️⃣ Obtener el script desde Ánima Bot

Cuando terminás de diseñar tu chatbot y hacés clic en Guardar y Publicar, Ánima Bot muestra automáticamente una ventana emergente con el código listo para incrustar en tu sitio web.

Se ve así:

Esta ventana incluye dos partes del script:

  1. La librería del chatbot, que carga los componentes visuales:
<script src="https://cdn-chatbot.anima.bot/chatbot.umd.js"></script>
  1. La inicialización del bot, que conecta tu chatbot publicado con tu sitio:
<script>
window.onload = function() {
  initChatbot("AQUI_VA_TU_ID_DE_CHATBOT");
};
</script>

Pasos para obtener el script

  1. Publicá tu bot usando el botón Guardar y Publicar.
  2. Va a aparecer una ventana titulada “¡Tu Chatbot está listo!”.
  3. Copiá todo el código completo tal como aparece.
  4. Ese script es el que tenés que pegar en tu sitio web (en HTML, WordPress o cualquier plataforma compatible).

Importante: si más adelante modificás el diseño, no necesitás generar un script nuevo.
El script siempre apunta al mismo chatbot publicado.

2️⃣ Insertar el script en tu sitio web

Una vez que copiaste el código que genera Ánima Bot al publicar tu chatbot, el siguiente paso es insertarlo en tu sitio web para que el widget aparezca automáticamente en todas las páginas (o solo en las que vos quieras).

Ánima es compatible con cualquier plataforma que permita agregar código HTML o scripts.

Método A — Insertar el script en un sitio web HTML tradicional

Si tu sitio está hecho con archivos .html:

  1. Abrí el archivo donde querés que aparezca el chatbot (por ejemplo, index.html).
  2. Pegá el script antes de la etiqueta </body> para garantizar una carga correcta.

Ejemplo:

<body>
    <!-- Contenido de tu sitio -->

    <!-- Script de Ánima Bot -->
    <script src="https://cdn-chatbot.anima.bot/chatbot.umd.js"></script>
    <script>
      window.onload = function() {
        initChatbot("TU_ID_DE_CHATBOT");
      };
    </script>
</body>

Una vez guardado el archivo, actualizá tu sitio…
¡y el chatbot aparecerá automáticamente en la esquina inferior!

Método B — Incrustarlo en WordPress (sin plugins adicionales)

Si usás WordPress clásico:

  1. En el menú lateral, entrá a Apariencia → Editor de temas.
  2. Buscá el archivo footer.php.
  3. Pegá el script antes de </body>.
  4. Guardá los cambios.

Recomendado si querés que el chatbot esté visible en todo el sitio.

Método C — Incrustarlo en WordPress con Gutenberg / Kubio / Bloques

Si usás un constructor visual, como en tu caso:

  1. Abrí la página donde quieras que esté activo el bot.
  2. Agregá un bloque “Código HTML” o “Custom Code” (dependiendo del builder).
  3. Pegá el script.
  4. Guardá y actualizá la página.

Con este método podés elegir en qué páginas aparece el chatbot.

Método D — Incrustarlo en plataformas externas

Funciona también en:

  • Wix (Configuración → Insertar código personalizado)
  • Shopify (theme.liquid → antes de </body>)
  • Webflow (Project Settings → Custom Code)
  • Squarespace, Notion con plugins externos, etc.

Solo necesitás pegar el script tal cual.

3️⃣ Verificar que el chatbot se cargue correctamente

Una vez que incrustaste el script en tu sitio, es importante asegurarte de que el chatbot se muestra y funciona como corresponde. Seguí estos pasos:

1. Abrí tu sitio en una nueva pestaña

Ingresá a la URL donde pegaste el script.
El chatbot debería aparecer automáticamente en la esquina inferior derecha (salvo que lo configures para otro lado).

2. Revisá que el widget se despliegue correctamente

Probá:

  • Click en el widget.
  • Apertura y cierre del panel.
  • Visualización de tu mensaje de bienvenida.
  • Funcionamiento de los botones del árbol.

Si todo carga bien, el script está funcionando.

3. Comprobá la consola del navegador (opcional, pero útil)

Si el bot no aparece, abrí la consola:

  • Chrome: F12 → pestaña Console
  • Firefox: F12 → Console

Buscá:

  • Mensajes de error de JavaScript
  • Errores de carga del archivo chatbot.umd.js
  • Problemas de CORS o rutas incorrectas

4. Confirmá que el ID del chatbot sea correcto

En el script, la función debe tener un código como:

initChatbot("eyJpdiI6I...");

Si lo reemplazaste o lo tocaste, el bot no cargará.
Volvé a Guardar y publicar desde Ánima Bot y copiá nuevamente el script.

5. Probá en navegación anónima o desde tu celular

Esto te permite validar que:

  • No esté cargando una versión vieja en caché.
  • No existan bloqueos de extensiones, adblockers o cookies.
  • El bot se vea bien en modo responsive.

6. Si tu sitio usa Cloudflare, CDN o caché agresivo

Puede ser necesario:

  • Vaciar caché del sitio
  • Desactivar minificación de JS
  • Esperar algunos segundos a que propague la actualización

Resultado esperado

Si todo está correcto:

  • El widget aparece siempre
  • Las respuestas se muestran según tu árbol
  • Las redirecciones funcionan
  • Los logs comienzan a registrarse en Ánima Bot

4️⃣ Buenas prácticas para incrustar el chatbot

Para asegurar que Ánima Bot funcione sin problemas en cualquier sitio, tené en cuenta estas recomendaciones:

Pegá siempre el script antes del cierre de </body>

Esto garantiza:

  • Que no bloquee la carga del contenido principal.
  • Que el chatbot se inicialice correctamente una vez renderizada la página.

No modifiques el script generado por Ánima Bot

El código incluye:

  • El archivo principal del widget.
  • Tu ID único de chatbot.
  • Parámetros internos de inicialización.

Cualquier cambio puede impedir que funcione.

Evitá pegar el script dos veces

Si está duplicado:

  • El widget puede aparecer dos veces.
  • Se generan errores de inicialización.
  • Aumenta el consumo de recursos del sitio.

Revisá especialmente si usás plantillas o constructores visuales (Elementor, Divi, WordPress FSE, etc.).

Asegurate de que no haya bloqueadores de scripts

Algunas configuraciones pueden bloquearlo:

  • Firewalls estrictos.
  • Extensiones como uBlock o Ghostery.
  • Políticas de seguridad de contenido (CSP) mal configuradas.

Si usás CSP, agregá:

https://cdn-chatbot.anima.bot

a la whitelist.

Usá navegación anónima para probar cambios

La caché suele causar:

  • Scripts viejos que siguen cargando.
  • Chatbots que no se actualizan.
  • Widgets que no aparecen aunque la integración esté bien.

Incógnito = entorno limpio.

Si usás Cloudflare o un CDN, desactivá la minificación de JavaScript

Algunas optimizaciones pueden romper widgets externos.
Si después querés reactivarla, hacelo excluyendo el archivo:

https://cdn-chatbot.anima.bot/chatbot.umd.js

5️⃣ Resumen rápido (para quien quiere resolverlo en 30 segundos)

1. Guardá y publicá tu chatbot en Ánima Bot.
2. Copiá el script que aparece en la ventana final.
3. Pegalo en tu página antes del </body>.
4. Guardá los cambios y recargá el sitio.
5. Verificá que el widget aparece en la esquina de tu página.

Listo: tu chatbot quedó integrado en tu web.

Notas Relacionadas