Crear mensajes in-app en el editor integrado

Video de YouTube: Cree In-Apps sin código en nuestro editor fácil de usar

Añadir una nueva plantilla

Para crear una plantilla in-app, vaya a Contenido → In-apps y haga clic en Añadir plantilla:

Aquí, tiene dos formas de crear una plantilla:

1. Subir ZIP — suba un archivo ZIP con su mensaje in-app en HTML.
2. Crear nueva plantilla — construya una plantilla en el editor visual. Después de crearla, puede empezar desde una plantilla predefinida o una en blanco.

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

Introduzca un nombre de plantilla, seleccione Crear nueva plantilla y haga clic en Añadir plantilla:

Puede crear una nueva página de mensaje in-app basada en una plantilla predeterminada o empezar desde cero seleccionando una plantilla en blanco.

Configuración general de la plantilla

Antes de añadir bloques de contenido, configure la plantilla en la pestaña Popup:

• Establezca la posición del popup en la pantalla.
• Cambie el ancho y el alto del popup.
• Ajuste el redondeo de los bordes.
• Configure los ajustes de contenido para toda la plantilla: alineación, ancho, fuentes y colores.
• Establezca el color de fondo o añada una imagen de fondo.
• Personalice la posición y la apariencia del botón de cerrar.

Los in-apps a pantalla completa y a pantalla parcial utilizan el mismo editor. Elija un formato a continuación y establezca el ancho y el alto del popup para que coincidan.

Mensaje in-app a pantalla completa

Utilice in-apps a pantalla completa para la incorporación, muros de pago y promociones como los offerwalls.

En la pestaña Popup, establezca un ancho y alto cercanos al tamaño de la pantalla del dispositivo de destino para que el mensaje cubra la mayor parte de la pantalla.

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

Nota

Para aplicaciones nativas de iOS y Android, abra Ajustes → Ajustes In-App, y establezca la posición del mensaje en Pantalla completa.

Mensaje in-app a pantalla parcial

Los in-apps a pantalla parcial son mensajes superpuestos compactos que dejan parte de la aplicación visible detrás del popup. Úselos para solicitudes de opt-in, anuncios y contenido promocional.

En la pestaña Popup, establezca un ancho y alto más pequeños para que el popup no cubra toda la pantalla.

Nota

Para aplicaciones nativas de iOS y Android, abra Ajustes → Ajustes In-App, y elija Centro, Superior o Inferior para la posición del mensaje.

Consejo

Para automatizar los popups de solicitud de permiso de push y de recuperación de opt-out en Customer Journey, consulte Crear popups de opt-in y opt-out.

Añadir contenido

Bloques de contenido

Defina el diseño de la plantilla arrastrando y soltando los bloques de contenido necesarios en el cuerpo de la plantilla. Puede añadir encabezados, texto, imágenes, botones, divisores, formularios rellenables, bloques HTML, menús, carruseles de imágenes, temporizadores de cuenta atrás y tablas.

Si desea colocar más de un elemento de contenido en una fila, añada el elemento Columnas a la plantilla. Seleccione el tipo de bloque requerido y añada contenido a cada columna:

Para cambiar el color de fondo de un diseño, haga clic en sus márgenes exteriores. Asegúrese de que todo el diseño esté seleccionado y elija el color:

Si todo el diseño está seleccionado, también puede editar la configuración del relleno y subir una imagen de fondo.

Orientación vertical y horizontal

Pushwoosh proporciona la flexibilidad de crear contenido de mensajes in-app tanto en orientación vertical como horizontal. Esto asegura que sus campañas sean visualmente atractivas y efectivas en todos los dispositivos.

Vertical (pestaña Móvil)

Para crear mensajes in-app diseñados para la orientación vertical, típicamente utilizada en dispositivos móviles, navegue a la pestaña Móvil en el editor. Aquí, puede diseñar su contenido para que se ajuste a un diseño vertical adecuado para las pantallas de los smartphones.

Horizontal (pestaña Escritorio)

Para los mensajes in-app orientados horizontalmente, que generalmente se prefieren para pantallas más anchas, navegue a la pestaña Escritorio dentro del editor. Aquí, puede estructurar sus mensajes in-app para aprovechar un espacio horizontal más amplio.

Columnas en diseños horizontales

Si necesita añadir columnas a sus mensajes in-app horizontales, primero añada el elemento Columna. Defina el número y el diseño de las columnas que necesita.

Después de diseñar sus mensajes in-app horizontales con columnas, cambie a la pestaña Móvil. Desplácese hacia abajo hasta la sección DISEÑO RESPONSIVE, que se encuentra en la parte inferior del panel de configuración, y active la opción No apilar en móvil.

Nota

Este paso es vital para mantener el diseño previsto de sus mensajes in-app horizontales cuando se ven en dispositivos móviles. Asegura que las columnas permanezcan una al lado de la otra, en lugar de apilarse.

Pushwoosh también le permite mezclar y combinar diseños de columnas en sus mensajes in-app. Puede configurar columnas específicas para que se apilen verticalmente mientras mantiene otras horizontales. Para ello, ajuste cada bloque de columna según sea necesario.

Elementos de contenido

Encabezado

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

Nota

Si desea personalizar el encabezado para cada usuario, añádale Tags.

También puede ahorrar tiempo dejando que la IA genere el texto del encabezado por usted. Haga clic en el botón en la sección Encabezados Inteligentes, introduzca algunas palabras clave y haga clic en Obtener Sugerencias:

Texto

Los textos se pueden personalizar de la misma manera que los encabezados (en el editor, este bloque se etiqueta como Párrafo). Puede cambiar los parámetros de fuente, color, alineación de texto, altura de línea y relleno.

Nota

Si desea personalizar el texto para cada usuario, añádale Tags.

También puede mejorar su texto utilizando la opción Texto Inteligente:

Imagen

Para añadir una imagen, haga clic en el bloque de imagen y arrastre su archivo al panel del editor:

Alternativamente, puede especificar la URL de la imagen en lugar de subir un archivo. También puede pegar la URL de una imagen de su almacén de medios en el campo URL de la imagen.

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

Para colocar texto directamente sobre una imagen, seleccione el bloque de imagen y haga clic en Aplicar Efectos. Haga clic en Texto, inserte su contenido y ajuste sus parámetros:

En la sección Acción, abra el desplegable Tipo de Acción para establecer qué sucede cuando se hace clic en la imagen: URL o Deeplink (abrir un sitio web o un enlace profundo a una página dentro de su aplicación), Cerrar Popup o Javascript Personalizado (insertar un manejador de JavaScript personalizado). Si no se requiere ninguna acción, deje seleccionada Cerrar Popup.

Nota

Si desea abrir una página en su aplicación móvil cuando se hace clic en la imagen, seleccione la opción URL o Deeplink e inserte un enlace profundo.

Botón

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

Nota

Si desea personalizar el texto del botón para cada usuario, añádale Tags.

La IA puede ayudarle a idear el texto del botón. Simplemente haga clic en el botón en la sección Botones Inteligentes, introduzca palabras clave y haga clic en Obtener Sugerencias:

Para especificar la acción que se debe realizar después de hacer clic en el botón, vaya a la sección Acción y abra el desplegable Tipo de Acción: URL o Deeplink (abrir un sitio web o un enlace profundo), Cerrar Popup o Javascript Personalizado (insertar un manejador de JavaScript personalizado).

Nota

Si desea abrir una página en su aplicación móvil cuando se hace clic en el botón, seleccione la opción URL o Deeplink e inserte un enlace profundo.

Divisor

Los divisores son líneas que puede colocar entre los bloques de contenido. Úselos para estructurar su plantilla y enfatizar los bloques más importantes. Puede cambiar el ancho del divisor, el tipo de línea, la alineación y la configuración del relleno.

Formulario

Nota

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

Los formularios le permiten recopilar los correos electrónicos, números de teléfono, preferencias y otra información de los usuarios que pueda 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.

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

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

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

Puede 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

El bloque HTML le permite añadir su propio código HTML personalizado a una plantilla.

Esto puede ser especialmente útil para mejorar sus mensajes in-app con elementos interactivos o visualmente atractivos. Por ejemplo, si busca crear formularios personalizados para encuestas, puede usar el bloque HTML para incluir sus propios formularios diseñados.

Después de configurar el formulario, puede hacer un seguimiento de las estadísticas directamente dentro de Pushwoosh, lo que permite un análisis fácil de los resultados y las interacciones de los usuarios. Para implementar esto, necesitará la ayuda de su equipo de desarrollo, por favor comparta este enlace con ellos.

Hay una plantilla de mensaje in-app prediseñada con un formulario de encuesta personalizado en las plantillas predeterminadas. Puede usar esto como referencia o punto de partida para sus propios formularios de encuesta.

Además, puede mejorar sus mensajes in-app incrustando videos para una experiencia de usuario más atractiva. Aquí hay un ejemplo de cómo incrustar un video de YouTube usando HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Menú

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

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

Añada el texto del elemento y establezca la acción que se debe realizar al hacer clic en el elemento:

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

Carrusel de imágenes

El elemento Carrusel muestra varias imágenes en un deslizador deslizable dentro de un solo mensaje in-app. Úselo para mostrar múltiples productos, capturas de pantalla o pasos de incorporación.

Para configurar el carrusel:

1. Con el bloque Carrusel seleccionado, cambie entre Móvil y Escritorio en la parte superior del panel para configurar cada vista.

2. En la sección Imágenes, use las pestañas Imagen 1, Imagen 2, Imagen 3, etc. para seleccionar una diapositiva. Haga clic en + para añadir otra diapositiva o en el icono de eliminar para eliminar la activa.

3. Para la diapositiva seleccionada, haga clic en Subir Imagen o elija una opción de Más Imágenes. También puede pegar un enlace alojado en URL de la imagen, incluyendo una imagen de su almacén de medios.

4. Introduzca el Texto Alternativo para la diapositiva. Para ajustar la imagen en sí, haga clic en Editar Imagen junto a la vista previa en miniatura.

5. Haga clic en Mostrar Más Opciones en la parte inferior del panel si necesita configuraciones adicionales para la diapositiva.

Temporizador de cuenta atrás

El elemento Temporizador añade una cuenta atrás a su mensaje in-app. Úselo para ofertas por tiempo limitado, ventas flash y recordatorios de eventos. Establezca la fecha y hora objetivo, luego personalice la apariencia del temporizador.

Para configurar el temporizador:

1. Con el bloque Temporizador seleccionado, cambie entre Móvil y Escritorio en la parte superior del panel para configurar cada vista.

2. En la sección Cuenta atrás, establezca la Hora de finalización en la fecha y hora en que la cuenta atrás debe llegar a cero. Elija la Zona horaria y el Idioma para las etiquetas del temporizador.

3. Active las Etiquetas para mostrar Días, Horas, Minutos y Segundos debajo de los dígitos, o desactívelas para mostrar solo los números de la cuenta atrás.

4. En la sección Estilo, establezca el Fondo, el Color de los dígitos y el Color de las etiquetas. Elija la Fuente de los dígitos, el Tamaño de fuente de los dígitos, la Fuente de las etiquetas y el Tamaño de fuente de las etiquetas.

5. Configure otras opciones en Imagen, Acción y General según sea necesario.

Tabla

El elemento Tabla le permite presentar contenido estructurado en filas y columnas, como comparaciones de planes, precios o listas de características. Añada o elimine filas y columnas y personalice los bordes, el relleno y el estilo del texto.

Para configurar la tabla:

1. Con el bloque Tabla seleccionado, cambie entre Móvil y Escritorio en la parte superior del panel para configurar cada vista.

2. En la sección Diseño, establezca Columnas y Filas con los botones + y -.

3. Elija el Color de fondo. Active el Borde para establecer el estilo, el grosor y el color, o use Más Opciones para configuraciones avanzadas de borde. Active Filas alternas para alternar los fondos de las filas.

4. Haga clic en una celda en la vista previa para introducir el texto del encabezado o del cuerpo.

5. En Encabezado y Contenido, personalice las fuentes, los colores y la alineación del texto para las celdas del encabezado y del cuerpo.

6. Configure Enlaces, General y Diseño Responsive según sea necesario.

Personalización de contenido

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

Primero, necesita configurar Tags y configurar la recopilación de datos de los usuarios (por ejemplo, a través de un formulario de comentarios). Al crear mensajes in-app, seleccione el bloque de contenido requerido, haga clic en Merge Tags y seleccione el Tag que desea usar:

Plantillas multilingües

Puede localizar los textos de su plantilla de mensaje in-app para cada idioma que hablen sus usuarios. Para ello, cambie entre idiomas en la lista Idioma editable y edite el contenido en cada idioma por separado:

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

Nota

Cualquier elemento que añada a la plantilla aparece con el mismo contenido para todos los idiomas. Recuerde localizar los textos añadidos (incluidos los textos de los botones) para todos los idiomas que utilice en su plantilla.

Personalizar la apariencia y el comportamiento de los mensajes in-app (Nativo para iOS y Android)

Use los Ajustes In-App para controlar cómo se ven y se comportan sus mensajes in-app en las aplicaciones nativas de iOS y Android. Puede ajustar la posición en la pantalla, elegir animaciones y habilitar gestos de deslizar para descartar.

Para configurar los ajustes in-app:

1. Haga clic en Ajustes en la parte superior de la pantalla.

2. En la ventana de ajustes, elija cómo quiere que su mensaje in-app se vea y se comporte ajustando las opciones disponibles:

Establecer la posición del mensaje en la pantalla

Elija dónde debe aparecer el mensaje.

Las opciones incluyen: Pantalla completa, Superior, Centro, Inferior

Seleccionar animación de entrada

Elija cómo aparece el mensaje en la pantalla. En los ajustes, esta es la opción Animación de Presentación.

Las opciones incluyen: Arriba, Abajo, Izquierda, Derecha

Seleccionar animación de salida

Elija cómo desaparece el mensaje. En los ajustes, esta es la opción Animación de Cierre.

Las opciones incluyen: Arriba, Abajo, Izquierda, Derecha

Habilitar deslizar para cerrar (opcional)

Permita que los usuarios descarten el mensaje deslizando en una o más direcciones.

Las opciones incluyen: Izquierda, Derecha, Arriba, Abajo

3. Después de seleccionar sus preferencias, haga clic en Aplicar para guardar los cambios o en Cancelar para descartarlos.

Guardar y usar la plantilla

Haga clic en Guardar para aplicar los cambios.

Ahora puede usar su plantilla de mensaje in-app de una de las siguientes maneras:

• Mostrar un in-app como parte de un customer journey;
• Enviar un push que abre un in-app al hacer clic;
• Mostrar un único in-app a sus usuarios.