Saltar al contenido principal

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

​
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

​
¿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+ 
<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.