Saltar al contenido principal

​
Descripción general

El editor de arrastrar y soltar de OneSignal le permite construir mensajes in-app usando elementos de bloque modulares, sin necesidad de codificación. Si prefiere marcado, consulte Diseñar Mensajes In-App con HTML.

Editor de arrastrar y soltar de IAM

​
Requisitos previos

  • SDK de OneSignal instalado e inicializado en su aplicación.
  • SDKs recomendados para las últimas funciones: iOS 5.1.5+, Android 5.1.9+. Consulte los mínimos de funciones específicas a continuación.
  • Imágenes alojadas en un CDN de alto rendimiento (recomendado si se aloja por cuenta propia) y dimensionadas apropiadamente.

​
Tipos de mensaje (Diseño)

Cómo aparece el mensaje en la pantalla:
Tipo de mensajeDescripción
TopSe desliza hacia abajo desde la parte superior. Bueno para anuncios delgados y confirmaciones.
CenterSe expande desde el centro y llena parcialmente la pantalla. Equilibrado para la mayoría de los casos de uso.
BottomSe desliza hacia arriba desde la parte inferior. Excelente para snackbars y solicitudes de consentimiento.
FullSe expande para llenar la pantalla. Use con o sin márgenes. Agregue un Carrusel para flujos de múltiples pantallas.

Imagen que muestra los tipos de In-Apps que puede crear.

​
Carruseles

Los carruseles le permiten crear flujos de múltiples pantallas: incorporación, recorridos de funciones u ofertas de múltiples pasos. Seleccione el tipo de mensaje Full y haga clic en el botón Create Carousel. Puede agregar hasta 10 tarjetas (pantallas). Cada tarjeta puede tener cualquier combinación de bloques personalizables.

Ejemplo de carrusel

​
Soporte de orientación

Los mensajes in-app admiten modos vertical y horizontal.

Imagen que muestra orientaciones vertical y horizontal.

​
Bloques y configuración de diseño

Todo se encuentra dentro de un bloque de Fondo (el lienzo). Use Padding en el Fondo para el espaciado exterior; use Margin en bloques individuales para el espaciado entre elementos. 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 (por ejemplo, título → botón).
  3. Evite apilar grandes paddings y margins en el mismo lado.
  4. Prefiera diseños centrados basados en flujo sobre posicionamiento absoluto.
  5. Siempre previsualice en diferentes dispositivos antes de publicar.

Bloque de fondo (lienzo)

​
Texto

Use para títulos, descripciones o copia personalizada.
  • 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

Bloque de texto

​
Imagen

Agregue imágenes para ilustrar funciones u ofertas. Formatos: .jpg, .png, .gif (máx. 5MB). Prefiera URLs alojadas para rendimiento.
  • Relaciones de aspecto: 16:9, 4:3, 3:2 recomendadas.
  • Acción de clic: Opcional (enlace, deep link, etiqueta, outcome, solicitud).
Avanzado:
  • Descartar al hacer clic
  • Márgenes: Espacio alrededor del bloque.
Consejos
  • Haga referencia a diferentes imágenes en su servidor según las etiquetas. Consulte URLs dinámicas.
    • Ejemplo de URL de imagen: https://example.com/images/{{ tag_key }}.png

Bloque de imagen

​
Botón

Impulse acciones como navegación, comentarios o solicitudes de permisos.
  • Texto y fuente: Personalice la copia y el estilo del CTA.
  • Color y tamaño: Personalice los visuales del botón.
  • Imagen: Ícono/imagen opcional.
  • Radio de esquina: Establecer redondeo.
  • Acción de clic: Admite etiquetado, outcomes, solicitudes y deep links.
Avanzado
  • Descartar al hacer clic
  • Márgenes: Espacio alrededor del bloque.
  • Bordes y sombras: Totalmente personalizables.
Consejos
  • Personalice la copia del botón o los enlaces con etiquetas de datos.
  • Haga un botón de solo imagen estableciendo opacidad del fondo = 0.
  • Use sombras sutiles (baja opacidad, desenfoque alto) para elevar CTAs primarios.

Bloque de botón

​
Botón de cerrar

Controle la visibilidad y el estilo del ícono de descartar (X).
  • Alternar: Habilitar/deshabilitar.
  • Ícono personalizado: .jpg, .png, .svg, .gif. Tamaño recomendado: 10x10px.
  • Acción de clic: Opcional.
Avanzado
  • Márgenes: Espacio alrededor del bloque.
Consejos
  • Si deshabilita el botón de cerrar, asegúrese de establecer una acción de descarte o tiempo de cierre para permitir que los usuarios salgan.
  • Útil para carruseles cuando desea que los usuarios progresen a través de todas las tarjetas.

Botón de cerrar

​
Fondo

Establezca la base para su diseño y marca.
  • Soporte de imagen: .jpg, .png, .gif
  • Color: Admite RGBA
  • Acción de clic: Opcional
Avanzado
  • Padding: Espacio entre el contenido y los bordes del mensaje (predeterminado 24px)
  • Descartar al hacer clic

Editor de fondo

​
Personalización y localización

Use etiquetas de datos para personalizar el in-app por usuario. Para localización, consulte Mensajes en varios idiomas para más detalles.

​
Preguntas frecuentes

​
¿Cómo puedo hacer un in-app de pantalla completa? ¿Qué versión del SDK necesito?

Para crear un mensaje in-app sin márgenes:
  • iOS SDK 3.9.0+
  • Android SDK 4.6.3+
Los usuarios con SDKs antiguos aún verán el mensaje, pero con márgenes predeterminados.

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

Para eliminar superposiciones de banners superiores/inferiores, actualice sus SDKs y configure lo siguiente: 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"/>