El widget de soporte de Dilo carga un flow conversacional publicado dentro de un iframe. Tus usuarios reportan incidencias sin salir de tu producto; los casos llegan a tu bandeja de Soporte con el cliente y contacto correctos si pasas contexto.

Requisitos

Un flow publicado en tu workspace (idealmente con conector de Soporte activo).
El script embed.js servido desde tu dominio Dilo (https://getdilo.io/embed.js en producción).
Opcional: clientes cargados en Dilo si usas contexto multi-empresa (B2B2B).
Opcional: DiloEmbed.setContext({ contact: … }) si tu app ya conoce nombre, email y teléfono del usuario.

Cómo funciona

Tu página  →  embed.js  →  iframe /f/{flowId}?embed=1  →  Flow Dilo  →  Caso de soporte

embed.js es un loader vanilla. No requiere React ni build en tu app.
El iframe comunica su altura al padre con postMessage (dilo:resize).
Con contexto de tenant, se omite el paso «¿de qué empresa eres?».
Con contexto de contacto, se omiten pasos de nombre, email y teléfono que coincidan con las variables del flow (ver Contexto y contacto).

Modos de instalación

Modo	Uso típico
Burbuja	SaaS, dashboards — botón flotante
Embebido	Página de ayuda, portal de soporte — formulario inline
Contexto y contacto	Multi-tenant + perfil del usuario logueado

Snippet mínimo

Instalación básica

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

Reemplaza TU_FLOW_UUID por el ID del flow publicado (visible en el dashboard al copiar el snippet).

Atributos del script

Atributo	Obligatorio	Default	Descripción
`data-flow`	Sí	—	UUID del flow publicado
`data-mode`	No	`inline`	`inline` o `bubble`
`data-height`	No	`600px`	Altura del panel / iframe
`data-width`	No	`100%`	Ancho del iframe (modo inline)
`data-label`	No	`¿Necesitas ayuda?`	Texto del botón (modo burbuja)
`data-bubble-size`	No	`md`	`sm`, `md` o `lg`
`data-bubble-variant`	No	`pill`	`pill`, `circle` o `icon`
`data-icon`	No	—	Emoji en la burbuja
`data-icon-url`	No	—	URL de imagen en la burbuja
`data-color` / `data-color-end`	No	violeta Dilo	Gradiente del botón
`data-client`	No	—	UUID del cliente en Dilo
`data-external-id`	No	—	ID del tenant en tu sistema

Los datos de contacto (nombre, email, teléfono) no van en el snippet estático en SaaS: pásalos con DiloEmbed.setContext cuando el usuario inicia sesión.

Siguiente paso

Multi-empresa: Contexto y contacto
Formulario + IA: Soporte con IA