> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Diseñar mensajes in-app con HTML

> Diseñe y personalice mensajes in-app usando el Editor HTML de OneSignal para máxima flexibilidad, responsividad y marca.

## Descripción general

OneSignal ofrece dos editores de mensajes in-app:

* GUI de [Arrastrar y Soltar](./design-your-in-app-message) para creadores no técnicos
* Editor HTML para desarrolladores que desean control perfecto sobre el diseño, comportamiento y responsividad.

<Frame caption="Imagen que ilustra código in-app junto a un in-app renderizado">
  <img src="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/f33b4e3-iam-html-2.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=0a0527678d2d094109186fea726918be" width="1700" height="1000" data-path="images/docs/f33b4e3-iam-html-2.png" />
</Frame>

**Lo que puede hacer con el Editor HTML:**

* **Diseños:** Construir diseños responsivos complejos (por ejemplo, CTAs lado a lado).
* **Formularios:** Recopilar entradas en línea (correo electrónico, comentarios, encuesta).
* **Fuentes y Marca:** Usar fuentes web personalizadas y variables CSS.
* **Acciones JS:** Rastrear clics, etiquetar usuarios, enviar outcomes y más.

### Requisitos

* **iOS:** 3.9.0+
* **Android:** 4.6.3+
  * Si su aplicación usa un SDK anterior, los mensajes in-app se renderizarán en un diseño de Modal Centro en su lugar.

***

## Crear y previsualizar un In-App HTML

Vaya a **Messages > New In-App** para crear, editar, probar, pausar, duplicar o eliminar sus mensajes in-app.

<Columns cols={2}>
  <Card title="HTML Templates" href="./in-app-html-templates" arrow={true}>
    Comience rápidamente con plantillas preconstruidas.
  </Card>

  <Card title="In-app JavaScript Library" href="./in-app-message-api" arrow={true}>
    Use nuestra biblioteca JavaScript para rastrear interacciones y activar comportamientos in-app.
  </Card>
</Columns>

Ingrese su código HTML en el lado izquierdo y previsualícelo en vivo. Use **Send Test In-App** para probar la responsividad y el diseño.

<Frame caption="Imagen que muestra el Editor HTML junto a la vista previa">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/04df3a9-Screenshot_2023-04-15_at_11.54.11_AM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=db3ac070e794e0c594850a61b2f95927" width="1770" height="1198" data-path="images/docs/04df3a9-Screenshot_2023-04-15_at_11.54.11_AM.png" />
</Frame>

### Agregar etiquetas rastreables

Agregue `data-onesignal-unique-label` en elementos interactivos para que los clics sean rastreados y accionables.

```html theme={null}
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>
```

### Vincular acciones de clic con JavaScript

```js theme={null}
// Etiquetar al usuario cuando hace clic en un botón
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
```

<Note>
  Obtenga más información en la [documentación de la Biblioteca JS In-App](./in-app-message-api).
</Note>

### Soporte de recursos

Los recursos se cargan en el momento de la renderización desde las URLs que proporciona.

```html theme={null}
<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />
```

### Personalización

Inserte dinámicamente valores de datos de usuario [usando sintaxis Liquid](./using-liquid-syntax):

```html theme={null}
<div>Hi there {{ name | default: 'you' }}!</div>
```

**Contextos compatibles:**

* Texto dentro de elementos como `div`, `p`, `li`
* Dentro de bloques `<style>`
* En atributos `href`, `src`, `action` y `data`

**No compatible en:**

* Dentro de etiquetas `<script>`
* A través de contenido anidado complejo donde el análisis se vuelve ambiguo, por ejemplo:

```html theme={null}
<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>
```

***

## Accesibilidad y diseño responsivo

Use consultas de medios CSS y tipografía de plataforma para adaptarse al tamaño del dispositivo y la configuración de texto del SO.

```css theme={null}
@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* Respetar tamaños de texto dinámicos en iOS */
:root { font: -apple-system-body; }
```

### Áreas seguras (muescas, barras de inicio)

Los dispositivos modernos tienen áreas seguras (como muescas o barras de inicio). Use variables `safe-area-inset-*` para rellenar su diseño:

```css theme={null}
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}
```

## Estilo de modo oscuro

Los dispositivos móviles y las aplicaciones a menudo aplican ajustes automáticos de modo oscuro basados en el tema del sistema del usuario. Esto puede hacer que los mensajes in-app (IAMs) aparezcan de manera diferente a la prevista. Por ejemplo, el texto puede invertir el color o las imágenes de fondo pueden verse atenuadas. Para garantizar que su IAM se vea consistente en temas claros y oscuros, defina estilos explícitos para ambos modos.

### Mejores prácticas

* **Establecer colores explícitos.** Siempre defina colores de texto, fondo y botones directamente en su HTML o CSS. Evite colores transparentes o predeterminados que dependan del comportamiento del sistema.

* **Usar consultas de medios `prefers-color-scheme`.** Puede incluir reemplazos de modo oscuro con:

  ```css theme={null}
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #000000;
      color: #ffffff;
    }
    .button {
      background-color: #ffffff;
      color: #000000;
    }
  }
  ```

* **Optimizar imágenes para ambos modos.** Use PNGs transparentes o SVGs cuando sea posible. Para imágenes de fondo, pruebe la legibilidad en temas claros y oscuros.

* **Evitar inversiones dobles.** Algunas versiones de Android e iOS pueden ajustar colores automáticamente. Usar estilos de modo oscuro explícitos ayuda a prevenir que su tema oscuro personalizado sea invertido nuevamente por el SO.

* **Previsualizar en ambos modos.** Use los temas oscuros y claros de su aplicación para verificar que el texto, los botones y los fondos tengan suficiente contraste y permanezcan accesibles.

<Note> Pruebe en todas las plataformas. Android WebView, iOS WKWebView y las compilaciones web manejan el modo oscuro de manera diferente. Siempre previsualice su mensaje in-app en ambos temas antes de publicar. </Note>

***

### Incrustar videos

Puede incrustar videos (por ejemplo, YouTube, Vimeo) directamente en sus mensajes in-app usando `<iframe>`.
Esto es útil para demostraciones, promociones o flujos de incorporación.

La mayoría de los navegadores solo permiten **reproducción automática si el video comienza silenciado**, así que siempre incluya `&mute=1` en la URL de incrustación.

<Note>
  La reproducción automática de video puede afectar el rendimiento. Mantenga los videos cortos y evite múltiples incrustaciones de reproducción automática en un solo in-app.
</Note>

#### Ejemplo: Incrustación de YouTube con reproducción automática

El fragmento a continuación muestra cómo centrar un video de YouTube en el medio del in-app con un tamaño fijo (560×315):

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center; /* centrar horizontalmente */
        align-items: center;     /* centrar verticalmente */
        background: #f0f0f0;     /* fondo opcional */
      }
      .video-box {
        width: 560px;  /* ancho fijo */
        height: 315px; /* altura fija (relación 16:9) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        border-radius: 8px;
        overflow: hidden;
        background: #000;
      }
      .video-box iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="video-box">
      <iframe src="https://www.youtube.com/embed/bH60T1PZg1c?autoplay=1&mute=1"
        allow="autoplay; encrypted-media"
        allowfullscreen>
      </iframe>
    </div>
  </body>
</html>
```

#### Comprender el comportamiento de reproducción automática

* La URL de incrustación (/embed/VIDEO\_ID) es necesaria para la reproducción automática: los enlaces normales watch?v= no funcionarán.

* Agregar ?autoplay=1\&mute=1 garantiza que el video se reproduzca automáticamente y cumpla con las reglas de reproducción automática del navegador.

* El atributo allow="autoplay; encrypted-media" otorga permiso para la reproducción automática.

* El .video-box usa un tamaño fijo de 560×315px (16:9 predeterminado de YouTube) para que el video aparezca contenido en lugar de estirarse a pantalla completa.

* El body está configurado como un contenedor flex con justify-content: center y align-items: center para posicionar el cuadro de video en el medio exacto de la pantalla.

***

## Consejos de rendimiento

* Prefiera CSS crítico en línea; difiera scripts pesados.
* Optimice imágenes (dimensionadas `<img>` con `object-fit`), use formatos modernos cuando sea posible.
* Mantenga las cargas útiles HTML concisas; evite grandes blobs base64.
* Use fuentes del sistema o aloje fuentes web de alto rendimiento con `font-display: swap`.
* Reduzca los tamaños de archivo y use la resolución adecuada:
  * [Directrices de imágenes de Apple](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/)
  * [Descripción general de imágenes de Android](https://developer.android.com/guide/topics/graphics)
  * OneSignal no tiene afiliación con [imagekit.io](https://imagekit.io/), aunque es una herramienta útil para la optimización.

### Probar en todos los dispositivos

Envíe mensajes de prueba con frecuencia para confirmar el comportamiento y el diseño en diferentes tipos de dispositivos. Consulte [Encontrar y establecer suscripciones de prueba](./test-users).

***

## Preguntas frecuentes

### ¿Puedo eliminar el fondo gris o la sombra del banner de los in-apps estilo banner?

Sí. Para banners superiores/inferiores, actualice sus SDKs y establezca:

**iOS 5.1.5+**

```xml theme={null}
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
```

**Android 5.1.9+**

```xml theme={null}
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>
```

### ¿Puedo reutilizar plantillas in-app de otros proveedores?

Sí. Pegue su HTML en el editor y reemplace los análisis/acciones con los métodos JS In-App de OneSignal.

### No tengo plantillas. ¿Cómo empiezo?

Use la plantilla de inicio proporcionada o [explore las plantillas disponibles](./in-app-html-templates). Se recomienda algo de experiencia con HTML/CSS.

### ¿Qué versión del SDK se requiere?

* **iOS:** 3.9.0+
* **Android:** 4.6.3+

Los SDKs antiguos recurrirán a la renderización de Modal Centro.

### ¿Los mensajes in-app funcionan sin conexión?

No. Los mensajes requieren una conexión activa a Internet para buscar y renderizar contenido.

***