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 de forma más fluida, y no necesitas habilidades de diseño o desarrollo para crear uno.

Utiliza 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 ayuda del desarrollador

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

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. Aprende más
• Tu aplicación ejecuta 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+.

Crear una plantilla de in-app nativo

1. Ve a Content → In-apps.
2. Haz clic en Add template.
3. Introduce un nombre para la plantilla.
4. Selecciona Create native rich media.
5. En DISPLAY TYPE, elige un tipo de visualización: modal, fullscreen, stories, sheet, carousel o banner.
6. Haz clic en Add template.

El editor se abre con una vista previa móvil en vivo a la derecha y los campos de la plantilla a la izquierda, agrupados en Content, Config y Actions. 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 Display type en la parte superior del editor te permite cambiar de tipo en cualquier momento, pero al cambiar se restablecen todos los campos de Content, Config y Actions 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 Content, añade un título y un mensaje, cada uno con su propio color de texto, además de una imagen opcional.
2. En Config, establece el color de fondo de la tarjeta. Esto rellena la tarjeta detrás de tu texto e imagen.
3. Activa Close button si quieres un control ✕ para que los usuarios puedan descartar el in-app sin tocar un botón.
4. Activa Dim background para oscurecer la pantalla detrás de la tarjeta y mantener el foco en tu mensaje.
5. En Actions, 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 Content, añade una imagen de portada, además de un título y un mensaje, cada uno con su propio color de texto.
2. En Config, establece el color de portada. Se muestra mientras se carga la imagen de portada, o por sí solo si dejas la imagen vacía.
3. Activa Close button si quieres un control ✕ para que los usuarios puedan descartar el in-app sin tocar un botón.
4. En Actions, 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 Content.

1. Rellena la Image, el Title y el Message de la primera diapositiva (cada uno con su propio color de texto).
2. Establece los Seconds para indicar cuánto tiempo permanece la diapositiva en pantalla antes de avanzar. El valor predeterminado es 5. Introduce un valor entre 1 y 30. Los valores fuera de este rango bloquean el botón Save con un error de validación.
3. Opcionalmente, haz clic en Add dentro de la diapositiva para darle su propio botón de CTA. Consulta Configurar botones.

4. Haz clic en Add debajo de la última diapositiva para añadir otra, y luego repite los pasos 1-3 para ella.
5. En Config, activa Loop si quieres que la historia comience de nuevo desde la primera diapositiva después de que termine la última.
6. Activa Close button 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 tirador en la parte superior permite a los usuarios arrastrarla hacia abajo para descartarla.

Rellena estos campos en el panel izquierdo:

1. En Content, añade un título y un mensaje, cada uno con su propio color de texto, además de una imagen opcional.
2. En Config, establece el color de fondo de la hoja. Esto rellena el panel detrás de tu texto e imagen.
3. Activa Close button si quieres un control ✕ para que los usuarios puedan descartar la hoja sin tocar un botón.
4. En Actions, 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 Content, cada tarjeta es una entrada de Cards independiente.

1. Rellena la Image, el Title y el Message de la primera tarjeta (cada uno con su propio color de texto).
2. Establece la Action para la tarjeta. Elige close 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 Add debajo de la última tarjeta para añadir otra, y luego repite los pasos 1-2 para ella.
4. Activa Close button si quieres un control ✕ para que los usuarios puedan salir del carrusel sin tocar una tarjeta.

Precaución

Si desactivas el Close button y estableces la Action 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 anclada al borde superior o inferior de la pantalla, para mensajes que no deben bloquear toda la interfaz de usuario.

1. En Content, añade un título y un mensaje, cada uno con su propio color de texto, además de una pequeña imagen opcional.
2. En Config, establece la Position en top o bottom para anclar el banner en el borde de la pantalla que desees.
3. Establece Auto-dismiss, sec 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 Close button si quieres un control ✕ en el banner.
6. En Actions, establece la Action en close 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 close y url.

Precaución

Si desactivas el Close button, estableces la Action en url y dejas Auto-dismiss vacío, el banner permanecerá en pantalla sin forma de descartarlo. Un toque siempre abrirá el enlace en lugar de cerrarlo.

Configurar botones

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

• Button text y su color.
• Background, Border color y Border radius.
• Action: 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. Utiliza 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 Add para añadir otro botón, o en la × de un botón para eliminarlo.

Precaución

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

Añadir localizaciones

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

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

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 predeterminado 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 Save en la esquina superior derecha para guardar tus cambios.

La plantilla aparecerá entonces en Content → 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 frequency capping, funcionan igual que para cualquier otro in-app y no forman parte de este editor.