BOT247
Volver al centro de ayuda
Integración

Widget vs iFrame

Dos formas de agregar tu chatbot a cualquier sitio web

BOT247 te ofrece dos formas de integrar tu chatbot en tu sitio web. Ambas funcionan en cualquier plataforma, pero cada una tiene ventajas según tu caso de uso.

Widget flotante

Una burbuja flotante que aparece en la esquina de tu sitio. Al dar clic, se abre una ventana de chat sin salir de la página.

No interrumpe la experiencia del visitante
Disponible en todas las páginas
Personalizable (colores, posición, tamaño)
Se adapta a móviles automáticamente

iFrame incrustado

Una ventana de chat fija que se muestra directamente dentro de tu página, como parte del contenido.

El chat siempre está visible
Ideal para páginas dedicadas de soporte
Se integra como contenido de la página
Puedes controlar el tamaño exacto

¿Cuál elegir?

SituaciónWidgetiFrame
Quiero chat en todas mis páginas
Tengo una página de soporte dedicada
No quiero que el chat tape contenido
Quiero que los visitantes vean la burbuja mientras navegan
Quiero un chatbot dentro de mi aplicación web

Guía por plataforma

Página HTML estándar

Widget

Pega el código del Widget justo antes de la etiqueta de cierre </body> en tu archivo HTML. El chatbot aparecerá automáticamente en todas las páginas donde incluyas el código.

WordPress

Widget

Ve a Apariencia → Editor del tema → footer.php y pega el código del Widget antes de </body>. También puedes usar un plugin como 'Insert Headers and Footers' para pegarlo sin tocar código.

Shopify

Widget

Ve a Tienda online → Temas → Editar código → theme.liquid y pega el código del Widget justo antes de </body>. Aparecerá en toda tu tienda.

Wix / Squarespace

Widget

En Wix: Configuración → Código personalizado → Agregar código al body (final). En Squarespace: Configuración → Avanzado → Inyección de código → Footer.

Página de soporte / Centro de ayuda

iFrame

Usa el código de iFrame para incrustar el chat directamente en la sección de soporte de tu sitio. Ajusta el ancho y alto según el espacio disponible en tu diseño.

¿Dónde pegar cada código?

Widget flotante

El código del widget va antes de la etiqueta de cierre </body> de tu HTML. Esto asegura que tu página cargue primero y el widget se agregue al final sin afectar la velocidad.

  <!-- Tu contenido aquí -->

  <!-- Bot247 Chat Widget -->
  <script>
    window.Bot247Config = {
      chatbotId: "tu-chatbot-id"
    };
  </script>
  <script src="https://www.bot247.ai/embed/widget.js" async></script>
</body>

iFrame incrustado

El código del iFrame va donde quieras que aparezca el chat dentro del contenido de tu página. Puedes ajustar el ancho (width) y alto (height) según tu diseño.

<iframe
  src="https://www.bot247.ai/widget/tu-chatbot-id"
  width="100%"
  height="600"
  frameborder="0"
  style="border-radius: 12px;"
></iframe>

Consejos

  • El Widget es la opción más popular. Funciona en cualquier sitio sin modificar tu diseño actual.
  • Puedes usar ambos en el mismo sitio: el Widget en todas las páginas y el iFrame en tu sección de soporte.
  • Los colores y el tema se aplican automáticamente según lo que configures en tu panel de control.