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 necesita habilidades de diseño o desarrollo para crear uno.

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

Requisitos previos

Se necesita asistencia de un desarrollador

Puede crear una plantilla de in-app nativo en el Panel de Control sin ningún cambio 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. Consulte con su equipo de desarrollo antes de lanzarlo.

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

• El SDK de Pushwoosh está integrado en su aplicación para que puedan aparecer los mensajes in-app. Más información
• Su 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+. Video es solo para iOS por ahora.

Crear una plantilla de in-app nativo

1. Vaya a Contenido → In-apps.
2. Haga clic en Crear in-app.
3. Ingrese un nombre para la plantilla.
4. Seleccione Crear rich media nativo.
5. En TIPO DE VISUALIZACIÓN, elija un tipo de visualización: modal, fullscreen, stories, sheet, carousel, banner o video.
6. Haga clic en Crear in-app.

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 Contenido, Configuración y Acciones. Lo que ve en cada grupo depende del tipo de visualización que eligió.

Configurar el tipo de visualización

Precaución

El menú desplegable Tipo de visualización en la parte superior del editor le 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. Complete 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, agregue un título y un mensaje, cada uno con su propio color de texto, además de una imagen opcional. Consulte Agregar una imagen.
2. En Configuración, establezca el color de fondo de la tarjeta. Esto rellena la tarjeta detrás de su texto e imagen.
3. Active el Botón de cierre si desea un control ✕ para que los usuarios puedan descartar el in-app sin tocar un botón.
4. Active Atenuar fondo para oscurecer la pantalla detrás de la tarjeta y mantener el enfoque en su mensaje.
5. En Acciones, agregue uno o más botones. Consulte Configurar botones.

Pantalla completa

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

1. En Contenido, agregue una imagen de portada, además de un título y un mensaje, cada uno con su propio color de texto. Consulte Agregar una imagen.
2. En Configuración, establezca el color de la portada. Se muestra mientras se carga la imagen de portada, o por sí solo si deja la imagen vacía.
3. Active el Botón de cierre si desea un control ✕ para que los usuarios puedan descartar el in-app sin tocar un botón.
4. En Acciones, agregue uno o más botones. Consulte Configurar botones.

Historias

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 Historias en Contenido.

1. Complete la Imagen, el Título y el Mensaje de la primera diapositiva (cada uno con su propio color de texto). Consulte Agregar una imagen.
2. Establezca los Segundos para determinar cuánto tiempo permanece la diapositiva en pantalla antes de avanzar. El valor predeterminado es 5. Ingrese un valor de 1 a 30. Los valores fuera de este rango bloquean la opción de Guardar con un error de validación.
3. Opcionalmente, haga clic en Agregar dentro de la diapositiva para darle su propio botón de CTA. Consulte Configurar botones.

4. Haga clic en Agregar debajo de la última diapositiva para agregar otra, luego repita los pasos 1-3 para ella.
5. En Configuración, active Bucle si desea que la historia comience de nuevo desde la primera diapositiva después de que termine la última.
6. Active el Botón de cierre si desea un control ✕ para que los usuarios puedan salir antes de que se reproduzcan todas las diapositivas.

Ejemplo de cómo se ve la historia terminada para el usuario

Hoja

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.

Complete estos campos en el panel izquierdo:

1. En Contenido, agregue un título y un mensaje, cada uno con su propio color de texto, además de una imagen opcional. Consulte Agregar una imagen.
2. En Configuración, establezca el color de fondo de la hoja. Esto rellena el panel detrás de su texto e imagen.
3. Active el Botón de cierre si desea un control ✕ para que los usuarios puedan descartar la hoja sin tocar un botón.
4. En Acciones, agregue uno o más botones. Consulte Configurar botones.

Carrusel

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. Complete la Imagen, el Título y el Mensaje de la primera tarjeta (cada uno con su propio color de texto). Consulte Agregar una imagen.
2. Establezca la Acción para la tarjeta. Elija cerrar para descartar el in-app cuando el usuario toque la tarjeta, o url para abrir un enlace (las mismas opciones que en Configurar botones).
3. Haga clic en Agregar debajo de la última tarjeta para agregar otra, luego repita los pasos 1-2 para ella.
4. Active el Botón de cierre si desea un control ✕ para que los usuarios puedan salir del carrusel sin tocar una tarjeta.

Precaución

Si desactiva el Botón de cierre y establece 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, agregue un título y un mensaje, cada uno con su propio color de texto, además de una pequeña imagen opcional. Consulte Agregar una imagen.
2. En Configuración, establezca la Posición en superior o inferior para fijar el banner en el borde de la pantalla que desee.
3. Establezca Descarte automático, seg para cerrar el banner automáticamente después de esa cantidad de segundos. Déjelo vacío para mantener el banner hasta que el usuario lo descarte.
4. Establezca el color de fondo para la barra.
5. Active el Botón de cierre si desea un control ✕ en el banner.
6. En Acciones, establezca la Acción en cerrar o url. Los banners no tienen botones separados. Tocar en cualquier parte del banner ejecuta esta acción. Consulte Configurar botones para el comportamiento de cerrar y url.

Precaución

Si desactiva el Botón de cierre, establece la Acción en url y deja Descarte automático 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 superpuestos.

Nota

El video está disponible solo en iOS por ahora. En Android, una plantilla que utilice este tipo de visualización no se renderizará. Consulte Soporte de plataforma para más detalles.

1. En Contenido, establezca la URL del video (obligatorio) en un enlace HTTPS absoluto a un archivo .m3u8 o .mp4. Opcionalmente, agregue 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. Agregue un título y un mensaje, cada uno con su propio color de texto.
3. En Configuración, active Bucle para reiniciar el video después de que termine.
4. Active Silenciado para iniciar la reproducción con el sonido apagado.
5. Active el Botón de cierre si desea un control ✕ para que los usuarios puedan descartar el in-app sin esperar a que termine el video.
6. En Acciones, agregue uno o más botones. Consulte Configurar botones.

Configurar campos de texto

Los campos de texto no admiten texto de varias líneas. Si presiona Intro, 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 agregar un emoji, haga 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. Verifique la vista previa en vivo para ver cómo se ven en el diseño.

Agregar contenido dinámico

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

1. Haga clic en Personalización junto a la barra de herramientas del campo.
2. En Etiqueta, elija una etiqueta o User ID.
3. Elija un modificador de formato (por ejemplo, CapitalizeFirst o regular).
4. Opcionalmente, ingrese un Valor de etiqueta predeterminado.
5. Haga clic en Insertar.

La etiqueta insertada se muestra como un chip en el campo. Puede cambiar la etiqueta, el modificador y el valor predeterminado antes de hacer clic en Insertar. La personalización utiliza las mismas etiquetas, modificadores y valores predeterminados que el Contenido dinámico.

Consejo

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

Cuando hace clic en Guardar, Pushwoosh verifica el contenido dinámico y Liquid en cada campo de texto. Si un campo no se analiza (por ejemplo, una etiqueta {% if %} sin cerrar), se bloquea la opción de Guardar y un aviso de El contenido dinámico contiene errores nombra el campo y el idioma con el problema. Corríjalo allí y luego haga clic en Guardar de nuevo.

Nota

La verificación de Liquid al guardar detecta errores de sintaxis como una etiqueta sin cerrar. Aún puede pasar expresiones incompletas que solo fallarán cuando se envíe el mensaje. Envíese una prueba si utiliza algo más que una etiqueta simple.

Configurar botones

Modal, pantalla completa, cada diapositiva de historias, hoja 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: elija qué sucede cuando el usuario toca el botón:
  • cerrar: descarta el in-app.
  • url: abre el enlace que ingrese en el campo que aparece. Use una dirección web (por ejemplo, https://example.com) o un enlace profundo a su aplicación (por ejemplo, myapp://product/123).

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

Precaución

Si desactiva el Botón de cierre y tampoco agrega ningún botón, el usuario no tiene ningún control en pantalla para descartar el in-app.

Agregar una imagen

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

Agregar localizaciones

Por defecto, un in-app nativo tiene un solo idioma. Para agregar 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 etiquetas a nivel de usuario no están vinculados a una plataforma de dispositivo, por lo que no aparecen aquí.

1. Haga clic en + junto al selector de idioma en la barra superior.
2. Seleccione los idiomas que desea agregar y haga clic en Aplicar.

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

Nota

Cuando agrega un idioma, Pushwoosh copia el contenido del idioma predeterminado en él: texto, imágenes y etiquetas de los botones. Cambie a ese idioma y edite cualquiera de estos campos de forma independiente.

Guardar la plantilla

Haga clic en Guardar en la parte superior derecha para guardar sus cambios.

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

Usarlo en una campaña

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

Puede usarla para:

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

Nota

La configuración de entrega, como las fechas de inicio y fin y el límite de frecuencia, funciona de la misma manera que para cualquier otro in-app y no forma parte de este editor.