# Incrustación y ventanas emergentes

Incrusta tu formulario en un sitio web o muéstralo como una superposición emergente.

## Incrustación y ventanas emergentes

Pon tu formulario dentro de cualquier página web como incrustación en línea o como ventana emergente. Lo configuras en el panel Compartir y pegas un fragmento de código en tu sitio.

<p>
  Ambos fragmentos se generan a partir del enlace de compartir que hayas seleccionado, así que heredan la caducidad, el límite de
  respuestas, el dominio personalizado y las analíticas de ese enlace. Crea el enlace primero — consulta{' '}
  <a href="/es/sharing-publishing/sharing-embedding">enlaces para compartir</a>. Los valores predeterminados de parámetros de consulta son
  la única excepción: no se añaden a los fragmentos de incrustación ni de ventana emergente.
</p>

<h2 id="embed">Incrustación en línea</h2>

<p>
  Una incrustación en línea coloca tu formulario directamente dentro de una página mediante un iframe. Abre el panel{' '}
  <strong>Compartir</strong>, haz clic en la tarjeta <strong>Incrustar</strong> y copia el fragmento de código generado en el HTML de tu
  sitio.
</p>

<h3 id="embed-layout">Diseño</h3>

<h3 id="embed-display">Visualización</h3>

<p>
  Haz clic en <strong>Ver código</strong> para ver el HTML generado. Usa <strong>Copiar código de incrustación</strong> para copiarlo y
  luego pégalo en tu sitio. <strong>Restablecer valores predeterminados</strong> restaura todos los ajustes.
</p>

<h3 id="embed-snippet">Qué contiene el fragmento</h3>

<p>
  Con el ajuste automático desactivado, el fragmento es un único iframe que apunta a tu enlace de compartir con <code>?embed=1</code>{' '}
  añadido. Las opciones de visualización añaden sus propios parámetros: <code>hideCover=1</code>, <code>hideLogo=1</code>, y{' '}
  <code>theme=dark</code> o <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formstep.io/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  Con el ajuste automático activado, el iframe se envuelve en un <code>div</code> seguido de un script. El formulario incrustado envía un
  mensaje <code>formbase:resize</code> en cada cambio de altura; el script comprueba el origen del mensaje y el frame que lo envía, y luego
  ajusta la altura del iframe. No se toca nada más en tu página, y no se carga ningún script externo.
</p>

<h2 id="popup">Ventana emergente</h2>

<p>
  Una ventana emergente muestra tu formulario como una superposición sobre tu página. Abre el panel <strong>Compartir</strong>, haz clic en
  la tarjeta <strong>Ventana emergente</strong>, configura las opciones y pega el fragmento de código generado en tu sitio.
</p>

<h3 id="popup-trigger">Activador</h3>

<p>Elige cómo se abre la ventana emergente:</p>

<h3 id="popup-layout">Diseño</h3>

<h3 id="popup-display">Visualización</h3>

<h3 id="popup-styling">Estilo de la ventana emergente</h3>

<h3 id="popup-behavior">Comportamiento</h3>

<p>
  Haz clic en <strong>Ver código</strong> para ver el fragmento generado. Usa <strong>Copiar código de ventana emergente</strong> para
  copiarlo y luego pégalo en tu sitio. <strong>Restablecer valores predeterminados</strong> restaura todos los ajustes.
</p>

<h3 id="popup-snippet">Qué contiene el fragmento</h3>

<p>
  El fragmento de la ventana emergente es un único bloque <code>{'<script>'}</code> autocontenido. Construye la superposición, el botón de
  cierre y el iframe en JavaScript puro cuando se abre la ventana emergente — nada más se añade a tu página antes de eso, no se inyecta
  ninguna hoja de estilos y no se carga ningún script externo. El comentario debajo del script indica el nombre de la función que debes
  llamar:
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  Un guion en un slug personalizado se convierte en un guion bajo en el nombre de la función, porque un guion no es válido en un
  identificador de JavaScript. Copia el nombre desde el comentario en lugar de deducirlo tú mismo.
</p>

<h2 id="color-scheme">Esquema de color</h2>

<p>
  Las incrustaciones y las ventanas emergentes comparten las mismas tres opciones, y ambas anulan el tema propio del formulario dentro del
  marco:
</p>

<ul>
  <li>
    <strong>Dejar que el usuario especifique</strong> — el valor predeterminado. El formulario sigue la preferencia de modo oscuro o claro
    del sistema operativo o navegador del visitante.
  </li>
  <li>
    <strong>Modo oscuro</strong> — fuerza el modo oscuro independientemente de la preferencia del visitante.
  </li>
  <li>
    <strong>Modo claro</strong> — fuerza el modo claro independientemente de la preferencia del visitante.
  </li>
</ul>

> 💡 **Haz coincidir el tema de tu sitio**
> <p>
>     Si tu sitio web es siempre oscuro, configura la incrustación o la ventana emergente en Modo oscuro para que el formulario se integre. Si
>     tu sitio respeta la preferencia del visitante, elige Dejar que el usuario especifique. Para personalizar el tema del propio formulario,
>     consulta <a href="/es/branding-domains/appearance-theming">apariencia y personalización</a>.
>   </p>

<h2 id="next-steps">Próximos pasos</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Compartir enlaces](/es/sharing-publishing/sharing-embedding) — Crea y gestiona URLs de enlaces para compartir
  - [Códigos QR](/es/sharing-publishing/sharing-embedding#qr-codes) — Genera y coloca códigos escaneables
  - [Dominios personalizados](/es/branding-domains/custom-domains) — Sirve formularios desde tu propio dominio
  - [Apariencia y personalización](/es/branding-domains/appearance-theming) — Tema, portada, logotipo, modo oscuro
</div>