Saltar al contenido
Documentación para desarrolladoresSoporte Solicitar demo Iniciar sesión
Pushwoosh.com

Diseñar formatos populares de in-apps

Resumen

Anchor link to

El Editor In-App de Pushwoosh agiliza el proceso de creación de mensajes in-app de cualquier formato y para cualquier objetivo de negocio. Al hacer el trabajo más rápido, puedes realizar experimentos rápidos y lograr los resultados deseados en menos tiempo.

Para crear un in-app desde cero, solo necesitas diseñar la disposición del mensaje usando bloques de arrastrar y soltar y personalizar cada elemento para que se ajuste al estilo de tu aplicación y a tus objetivos de negocio. No necesitas experiencia en codificación o diseño para crear in-apps atractivos y de alta conversión, solo un par de consejos sobre cómo usar mejor el Editor In-App de Pushwoosh.

A continuación, describiremos cómo crear:

  • In-apps a pantalla completa — más comúnmente, los muros de ofertas y los muros de pago vienen en esta forma;
  • In-apps a pantalla parcial — puedes usarlos para solicitudes de suscripción y recuperación de cancelaciones, promoción de productos y anuncios de características.

Mensaje in-app a pantalla completa

Anchor link to

Vamos a crear un mensaje in-app promocional para la industria del fitness como ejemplo:

Vista previa de un ejemplo de mensaje in-app promocional a pantalla completa para una aplicación de fitness con imagen y botón de CTA
  1. En tu cuenta de Pushwoosh, ve a Contenido → Rich Media y haz clic en Añadir plantilla:
Captura de pantalla que muestra la sección Rich Media con el botón Añadir plantilla resaltado

Introduce un nombre para la plantilla, selecciona Crear nueva plantilla y haz clic en Añadir plantilla:

Captura de pantalla que muestra el diálogo de creación de plantillas con el campo de nombre y la opción Crear nueva plantilla

Crearemos un in-app desde cero usando una plantilla en blanco en nuestro ejemplo. También puedes elegir una de las plantillas predeterminadas y modificarla según tus necesidades.

  1. Primero, establece el tamaño deseado del popup en la pestaña Popup:
Captura de pantalla que muestra la pestaña Popup con la configuración de ancho y alto para configurar el tamaño del popup
  1. Ahora, añadamos una imagen a nuestro mensaje in-app. Ve a la pestaña Contenido y arrastra el bloque de imagen al lienzo. Haz clic en el bloque y sube tu archivo. También puedes seleccionar una foto de stock gratuita directamente en la interfaz del editor haciendo clic en Más imágenes → Fotos de stock:

Recomendaciones de imagen para in-apps a pantalla completa (orientación vertical)

Imagen y texto

Alta resolución: 1200 x 1000 px

Tamaño mínimo: 600 x 500 px

Relación de aspecto: 6:5

Solo imagen

Alta resolución: 1200 x 2000 px

Tamaño mínimo: 600 x 1000 px

Relación de aspecto: 3:5

  1. Establece el color de fondo del mensaje in-app: ve a la pestaña Popup y selecciona el color deseado.
  1. Ahora, puedes añadir el texto de tu mensaje in-app. En nuestro ejemplo, colocaremos el texto sobre la imagen. Para ello, selecciona la imagen y haz clic en Aplicar efectos. Haz clic en el botón Texto, inserta tu contenido y ajusta sus parámetros:
  1. Añadamos también algo de texto debajo de la imagen. Ve a la pestaña Contenido y arrastra el bloque de texto al lienzo. Inserta tu texto y personaliza sus parámetros si es necesario.
  1. Finalmente, añade el botón y configura su color, tamaño y otros parámetros:

En la sección Acción, puedes especificar la acción a realizar después de hacer clic en el botón. Seleccionaremos la opción URL o Deeplink:

  1. Haz clic en Guardar para aplicar los cambios.

Ahora puedes usar tu mensaje in-app promocional de una de estas maneras:

Mensaje in-app a pantalla parcial

Anchor link to

Como ejemplo de un mensaje in-app a pantalla parcial, crearemos un popup para obtener el consentimiento del usuario para enviar notificaciones push. Este mensaje también puede ayudar a recuperar a aquellos que se han desuscrito de las notificaciones.

Vista previa de un ejemplo de mensaje popup de suscripción a pantalla parcial con icono, texto y botón Permitir
  1. Ve a tu cuenta de Pushwoosh, abre la sección Contenido → Rich Media y haz clic en Añadir plantilla:
Captura de pantalla que muestra la navegación de la sección Rich Media y el botón Añadir plantilla

Introduce un nombre para la plantilla, elige Crear nueva plantilla y haz clic en Añadir plantilla:

Captura de pantalla que muestra el diálogo de creación de plantillas con la entrada de nombre y la opción Crear nueva plantilla seleccionada

Crearemos un in-app desde cero usando una plantilla en blanco. Alternativamente, puedes seleccionar una de las plantillas predeterminadas y adaptarla a tus necesidades.

  1. Añadamos una imagen de fondo para nuestro popup. Abre la pestaña Popup, haz clic en Mostrar más opciones en la sección Contenido y sube la imagen:
  1. Añade los bloques de contenido al lienzo. Cada bloque representará un elemento de contenido separado, como un encabezado, texto, etc.
  1. Añadamos una imagen al primer bloque de contenido y ajustemos su apariencia:
  1. Añade un encabezado al segundo bloque. Establece la fuente, el color y otros parámetros de texto deseados.
  1. Ahora, añade el texto de tu mensaje in-app al tercer bloque de contenido. Puedes experimentar con la fuente, el color, la alineación del texto, la altura de línea y los parámetros de relleno.
  1. Finalmente, añadamos un botón a nuestro popup. Personaliza el color del botón, el redondeo y otros parámetros si es necesario.
  1. Haz clic en Guardar para aplicar todos los cambios.

Puedes usar tu nueva plantilla de mensaje in-app de una de estas maneras:

Más formatos e información

Anchor link to