Crear mensajes in-app nativos

Los in-apps nativos utilizan diseños predefinidos que el SDK de Pushwoosh renderiza directamente en el dispositivo, en lugar de la página HTML que carga un in-app personalizado. Esto hace que se carguen más rápido y se animen con mayor fluidez, y no necesitas habilidades de diseño o desarrollo para crear uno.

Opta por un in-app nativo cuando quieras lanzar una promoción, un recordatorio o un anuncio de una nueva funcionalidad rápidamente y no sea necesario un diseño totalmente personalizado. Si necesitas un control total sobre el diseño, crea en su lugar un in-app basado en HTML.

Prerrequisitos

Se necesita asistencia del desarrollador

Puedes crear una plantilla de in-app nativo en el Panel de Control sin ningún cambio en el código. Pero los usuarios solo la verán si su aplicación ejecuta una versión del SDK de Pushwoosh lo suficientemente nueva como para renderizarla. Consulta con tu equipo de desarrollo antes de lanzarla.

Antes de crear una plantilla de in-app nativo, asegúrate de que:

• El SDK de Pushwoosh esté integrado en tu aplicación para que los mensajes in-app puedan aparecer. Más información
• Tu aplicación ejecute el SDK de iOS 7.2.0+ o el SDK de Android 6.10.0+ para modal, fullscreen y stories. Sheet, carousel y banner necesitan el SDK de iOS 7.2.1+ o el SDK de Android 6.10.1+. Video necesita el SDK de iOS 7.2.0+ o el SDK de Android 6.11.0+.

Frameworks multiplataforma

El módulo de in-app nativo se distribuye de manera diferente según tu stack:

• Flutter incluye el módulo de in-app nativo automáticamente. No se necesita ninguna configuración adicional más allá del plugin de Pushwoosh para Flutter.
• React Native, Cordova, Capacitor, Unity y Expo no incluyen el módulo de in-app nativo. Añádelo tú mismo al proyecto subyacente de Android/iOS de tu aplicación: pushwoosh-inapp-ui en Android, PushwooshInApp en iOS. Consulta la guía de integración de tu framework para saber cómo se añaden los módulos nativos a tu proyecto.
• Web no es compatible. Los in-apps nativos se renderizan a través de los SDK de Android e iOS, y el SDK Web no tiene un módulo de in-app nativo.

Crear una plantilla de in-app nativo

1. Ve a Contenido → In-apps.
2. Haz clic en la flecha junto a Crear in-app y elige In-app nativo. El editor nativo se abre directamente.
3. Introduce un nombre para la plantilla.
4. En Tipo de visualización, en la parte superior del editor, elige un tipo de visualización: modal, fullscreen, stories, sheet, carousel, banner o video. Consulta Configurar el tipo de visualización para saber qué necesita cada tipo.

El editor muestra una vista previa móvil en vivo a la derecha y los campos de la plantilla a la izquierda, agrupados en Contenido, Configuración y Acciones. Lo que ves en cada grupo depende del tipo de visualización que hayas elegido.

Configurar el tipo de visualización

Precaución

El menú desplegable Tipo de visualización en la parte superior del editor te permite cambiar de tipo en cualquier momento, pero al cambiar se restablecen todos los campos de Contenido, Configuración y Acciones a sus valores predeterminados para el nuevo tipo. Rellena el contenido solo después de haber decidido un tipo.

Modal

Una tarjeta centrada, que opcionalmente se muestra sobre un fondo atenuado.

1. En Contenido, añade un título y un mensaje, cada uno con su propio color de texto, además de una imagen opcional. Consulta Añadir una imagen.
2. En Configuración, establece el color de fondo de la tarjeta. Esto rellena la tarjeta detrás de tu texto e imagen.
3. Activa Botón de cerrar si quieres un control ✕ para que los usuarios puedan descartar el in-app sin tocar un botón.
4. Activa Atenuar fondo para oscurecer la pantalla detrás de la tarjeta y mantener el enfoque en tu mensaje.
5. En Acciones, añade uno o más botones. Consulta Configurar botones.

Fullscreen

Una imagen de portada de borde a borde con texto y botones encima. Rellena estos campos en el panel izquierdo:

1. En Contenido, añade una imagen de portada, además de un título y un mensaje, cada uno con su propio color de texto. Consulta Añadir una imagen.
2. En Configuración, establece el color de la portada. Se muestra mientras se carga la imagen de portada, o por sí solo si dejas la imagen vacía.
3. Activa Botón de cerrar si quieres un control ✕ para que los usuarios puedan descartar el in-app sin tocar un botón.
4. En Acciones, añade uno o más botones. Consulta Configurar botones.

Stories

Una secuencia de diapositivas a pantalla completa con barras de progreso en la parte superior, similar a las historias de las redes sociales. Cada diapositiva es su propia entrada de Stories en Contenido.

1. Rellena la Imagen, el Título y el Mensaje de la primera diapositiva (cada uno con su propio color de texto). Consulta Añadir una imagen.
2. Establece los Segundos para indicar cuánto tiempo permanece la diapositiva en pantalla antes de avanzar. El valor predeterminado es 5. Introduce un valor de 1 a 30. Los valores fuera de este rango bloquean el botón Guardar con un error de validación.
3. Opcionalmente, haz clic en Añadir dentro de la diapositiva para darle su propio botón de CTA. Consulta Configurar botones.

4. Haz clic en Añadir debajo de la última diapositiva para añadir otra, y luego repite los pasos 1-3 para ella.
5. En Configuración, activa Bucle si quieres que la historia comience de nuevo desde la primera diapositiva después de que termine la última.
6. Activa Botón de cerrar si quieres un control ✕ para que los usuarios puedan salir antes de que se reproduzcan todas las diapositivas.

Ejemplo de cómo ve el usuario la historia terminada

Sheet

Una hoja inferior que se desliza hacia arriba desde el borde inferior de la pantalla. Un asa en la parte superior permite a los usuarios arrastrarla hacia abajo para descartarla.

Rellena estos campos en el panel izquierdo:

1. En Contenido, añade un título y un mensaje, cada uno con su propio color de texto, además de una imagen opcional. Consulta Añadir una imagen.
2. En Configuración, establece el color de fondo de la hoja. Esto rellena el panel detrás de tu texto e imagen.
3. Activa Botón de cerrar si quieres un control ✕ para que los usuarios puedan descartar la hoja sin tocar un botón.
4. En Acciones, añade uno o más botones. Consulta Configurar botones.

Carousel

Un mensaje a pantalla completa con varias tarjetas por las que los usuarios se deslizan. Unos puntos en la parte inferior muestran qué tarjeta está activa. En Contenido, cada tarjeta es una entrada separada de Tarjetas.

1. Rellena la Imagen, el Título y el Mensaje de la primera tarjeta (cada uno con su propio color de texto). Consulta Añadir una imagen.
2. Establece la Acción para la tarjeta. Elige cerrar para descartar el in-app cuando el usuario toque la tarjeta, o url para abrir un enlace (mismas opciones que en Configurar botones).
3. Haz clic en Añadir debajo de la última tarjeta para añadir otra, y luego repite los pasos 1-2 para ella.
4. Activa Botón de cerrar si quieres un control ✕ para que los usuarios puedan salir del carrusel sin tocar una tarjeta.

Precaución

Si desactivas el Botón de cerrar y estableces la Acción de cada tarjeta en url, el usuario no tiene ningún control en pantalla para descartar el carrusel. Un toque siempre abrirá un enlace en lugar de cerrarlo.

Banner

Una barra compacta fijada en el borde superior o inferior de la pantalla, para mensajes que no deberían bloquear toda la interfaz de usuario.

1. En Contenido, añade un título y un mensaje, cada uno con su propio color de texto, además de una pequeña imagen opcional. Consulta Añadir una imagen.
2. En Configuración, establece la Posición en superior o inferior para fijar el banner en el borde de la pantalla que desees.
3. Establece Descartar automáticamente, seg para cerrar el banner automáticamente después de ese número de segundos. Déjalo vacío para mantener el banner hasta que el usuario lo descarte.
4. Establece el color de fondo para la barra.
5. Activa Botón de cerrar si quieres un control ✕ en el banner.
6. En Acciones, establece la Acción en cerrar o url. Los banners no tienen botones separados. Tocar en cualquier parte del banner ejecuta esta acción. Consulta Configurar botones para el comportamiento de cerrar y url.

Precaución

Si desactivas el Botón de cerrar, estableces la Acción en url y dejas Descartar automáticamente vacío, el banner permanecerá en pantalla sin forma de descartarlo. Un toque siempre abrirá el enlace en lugar de cerrarlo.

Video

Un reproductor a pantalla completa para un enlace de streaming HLS (.m3u8) o un archivo .mp4 directo, con un título, mensaje y botones opcionales encima.

Nota

El video necesita el SDK de iOS 7.2.0+ o el SDK de Android 6.11.0+. En un SDK de Android más antiguo, una plantilla que utilice este tipo de visualización no se renderizará. Consulta Soporte de plataforma para más detalles.

1. En Contenido, establece la URL del video (obligatorio) a un enlace HTTPS absoluto a un archivo .m3u8 o .mp4. Opcionalmente, añade una imagen de Póster que se muestra antes de que comience la reproducción, y una Imagen de respaldo que se muestra si el video no se puede reproducir.
2. Añade un título y un mensaje, cada uno con su propio color de texto.
3. En Configuración, activa Bucle para reiniciar el video después de que termine.
4. Activa Silenciado para iniciar la reproducción con el sonido apagado.
5. Activa Botón de cerrar si quieres un control ✕ para que los usuarios puedan descartar el in-app sin esperar a que termine el video.
6. En Acciones, añade uno o más botones. Consulta Configurar botones.

Configurar campos de texto

Los campos de texto no admiten texto de varias líneas. Si presionas Enter, el editor puede mostrar un salto de línea, pero Pushwoosh guarda un espacio en su lugar. En el dispositivo, el texto aparece como una sola línea.

Para añadir un emoji, haz clic en Emoji junto a la barra de herramientas del campo. Los emojis son compatibles en los mismos campos de texto que el texto sin formato. Comprueba la vista previa en vivo para ver cómo se ven en el diseño.

Añadir contenido dinámico

Cada campo de texto admite la personalización con tags y User ID.

1. Haz clic en Personalización junto a la barra de herramientas del campo.
2. En Tag, elige un tag o User ID.
3. Elige un modificador de formato (por ejemplo, CapitalizeFirst o regular).
4. Opcionalmente, introduce un Valor de Tag por defecto.
5. Haz clic en Insertar.

El tag insertado se muestra como una etiqueta en el campo. Puedes cambiar el tag, el modificador y el valor por defecto antes de hacer clic en Insertar. La personalización utiliza los mismos tags, modificadores y valores por defecto que el Contenido dinámico.

Consejo

Para la lógica condicional (por ejemplo, mostrar este texto solo si un tag es igual a un valor específico), escribe la sintaxis de Liquid directamente en el campo.

Cuando haces clic en Guardar, Pushwoosh comprueba el contenido dinámico y Liquid en cada campo de texto. Si un campo no se analiza correctamente (por ejemplo, una etiqueta {% if %} sin cerrar), se bloquea el botón Guardar y una notificación emergente El contenido dinámico contiene errores nombra el campo y el idioma rotos. Arréglalo allí y luego haz clic en Guardar de nuevo.

Nota

La comprobación de Liquid al guardar detecta errores de sintaxis como una etiqueta sin cerrar. Aún puede pasar expresiones incompletas que solo fallan cuando se envía el mensaje. Envíate una prueba si usas algo más que un simple tag.

Configurar botones

Modal, fullscreen, cada diapositiva de stories, sheet y video utilizan los mismos campos de botón:

• Texto del botón y su color.
• Fondo, Color del borde y Radio del borde.
• Acción: elige qué sucede cuando el usuario toca el botón:
  • close: descarta el in-app.
  • url: abre el enlace que introduces en el campo que aparece. Usa una dirección web (por ejemplo, https://example.com) o un deep link en tu aplicación (por ejemplo, myapp://product/123).

Haz clic en Añadir para añadir otro botón, o en la × de un botón para eliminarlo.

Precaución

Si desactivas el Botón de cerrar y tampoco añades ningún botón, el usuario no tiene ningún control en pantalla para descartar el in-app.

Añadir una imagen

Cada campo de imagen (imagen, imagen de portada y la imagen de cada tarjeta o diapositiva) funciona de la misma manera. Pega una URL de imagen alojada directamente en el campo, o haz clic en Elegir del almacenamiento de Medios junto a él para abrir el Almacén de medios y elegir una imagen que ya hayas subido. Elegir una imagen del Almacén de medios reemplaza cualquier URL que esté actualmente en el campo.

Añadir un código de barras

Junto a Elegir del almacenamiento de Medios, haz clic en Crear un código de barras para abrir un panel que genera un código escaneable Code 128, EAN-13, EAN-8, UPC-A o QR y escribe la URL resultante en el campo:

• Código. El valor a codificar: ya sea un código fijo, como SAVE20, o un tag de dispositivo, como {Coupon|String|} o {LoyaltyCardNumber|String|}, para que cada destinatario vea su propio código. Un tag de dispositivo se rellena con el valor real del destinatario directamente en su dispositivo, justo antes de que aparezca el in-app. El valor predeterminado es {Coupon|String|}.

• Simbología. Elige el formato del código de barras: Code 128, EAN-13, EAN-8 y UPC-A son códigos de barras minoristas estándar leídos por escáneres de mano, y QR es un código cuadrado que cualquier cámara de teléfono puede escanear.
• Corrección de errores. Aparece solo después de establecer la Simbología en QR. Los códigos QR del mundo real pueden rayarse, volverse borrosos o estar parcialmente cubiertos por un logotipo, y la corrección de errores es información adicional integrada en el código para que aún se escanee a pesar de ese daño. Elige cuánta tolerancia al daño puede tener: L, M, Q o H, de menos a más robusto. Los niveles más altos toleran más daño pero producen un código más denso y de aspecto más recargado. El valor predeterminado es M.

• Imprimir el código en dígitos. Muestra el valor debajo del código.

Cuando el Código es un tag de dispositivo, la vista previa sustituye un valor de muestra, ya que no puede resolver el tag de un destinatario real. Un código fijo, como SAVE20, se previsualiza exactamente como se introdujo.

Haz clic en Insertar en el campo de imagen para copiar la URL generada en el campo Imagen de arriba.

Añadir localizaciones

Por defecto, un in-app nativo tiene un idioma. Para añadir más:

Nota

El selector de idioma aquí solo cuenta los dispositivos en plataformas que renderizan contenido in-app. Los valores de idioma establecidos a través de Tags a nivel de usuario no están vinculados a una plataforma de dispositivo, por lo que no aparecen aquí.

1. Haz clic en + junto al selector de idioma en la barra superior.
2. Selecciona los idiomas a añadir y haz clic en Aplicar.

3. Usa el selector de idioma en la barra superior para cambiar entre idiomas y rellenar los campos de texto para cada uno.

Nota

Cuando añades un idioma, Pushwoosh copia el contenido del idioma por defecto en él: texto, imágenes y etiquetas de los botones. Cambia a ese idioma y edita cualquiera de estos campos de forma independiente.

Guardar la plantilla

Haz clic en Guardar en la esquina superior derecha para guardar tus cambios.

La plantilla aparecerá entonces en Contenido → In-apps junto con tus otras plantillas de in-app.

Usarla en una campaña

Una plantilla de in-app nativo aparece en el selector de plantillas junto con tus otras plantillas de in-app.

Puedes usarla para:

• Enviar un in-app instantáneo
• Añadir un paso de in-app a un Customer Journey
• Abrir un in-app cuando el usuario toca una notificación push

Nota

Los ajustes de entrega, como las fechas de inicio y fin y el límite de frecuencia, funcionan de la misma manera que para cualquier otro in-app y no forman parte de este editor.