Crear mensajes in-app con el editor sin código

Para crear una plantilla in-app (también llamada Rich Media), ve a Contenido → In-Apps (Rich Media) y haz clic en Añadir plantilla:

Captura de pantalla que muestra el botón Añadir plantilla en la sección Rich Media del Panel de Control de Pushwoosh

Aquí, tienes tres opciones:

Subir un archivo ZIP con tu mensaje in-app en HTML.
Elegir y personalizar una de las plantillas predefinidas.
Construir tu propia plantilla desde cero.

En este artículo, veremos cómo crear una plantilla desde cero. Sigue los mismos pasos para personalizar tu plantilla existente.

Definiendo el diseño

Define el diseño de la plantilla arrastrando y soltando los bloques de contenido necesarios en el cuerpo de la plantilla. Puedes añadir una imagen, texto, botón, divisor, formulario rellenable, bloque HTML y menú.

Si quieres colocar más de un elemento de contenido en una fila, añade el elemento Columnas a la plantilla, selecciona el tipo de bloque requerido y añade contenido a cada columna:

Para cambiar el color de fondo de un diseño, haz clic en sus márgenes exteriores, asegúrate de que todo el diseño esté seleccionado y elige el color:

Si todo el diseño está seleccionado, también puedes editar los ajustes de relleno y subir una imagen de fondo.

Creando rich media en formato vertical y horizontal

Pushwoosh proporciona la flexibilidad de crear contenido rich media tanto en orientación vertical como horizontal, asegurando que tus campañas sean visualmente atractivas y efectivas en todos los dispositivos.

Rich media vertical

Para crear rich media diseñado para la orientación vertical, que se utiliza normalmente en dispositivos móviles, navega a la pestaña Móvil en el editor. Aquí, puedes diseñar tu contenido para que se ajuste a un diseño vertical, adecuado para las pantallas de los smartphones.

Rich media horizontal

Para rich media con orientación horizontal, que se muestra típicamente en pantallas más anchas como tabletas o en aplicaciones orientadas horizontalmente como juegos o reproductores de música, navega a la pestaña Escritorio dentro del editor. Aquí, puedes estructurar tu rich media para aprovechar un espacio horizontal más amplio.

Captura de pantalla que muestra las pestañas Móvil y Escritorio para cambiar entre las orientaciones vertical y horizontal

Añadiendo columnas a rich media horizontal

Si necesitas añadir columnas a tu rich media horizontal, primero añade el elemento Columna y define el número y el diseño de las columnas que necesitas.

Después de diseñar tu rich media horizontal con columnas, cambia a la pestaña Móvil.

Desplázate hacia abajo hasta la sección DISEÑO RESPONSIVE, que se encuentra en la parte inferior del panel de configuración, y habilita la opción No apilar en móvil.

Pushwoosh también te permite mezclar y combinar diseños de columnas en tu rich media. Puedes configurar columnas específicas para que se apilen verticalmente mientras mantienes otras horizontales. Para ello, ajusta cada bloque de columna según sea necesario.

Captura de pantalla que muestra configuraciones de diseño de columnas mixtas, con algunas apiladas verticalmente y otras horizontalmente

Elementos de contenido

Encabezado

Puedes editar los parámetros de fuente, color, alineación del texto, altura de línea y relleno para los encabezados.

También puedes ahorrar tiempo dejando que la IA genere el texto del encabezado por ti. Haz clic en el botón de la sección Encabezados Inteligentes, introduce algunas palabras clave y haz clic en Obtener Sugerencias:

Texto

Los textos se pueden personalizar de la misma manera que los encabezados: puedes cambiar los parámetros de fuente, color, alineación del texto, altura de línea y relleno.

También puedes usar el editor de IA de Pushwoosh para reescribir tu texto en un tono de voz diferente, cambiar su longitud de caracteres y revisar la gramática. Para ello, haz clic en el bloque de texto → Texto Inteligente y elige uno de los formatos de texto incorporados:

Imagen

Para añadir una imagen, haz clic en el bloque de imagen y arrastra tu archivo al panel del editor:

Alternativamente, puedes especificar la URL de la imagen en lugar de subir un archivo.

También puedes experimentar con la generación de imágenes por IA. Para ello, haz clic en el botón de la sección Imagen Mágica, describe la imagen que quieres crear y haz clic en Generar Imágenes:

En la sección Acción, puedes establecer la acción que debe realizarse al hacer clic en la imagen: abrir un sitio web (o un deep link a una página dentro de tu aplicación) o cerrar el popup. También puedes insertar un atributo de manejador de JavaScript personalizado para establecer la acción de clic en la imagen. Si no se requiere ninguna acción, ignora este ajuste.

Si quieres abrir una página en tu aplicación móvil cuando se haga clic en la imagen, selecciona la opción Abrir Sitio Web e inserta un deep link.

Botón

Una vez que se añade un botón a tu plantilla, puedes personalizar su texto, color, relleno y bordes.

La IA puede ayudarte a crear el texto del botón. Simplemente haz clic en el botón de la sección Botones Inteligentes, introduce palabras clave y haz clic en Obtener Sugerencias:

Para especificar la acción que debe realizarse después de hacer clic en el botón, ve a la sección Acción y selecciona la opción requerida: abrir un sitio web o cerrar el popup. También puedes insertar un atributo de manejador de JavaScript personalizado para establecer la acción de clic del botón.

Si quieres abrir una página en tu aplicación móvil cuando se haga clic en el botón, selecciona la opción Abrir Sitio Web e inserta un deep link.

Divisor

Los divisores son líneas que puedes colocar entre los bloques de contenido. Úsalos para estructurar tu plantilla y enfatizar los bloques más importantes. Puedes cambiar el ancho del divisor, el tipo de línea, la alineación y los ajustes de relleno.

Formulario

Para configurar este elemento, necesitarás la ayuda de un desarrollador.

Los formularios te permiten recopilar correos electrónicos, números de teléfono, preferencias y otra información de los usuarios que puede ser útil para futuras comunicaciones. Este elemento se configura como un formulario HTML estándar: los datos se envían en una solicitud GET o POST a la dirección especificada en el campo URL.

Captura de pantalla que muestra el panel de configuración del formulario con el campo URL y los ajustes del método de solicitud

Haz clic en el nombre del campo para configurar sus parámetros:

Tipo de Campo: el tipo de datos que deben transmitirse en el campo;
Nombre del Campo: el nombre del parámetro al que se pasan los datos del campo;
Etiqueta del Campo: texto que se muestra encima del campo;
Texto de Marcador de Posición;
Casilla de verificación que indica si el campo es obligatorio para enviar el formulario.

Captura de pantalla que muestra las opciones de configuración de los campos del formulario, incluyendo el tipo de campo, nombre, etiqueta y marcador de posición

Para añadir otro campo, haz clic en Añadir Nuevo Campo y selecciona el tipo de datos:

Captura de pantalla que muestra el botón Añadir Nuevo Campo y el menú desplegable con los tipos de datos de campo disponibles

Puedes personalizar los parámetros del formulario como el ancho, la alineación, el espacio entre campos, el texto del botón, los colores y las fuentes.

HTML

Añade el bloque HTML si quieres incluir tu propio código HTML en la plantilla.

Menú

El elemento Menú te permite colocar varios elementos clicables en una fila o columna. Por ejemplo, puedes añadir una barra de navegación o los contactos de la empresa.

Para añadir un elemento de menú, haz clic en Añadir Nuevo Elemento:

Captura de pantalla que muestra el botón Añadir Nuevo Elemento para añadir elementos de menú a la plantilla

Añade el texto del elemento y establece la acción que debe realizarse al hacer clic en el elemento:

Captura de pantalla que muestra la configuración de un elemento de menú con el campo de texto y los ajustes de acción

Elige el tipo de menú horizontal o vertical y añade un separador entre los elementos si es necesario:

Captura de pantalla que muestra las opciones de diseño del menú con ajustes de orientación horizontal y vertical

Personalización del contenido

Personaliza el texto principal, el encabezado o el texto del botón para que tu contenido sea más relevante y atractivo. Por ejemplo, puedes dirigirte a los usuarios por su nombre o mencionar sus preferencias.

Primero, necesitas configurar Tags y configurar la recopilación de datos de los usuarios (por ejemplo, a través de un formulario de comentarios). Al crear Rich Media, selecciona el bloque de contenido requerido, haz clic en Merge Tags y selecciona el Tag que quieres usar:

Plantillas multi-idioma

Puedes localizar los textos de tu plantilla de Rich Media para cada idioma que hablen tus usuarios. Para ello, cambia entre los idiomas en la lista Idioma editable y edita el contenido en cada idioma por separado:

Captura de pantalla que muestra el menú desplegable Idioma editable para seleccionar y localizar el contenido de la plantilla

Si el contenido no está localizado, se mostrará en el idioma especificado como predeterminado en la configuración de idioma.

Cualquier elemento que añadas a la plantilla aparece con el mismo contenido para todos los idiomas. Recuerda localizar los textos añadidos (incluidos los textos de los botones) para todos los idiomas que utilices en tu plantilla.

Ajustes generales de la plantilla

En la pestaña Popup, puedes configurar los ajustes generales de la plantilla:

Establecer la posición del popup en la pantalla;
Cambiar el ancho y el alto del popup;
Ajustar el redondeo de los bordes;
Configurar los ajustes de contenido para toda la plantilla: alineación, ancho, fuentes y colores;
Establecer el color de fondo o añadir una imagen de fondo;
Personalizar la posición y la apariencia del botón de cierre.

Guardar y usar la plantilla

Haz clic en Guardar para aplicar los cambios:

Captura de pantalla que resalta el botón Guardar para guardar los cambios de la plantilla de mensaje in-app

Ahora puedes usar tu plantilla de Rich Media para enviar tus mensajes in-app. Por favor, sigue esta guía para hacerlo >