El modo inline (por defecto) inserta el iframe justo después del tag <script>, ocupando el ancho del contenedor padre. Es ideal para páginas de ayuda, centros de soporte o secciones «Contáctanos».

Instalación

Embed inline

<div class="soporte-seccion" style="max-width: 720px; margin: 0 auto;">
  <h2>Reportar un problema</h2>
  <script
    src="https://getdilo.io/embed.js"
    data-flow="TU_FLOW_UUID"
    data-height="640px"
    data-width="100%"
  ></script>
</div>

Si omites data-mode, el modo es inline automáticamente.

Ajuste de altura automático

El flow envía eventos de redimensionado al padre:

{ "type": "dilo:resize", "flowId": "...", "height": 840 }

embed.js escucha y ajusta la altura del iframe (tope 3200 px). No necesitas calcular la altura manualmente en la mayoría de casos.

Layout responsivo

El iframe respeta data-width (default 100%). Envuélvelo en un contenedor con max-width para centrarlo en desktop:

Contenedor responsivo

<section style="padding: 24px 16px;">
  <div style="max-width: 680px; margin: 0 auto;">
    <script
      src="https://getdilo.io/embed.js"
      data-flow="TU_FLOW_UUID"
      data-height="560px"
    ></script>
  </div>
</section>

Comparación con burbuja

	Inline	Burbuja
Visibilidad	Siempre visible en la página	Oculto hasta clic
Mejor para	Página /help dedicada	App con UI densa
`data-mode`	omitir o `inline`	`bubble`

Recargar el flow

Si cambias contexto o quieres reiniciar la sesión:

javascript

window.DiloEmbed?.reload()