Crear mensajes in-app en el editor integrado

Añadir una nueva plantilla

Vaya a Contenido → In-apps y haga clic en Añadir plantilla:

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.

Añadir contenido

Diseño

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

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 (padding) y subir una imagen de fondo.

Creación de mensajes in-app en formato vertical y horizontal

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

Mensajes in-app en formato vertical

Para crear mensajes in-app diseñados para la orientación vertical, que se utiliza normalmente en dispositivos móviles, vaya 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.

Mensajes in-app en formato horizontal

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

Añadir columnas a los mensajes in-app en formato horizontal

Si necesita añadir columnas a sus mensajes in-app en formato horizontal, 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 en formato horizontal 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 en formato horizontal 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 en horizontal. 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 del texto, altura de línea y relleno para los encabezados.

Nota

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

También puede ahorrar tiempo dejando que la IA genere el texto del encabezado por usted. Haga clic en el botón de 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. Puede cambiar los parámetros de fuente, color, alineación del texto, altura de línea y relleno.

Nota

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

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 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:

En la sección Acción, puede establecer la acción que debe realizarse al hacer clic en la imagen. Puede abrir un sitio web (o un enlace profundo a una página dentro de su aplicación) o cerrar la ventana emergente. También puede 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, ignore esta configuración.

Nota

Si desea abrir una página en su aplicación móvil al hacer clic en la imagen, seleccione la opción Abrir sitio web 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 Etiquetas.

La IA puede ayudarle a crear el texto del botón. Simplemente haga clic en el botón de la sección Botones inteligentes, introduzca palabras clave y haga clic en Obtener sugerencias:

Para especificar la acción que debe realizarse después de hacer clic en el botón, vaya a la sección Acción y seleccione la opción requerida. Puede abrir un sitio web o cerrar la ventana emergente. También puede insertar un atributo de manejador de JavaScript personalizado para establecer la acción de clic del botón.

Nota

Si desea abrir una página en su aplicación móvil al hacer clic en el botón, seleccione la opción Abrir sitio web 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 de relleno.

Formulario

Nota

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

Los formularios le permiten recopilar 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 deben transmitirse 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 utilizar 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 en 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 utilizarla como referencia o punto de partida para sus propios formularios de encuesta.

Además, puede mejorar sus mensajes in-app incrustando vídeos para una experiencia de usuario más atractiva. A continuación se muestra un ejemplo de cómo incrustar un vídeo de YouTube utilizando 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 debe realizarse 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:

Personalización del 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 Etiquetas 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 Combinar etiquetas y seleccione la Etiqueta que desea utilizar:

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 los 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.

Configuración general de la plantilla

En la pestaña Ventana emergente, puede configurar los ajustes generales de la plantilla:

• Establecer la posición de la ventana emergente en la pantalla;
• Cambiar el ancho y el alto de la ventana emergente;
• 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.

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

Utilice la Configuración 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 los gestos de deslizar para descartar.

Para configurar los ajustes in-app:

1. Haga clic en Configuración en la parte superior de la pantalla.

2. En la ventana de configuración, 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.

Las opciones incluyen: Arriba, Abajo, Izquierda, Derecha

Seleccionar animación de salida

Elija cómo desaparece el mensaje.

Las opciones incluyen: Arriba, Abajo, Izquierda, Derecha

Habilitar deslizar para cerrar (opcional)

Permita a los usuarios descartar 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 abra un in-app al hacer clic;
• Mostrar un único in-app a sus usuarios.