> ## 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 arrastrar y soltar
> Use el compositor visual de OneSignal para construir mensajes in-app de alta conversión con bloques, diseños, carruseles y personalización.
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](./design-your-in-app-message-with-html).
## 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 mensaje | Mejor para | Cómo se comporta |
| --------------- | --------------------------------------------------------------- | ------------------------------------------------------------ |
| **Top** | Anuncios breves y confirmaciones | Se desliza hacia abajo desde la parte superior |
| **Center** | La mayoría de promociones de marketing y producto | Se expande desde el centro y llena parcialmente la pantalla |
| **Bottom** | Snackbars, solicitudes de consentimiento | Se desliza hacia arriba desde la parte inferior |
| **Full** | Flujos de incorporación, ofertas de múltiples pasos, carruseles | Se expande para llenar la pantalla (con márgenes opcionales) |
### 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.
### 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.
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.
***
## 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**
* Localice con segmentos basados en idioma o [usando sintaxis Liquid](./using-liquid-syntax).
* Personalice con [etiquetas de datos](./message-personalization).
### 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](./links#dynamic-urls).
* 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.
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.
### 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.
### 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
***
## Personalización y localización
Puede personalizar mensajes in-app usando [etiquetas de datos](./add-user-data-tags) incluyendo dentro del texto, etiquetas de botones y URLs.
Para localización, consulte [Mensajes en varios idiomas](./multi-language-messaging#send-messages-in-different-languages).
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+**
```xml iOS Info.plist theme={null}
OneSignal_in_app_message_hide_drop_shadow
OneSignal_in_app_message_hide_gray_overlay
```
**Android 5.1.9+**
```xml Android Manifest.xml theme={null}
```
***
## Próximos pasos
* Conozca las [Acciones de clic in-app](./iam-click-actions) para personalizar lo que sucede cuando los usuarios hacen clic en elementos de su mensaje.
* Pruebe diferentes [Disparadores de mensajes in-app](./iam-triggers) para controlar cuándo aparecen los mensajes.
* ¿Necesita más personalización? Pruebe [Diseñar Mensajes In-App con HTML](./design-your-in-app-message-with-html).
***