Saltar al contenido principal
El editor de arrastrar y soltar de OneSignal le permite construir mensajes in-app usando bloques modulares, sin necesidad de codificación. Si prefiere marcado, consulte Diseñar Mensajes In-App con HTML.
Creando un mensaje in-app usando el editor de arrastrar y soltar

​
Requisitos previos

  • Tiene instalado e inicializado el SDK de OneSignal en su aplicación.
  • Está usando los SDKs recomendados para las últimas funciones del editor:
    • iOS 5.1.5+
    • Android 5.1.9+
  • Si no sube imágenes a OneSignal, entonces sus imágenes deben estar alojadas en una URL rápida y de acceso público (se recomienda CDN) y dimensionadas apropiadamente para pantallas móviles.
Asegúrese de usar la última versión del SDK de OneSignal en su aplicación. Las versiones anteriores aún pueden mostrar el mensaje, pero con estilos de respaldo (por ejemplo, márgenes predeterminados u overlays predeterminados). Use Vista previa y pruebas en dispositivo para confirmar el comportamiento en las versiones mínimas de SDK que soporta.

​
Comenzar desde una plantilla prediseñada

Las plantillas prediseñadas le ayudan a lanzar rápidamente con diseños diseñados para la conversión (incluidas solicitudes de permisos). Elija una plantilla, luego actualice el texto, los colores y las acciones para que coincidan con su marca.
Pruebas en dispositivo: Los diseños prediseñados han sido probados en Pixel 6+, iPhone (iOS 14+), Huawei Nova 9, Huawei P50 Foldable e iPad (10.ª generación+). Estas plantillas están optimizadas para orientación vertical y pueden no mostrarse como se espera en modo horizontal.

​
Elegir un diseño de mensaje

El diseño del mensaje controla cómo aparece el in-app en la pantalla.
Tipo de mensajeMejor paraCómo se comporta
TopAnuncios breves y confirmacionesSe desliza hacia abajo desde la parte superior
CenterLa mayoría de promociones de marketing y productoSe expande desde el centro y llena parcialmente la pantalla
BottomSnackbars, solicitudes de consentimientoSe desliza hacia arriba desde la parte inferior
FullFlujos de incorporación, ofertas de múltiples pasos, carruselesSe expande para llenar la pantalla (con márgenes opcionales)
Diseños de mensajes in-app Top, Center, Bottom y Full

​
Construir flujos de múltiples pantallas con carruseles

Los carruseles le permiten crear experiencias in-app de múltiples pantallas como incorporación, recorridos de funciones u ofertas de múltiples pasos.
  1. Seleccione el tipo de mensaje Full.
  2. Haga clic en Create Carousel.
  3. Agregue hasta 10 tarjetas (pantallas).
  4. Personalice cada tarjeta con cualquier combinación de bloques.
Ejemplo de carrusel con múltiples tarjetas de mensajes in-app

​
Soporte de orientación

Los mensajes in-app admiten vertical y horizontal, pero los diseños (especialmente las plantillas) pueden necesitar ajustes para verse bien en ambos.
Mensaje in-app mostrado en orientaciones vertical y horizontal
Si espera un uso frecuente en horizontal (tabletas, juegos, aplicaciones de video), pruebe su mensaje en horizontal antes de publicar. Los diseños anchos a menudo necesitan tamaños de texto más pequeños, espaciado más ajustado o menos bloques apilados.

​
Usar bloques y espaciado para diseños limpios

Todo se coloca sobre el bloque Background (su lienzo). Use:
  • Padding en el Background para espacio entre su contenido y los bordes del mensaje.
  • Margin en bloques individuales para espacio entre elementos (título → imagen → botón).
Reglas rápidas para diseños consistentes
  1. Use Padding para controlar la distancia desde los bordes del mensaje.
  2. Use Margin para separar bloques verticalmente.
  3. Evite apilar grandes paddings y margins en el mismo lado.
  4. Prefiera diseños centrados basados en flujo sobre diseños ajustados/alineados al borde.
  5. Siempre use Vista previa en múltiples tamaños de dispositivo antes de publicar.
Controles de padding del fondo y margin de bloques en el editor in-app

​
Referencia de bloques

Use estos bloques para construir su mensaje. Cada bloque admite estilos y (en la mayoría de los casos) una acción de clic opcional.

​
Bloque de texto

Use para títulos, descripciones, avisos legales o texto personalizado. Qué puede personalizar
  • Dimensionamiento responsivo: Ancho/alto en porcentajes.
  • Fuentes: Google Fonts.
  • Formato: Negrita, cursiva, subrayado.
  • Color: Hex o RGBA (admite transparencia).
  • Alineación: Izquierda, centro, derecha.
  • Tamaño: Tamaño de fuente ajustable.
Avanzado
  • Márgenes: Espacio alrededor del bloque.
Consejos
Opciones de configuración del bloque de texto en el editor

​
Bloque de imagen

Use imágenes para reforzar la oferta, mostrar una función o agregar marca. Formatos y límites admitidos
  • .jpg, .png, .gif
  • Tamaño máximo de archivo: 5MB
Consejos y recomendaciones
  • Use relaciones de aspecto comunes como 16:9, 4:3 o 3:2.
  • Puede intercambiar dinámicamente enlaces y URLs de imágenes usando rutas alojadas en servidor. Consulte URLs dinámicas.
    • Ejemplo: https://example.com/images/{{ tag_key }}.png
Qué puede personalizar
  • URL de imagen: Se recomienda alojada para rendimiento.
  • Acción de clic: Opcional (enlace, deep link, etiqueta, outcome, solicitud).
Avanzado
  • Descartar al hacer clic
  • Márgenes: Espacio alrededor del bloque.
Opciones de configuración del bloque de imagen en el editor
Si una URL de imagen es lenta, está bloqueada o devuelve un error, su mensaje puede renderizarse con medios rotos o vacíos. Aloje imágenes en un CDN confiable y verifique que se carguen rápidamente en redes móviles.

​
Bloque de botón

Use botones para acciones principales como navegación, recopilación de comentarios o solicitudes de permisos. Qué puede personalizar
  • Texto del botón y estilo de fuente
  • Color de fondo, tamaño y radio de esquina
  • Ícono/imagen opcional
  • Acción de clic (etiquetado, outcomes, solicitudes, deep links)
Avanzado
  • Descartar al hacer clic
  • Márgenes
  • Bordes y sombras
Consejos
  • Personalice el texto del botón o los destinos usando etiquetas.
  • Puede hacer un botón de solo imagen estableciendo la opacidad del fondo en 0.
  • Use sombras sutiles (baja opacidad, desenfoque alto) para elevar el CTA principal.
Opciones de configuración del bloque de botón en el editor

​
Bloque de botón de cerrar

El botón de cerrar controla si los usuarios pueden descartar el mensaje usando un ícono “X”. Qué puede personalizar
  • Habilitar/deshabilitar visibilidad
  • Ícono personalizado (.jpg, .png, .svg, .gif)
  • Tamaño recomendado: 10x10px
  • Acción de clic opcional
Avanzado
  • Márgenes
Si deshabilita el botón de cerrar, asegúrese de que los usuarios aún tengan una forma clara de salir (por ejemplo, una acción de descarte en un botón o fondo, o un temporizador de cierre si su experiencia usa uno). De lo contrario, corre el riesgo de atrapar a los usuarios en el mensaje.
Opciones de configuración del botón de cerrar en el editor

​
Bloque de fondo

El fondo es el lienzo que contiene su diseño. Qué puede personalizar
  • Color de fondo (admite RGBA)
  • Imagen de fondo (.jpg, .png, .gif)
  • Acción de clic opcional
Avanzado
  • Padding (predeterminado 24px)
  • Descartar al hacer clic
Controles del bloque de fondo para color, imagen, padding y acciones

​
Personalización y localización

Puede personalizar mensajes in-app usando etiquetas de datos incluyendo dentro del texto, etiquetas de botones y URLs. Para localización, consulte Mensajes en varios idiomas.
Una buena prueba de personalización es enviar el mensaje a un pequeño segmento interno con valores de etiqueta conocidos y confirmar:
  • El texto y las imágenes se renderizan con las sustituciones esperadas
  • Los enlaces se resuelven correctamente
  • Los botones disparan los outcomes/etiquetas de clic esperados

​
Preguntas frecuentes

​
¿Puedo eliminar el overlay gris o la sombra de los in-apps de banner superior/inferior?

Sí — actualice sus SDKs y agregue la configuración a continuación. iOS 5.1.5+
iOS Info.plist
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+
Android Manifest.xml
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

​
Próximos pasos