La funcionalidad de Widgets permite visualizar aplicaciones o sitios web externos (mediante una URL) en diversas pantallas de Botmaker. Esto facilita que los equipos tengan acceso a CRM, dashboards de métricas o herramientas propias sin salir de la plataforma.

Puedes:

• Embeber cualquier herramienta externa autorizada a través de una URL.
• Configurar la visibilidad del widget según el rol del usuario (Agente, Supervisor, Admin).
• Personalizar el formato visual (panel lateral o ventana flotante).
• Disponibilizar la herramienta en más de 20 pantallas diferentes (Chats, Contactos, Tickets, etc.).
• Establecer comunicación bidireccional para que el widget envíe o reciba datos de Botmaker.

Requisitos previos

• Acceso a tu cuenta de Botmaker con permisos de Supervisor o Super Admin para la configuración inicial.
• URL de la herramienta externa que deseas embeber (debe permitir la carga en iframes).
• Conocimientos técnicos básicos si se desea implementar la comunicación bidireccional o validación de seguridad.

Conceptos clave

• Comunicación bidireccional: Capacidad del widget para interactuar con la interfaz de Botmaker (ej: completar un campo de texto automáticamente).
• Panel: El widget aparece a un costado y "empuja" el contenido de la pantalla para no taparlo.
• Superpuesto (Flotante): El widget aparece sobre el contenido y puede ser arrastrado o redimensionado.
• Permisos de dominio: Configuración de seguridad necesaria para que el navegador permita cargar recursos externos (imágenes, fuentes) dentro del widget.

Cómo configurar tu primer Widget

Paso 1: Ingresa a la sección de configuración Dirígete al menú de Canales e Integraciones y selecciona la opción Widgets Personalizados.

Paso 2: Crea y personaliza el widget

Haz clic en "Crear Widget personalizado".

Ingresa la URL de la herramienta que quieres embeber.

Selecciona las pantallas donde quieres que aparezca (ej: Pantalla de chats, Contactos, Tickets).

Define el formato visual: elige entre un panel lateral (que empuja el contenido) o un widget flotante superpuesto.

Configura dimensiones (ancho/alto) y si permites que el usuario lo arrastre o lo cierre.

Paso 3: Define la visibilidad por roles Configura qué perfiles de tu equipo podrán ver y utilizar el widget. Puedes restringirlo solo a supervisores o habilitarlo para todos los agentes.

Paso 4: Autoriza dominios de seguridad Si tu widget utiliza imágenes o fuentes de otros sitios, asegúrate de agregar esos dominios en la sección de seguridad para evitar bloqueos del navegador.

Paso 5: Prueba en el Playground Utiliza el Preview en vivo para interactuar con el widget antes de activarlo. Verás exactamente cómo se comportará en la pantalla seleccionada.

Casos de uso posibles

1. Dashboard 360 de Ventas: Visualiza metas y métricas del cliente en tiempo real mientras chateas con él.
2. Integración con CRM: Accede a la ficha técnica del cliente en tu sistema interno sin cambiar de pestaña.
3. Gestión de tickets: Crea botones personalizados en el widget que cierren tickets o cambien estados en Botmaker automáticamente.
4. Consulta de cotizaciones: Embebe una calculadora de precios o conversor de moneda para dar respuestas rápidas.
5. Herramientas de debug: Implementa páginas de prueba para verificar eventos de comunicación entre sistemas.

Implementación avanzada: comunicación y seguridad

Si tu objetivo no es solo visualizar una página, sino lograr una integración profunda entre ambas plataformas, es necesario realizar una configuración técnica del lado del servidor de tu widget.

Al implementar un widget personalizado, Botmaker envía un token de seguridad que tu sistema debe validar utilizando una clave pública. Esto garantiza que la información es legítima y protege tu herramienta de agentes maliciosos.

Además puedes suscribirte a eventos en tiempo real (como la apertura de un chat) y enviar acciones directas desde el widget hacia Botmaker (como completar campos de texto o cerrar tickets).

¿Quieres que haya comunicación entre tu widget y Botmaker? Ingresa aquí para acceder a la documentación técnica para desarrolladores

Preguntas Frecuentes (FAQ)

¿Cualquier página web puede usarse como widget? 

Casi cualquier herramienta que pueda ser embebida mediante una URL funciona. Sin embargo, algunas páginas bloquean su carga en iframes por seguridad. Se recomienda validar esto en el preview de configuración.

¿Los agentes pueden crear sus propios widgets? 

Por defecto, la configuración está pensada para supervisores y administradores, pero la visibilidad y permisos se pueden ajustar mediante roles personalizados.

¿Por qué mi widget no carga imágenes o fuentes externas? 

Esto suele ocurrir por bloqueos de seguridad del navegador. Debes autorizar explícitamente los dominios externos en la configuración de seguridad del widget en Botmaker.

¿Es necesario saber programar para usar esta feature? 

Para embeber una página informativa no es necesario. Sin embargo, para que el widget "hable" con Botmaker (comunicación bidireccional), se requiere una implementación técnica siguiendo nuestra documentación.

¿Qué pasa si el widget tapa información importante de la pantalla? 

Puedes configurar el widget como un Panel que "empuja" el contenido hacia la derecha en lugar de flotar sobre él, asegurando que ninguna métrica o chat quede oculto.

¿Puedo modificar un widget ya existente?

Puedes modificar el widget clickeando el ícono “editar”. Ten en cuenta clickear “Guardar cambios” para que estos impacten en el widget.

Recuerda visitar nuestro Centro de Ayuda para mayor información