Diseñar mensajes in-app con HTML

Descripción general

OneSignal ofrece dos editores de mensajes in-app:

GUI de Arrastrar y Soltar para creadores no técnicos
Editor HTML para desarrolladores que desean control perfecto sobre el diseño, comportamiento y responsividad.

Imagen que ilustra código in-app junto a un in-app renderizado

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.

HTML Templates

Comience rápidamente con plantillas preconstruidas.

In-app JavaScript Library

Use nuestra biblioteca JavaScript para rastrear interacciones y activar comportamientos in-app.

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.

Imagen que muestra el Editor HTML junto a la vista previa

Agregar etiquetas rastreables

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

<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>

Vincular acciones de clic con JavaScript

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

Obtenga más información en la documentación de la Biblioteca JS In-App.

Soporte de recursos

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

<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:

<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:

<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.

@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:

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:

@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.

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.

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.

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.

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):

<!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
- Descripción general de imágenes de Android
- OneSignal no tiene afiliación con 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.

Preguntas frecuentes

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

<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>

Android 5.1.9+

<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. 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.

Primeros pasos & configuraciones

Canales de mensajería

Journeys

Audiencia & eventos personalizados

Analítica & Integraciones

Privacidad & Seguridad

Diseñar mensajes in-app con HTML

Descripción general

Requisitos

Crear y previsualizar un In-App HTML

HTML Templates

In-app JavaScript Library

Agregar etiquetas rastreables

Vincular acciones de clic con JavaScript

Soporte de recursos

Personalización

Accesibilidad y diseño responsivo

Áreas seguras (muescas, barras de inicio)

Estilo de modo oscuro

Mejores prácticas

Incrustar videos

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

Comprender el comportamiento de reproducción automática

Consejos de rendimiento

Probar en todos los dispositivos

Preguntas frecuentes

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

¿Puedo reutilizar plantillas in-app de otros proveedores?

No tengo plantillas. ¿Cómo empiezo?

¿Qué versión del SDK se requiere?

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

​Descripción general

​Requisitos

​Crear y previsualizar un In-App HTML

HTML Templates

In-app JavaScript Library

​Agregar etiquetas rastreables

​Vincular acciones de clic con JavaScript

​Soporte de recursos

​Personalización

​Accesibilidad y diseño responsivo

​Áreas seguras (muescas, barras de inicio)

​Estilo de modo oscuro

​Mejores prácticas

​Incrustar videos

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

​Comprender el comportamiento de reproducción automática

​Consejos de rendimiento

​Probar en todos los dispositivos

​Preguntas frecuentes

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

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

​No tengo plantillas. ¿Cómo empiezo?

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

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

Descripción general

Requisitos

Crear y previsualizar un In-App HTML

Agregar etiquetas rastreables

Vincular acciones de clic con JavaScript

Soporte de recursos

Personalización

Accesibilidad y diseño responsivo

Áreas seguras (muescas, barras de inicio)

Estilo de modo oscuro

Mejores prácticas

Incrustar videos

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

Comprender el comportamiento de reproducción automática

Consejos de rendimiento

Probar en todos los dispositivos

Preguntas frecuentes

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

¿Puedo reutilizar plantillas in-app de otros proveedores?

No tengo plantillas. ¿Cómo empiezo?

¿Qué versión del SDK se requiere?

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