El modo burbuja muestra un botón redondeado fijo en la esquina inferior derecha. Al pulsarlo se abre el flow en un panel flotante; al cerrar, el botón vuelve a su etiqueta original.

Instalación

Burbuja flotante

<script
  src="https://getdilo.io/embed.js"
  data-flow="TU_FLOW_UUID"
  data-mode="bubble"
  data-label="¿Necesitas ayuda?"
  data-bubble-size="md"
  data-height="640px"
></script>

Coloca el script antes de </body>. El loader crea el botón y el iframe automáticamente.

Comportamiento

Estado cerrado — solo la burbuja flotante (texto, emoji o imagen).
Al abrir — panel encima de la burbuja; la burbuja se oculta y aparece una × discreta arriba a la derecha del panel.
Cada apertura — el iframe recarga la URL con el contexto actual (útil si el tenant cambió en tu app).
Altura — el flow ajusta la altura vía postMessage; máximo ~3200 px.

Personalización

Atributo	Ejemplo	Efecto
`data-label`	`Soporte técnico`	Texto del botón cerrado
`data-bubble-size`	`sm` / `md` / `lg`	Tamaño del botón
`data-bubble-variant`	`pill` / `circle` / `icon`	Forma del botón
`data-icon`	`🤖`	Emoji o carácter en lugar de texto
`data-icon-url`	`https://…/robot.png`	Imagen personalizada
`data-color`	`#2563EB`	Color principal del gradiente
`data-color-end`	`#1D4ED8`	Color secundario del gradiente
`data-height`	`720px`	Altura inicial del panel (máx. ~85vh)

Burbuja con icono y colores de marca

<script
  src="https://getdilo.io/embed.js"
  data-flow="TU_FLOW_UUID"
  data-mode="bubble"
  data-bubble-size="sm"
  data-bubble-variant="icon"
  data-icon="🤖"
  data-color="#2563EB"
  data-color-end="#1D4ED8"
  data-height="600px"
></script>

En Configuración → Conexiones → Widget embebido puedes previsualizar tamaño, colores e icono antes de copiar el snippet.

Multi-tenant en runtime

Si el usuario puede cambiar de empresa sin recargar la página, actualiza el contexto al abrir la burbuja:

Contexto dinámico

// Cuando el usuario cambia de tenant o datos de contacto:
window.DiloEmbed?.setContext({
  externalId: currentTenant.externalId,
  contact: {
    name: currentUser.fullName,
    email: currentUser.email,
    phone: currentUser.phone,
  },
})

Ver la guía completa en Contexto y contacto.

Accesibilidad

El botón expone aria-expanded (true / false) según el panel esté abierto.
El iframe incluye title="Dilo Flow" para lectores de pantalla.

Vista previa en dashboard

En Configuración → Conexiones → Widget embebido elige Burbuja, configura el flow y usa la vista previa en vivo antes de copiar el snippet.