Crear mensajes in-app en el editor integrado

Crea una plantilla de mensaje in-app en el editor integrado de Pushwoosh sin escribir código. Obtendrás un diseño reutilizable con bloques de contenido, imágenes, botones y texto personalizado que puedes mostrar en un Customer Journey, como un in-app único o desde una notificación push.

Nota

Antes de empezar, integra el SDK de Pushwoosh para que los mensajes in-app puedan aparecer en tu aplicación. Más información

Crear una nueva plantilla in-app

Una plantilla in-app es un diseño reutilizable que creas una vez y luego muestras a los usuarios en las campañas. Puedes crear una subiendo un ZIP HTML personalizado o construyéndola en el editor integrado. Este artículo cubre la creación de una plantilla desde cero en el editor integrado. Sigue los mismos pasos para personalizar una plantilla existente.

1. Ve a Contenido → In-apps.
2. Haz clic en Añadir plantilla.

3. Introduce un nombre para la plantilla.
4. Elige cómo crear la plantilla:
   • Subir ZIP: sube un archivo ZIP con tu mensaje in-app en HTML.
   • Crear nueva plantilla: construye una plantilla en el editor integrado.
5. Selecciona Crear nueva plantilla.
6. Haz clic en Añadir plantilla.

Explora el diseño del editor

El editor integrado tiene cuatro áreas. Cada una tiene una función clara.

Barra superior

Usa la barra superior para renombrar la plantilla, deshacer errores, guardar tu trabajo o abrir los Ajustes de la in-app cuando necesites cambiar cómo aparece el mensaje en el dispositivo. Consulta Configurar cómo se ve la in-app en el dispositivo.

Lienzo

Usa el lienzo para ver el mensaje como lo verán los usuarios y para editar texto, imágenes y botones directamente en el diseño. Una plantilla vacía muestra Comienza con un bloque. Encima del lienzo, un conmutador de teléfono/tableta cambia el ancho de la vista previa — no cambia tu diseño, solo el ancho de la pantalla en la que lo estás previsualizando.

Capas

El panel de Capas lista cada bloque de tu plantilla como un árbol, en el mismo orden que en el lienzo. Ábrelo desde el borde izquierdo cuando quieras seleccionar un bloque anidado (por ejemplo, un botón dentro de un grupo) o arrastra filas para cambiar el orden del contenido.

Panel derecho

Usa Bloques en el panel derecho para añadir contenido al mensaje, y Ajustes cuando quieras un estilo que se aplique a toda la plantilla a la vez. Consulta Configurar el estilo de toda la plantilla.

Empieza a construir la plantilla

Después de crear una plantilla, el editor se abre con un lienzo vacío y la pestaña Bloques a la derecha.

1. Arrastra un bloque desde el panel de Bloques al lienzo, o haz clic en un bloque en el panel para añadirlo.
2. Sigue añadiendo bloques de la misma manera hasta que el diseño esté listo.
3. Abre la pestaña Ajustes cuando necesites un estilo para toda la plantilla.

Añadir bloques de contenido

Los bloques de contenido son las piezas de construcción de una plantilla in-app en el editor integrado. Combinas encabezados, texto, imágenes, botones y otros bloques en un solo diseño.

Abre la pestaña Bloques y arrastra un bloque al lienzo, o haz clic en un bloque para añadirlo. Bloques disponibles:

• Encabezado: títulos y titulares cortos en el mensaje
• Texto: cuerpo del texto y descripciones más largas
• Botón: una llamada a la acción pulsable
• Imagen: imágenes de la Galería multimedia, subidas o desde una URL
• Divisor: una línea que separa secciones visualmente
• 2 columnas: dos columnas iguales una al lado de la otra
• 3 columnas: tres columnas iguales una al lado de la otra
• 4 columnas: cuatro columnas iguales una al lado de la otra
• 33 / 67: dos columnas donde la izquierda ocupa aproximadamente el 33% del ancho y la derecha aproximadamente el 67%
• 67 / 33: dos columnas donde la izquierda ocupa aproximadamente el 67% del ancho y la derecha aproximadamente el 33%
• Temporizador: una cuenta atrás para ofertas y plazos
• Menú: una fila o columna de enlaces, como navegación o contactos
• Social: iconos que enlazan a tus perfiles sociales
• HTML: HTML personalizado, como un formulario o un vídeo incrustado

Encabezado y texto

Los bloques de Encabezado y Texto contienen el texto que los usuarios leen en el mensaje in-app. Edita el texto en el lienzo y dale formato con la barra de herramientas.

Haz clic en un bloque de Encabezado o Texto para editar su contenido en el lienzo. Selecciona algo de texto para que aparezca la barra de herramientas de formato: negrita, cursiva, subrayado, alineación, un botón de enlace y un menú desplegable de estilo de texto.

Las Merge Tags son marcadores de posición que insertan un valor de Tag del perfil del usuario en el mensaje, para que cada suscriptor vea un texto personalizado. Para añadir una, selecciona el texto, haz clic en Merge Tags en la barra de herramientas y elige una Tag de tu cuenta. Más información sobre mensajes in-app personalizados

Imagen

Un bloque de Imagen muestra una imagen en la plantilla in-app. Selecciónalo en el lienzo para abrir los ajustes de Imagen en el panel derecho.

• Añadir imagen / Reemplazar imagen: haz clic en Añadir imagen cuando el bloque esté vacío, o en Reemplazar imagen cuando ya haya una imagen establecida. Puedes subir un archivo o elegir uno de tu Galería multimedia.
• URL de la imagen: pega un enlace alojado a la imagen.
• Texto alternativo: describe la imagen para la accesibilidad.
• URL del enlace: abre un sitio web cuando se pulsa la imagen.
• Destino del enlace: abre el enlace en la misma pestaña o en una nueva.
• Archivo: después de añadir una imagen, muestra la ruta del archivo en uso.

En Espaciado, activa Relleno para añadir espacio alrededor de la imagen. Usa Todos los lados para el mismo relleno en cada lado, o activa Más opciones para establecer cada lado por separado.

Botón

Un Botón es una llamada a la acción pulsable en el mensaje in-app. Úsalo para abrir una URL, ejecutar JavaScript personalizado o cerrar el mensaje.

Haz clic en un bloque de Botón para editar su etiqueta en el lienzo. Usa la barra de herramientas para cambiar el tamaño de la fuente, el color del texto, negrita, cursiva, subrayado y alineación.

Para establecer qué sucede cuando el usuario pulsa el botón:

1. Haz clic en el icono de enlace en la barra de herramientas para abrir Insertar/Editar Enlace.
2. Elige un Tipo de acción.
3. Rellena los campos para esa acción (ver más abajo).
4. Haz clic en Guardar.

Abrir un sitio web

Abrir Sitio Web abre un enlace cuando el usuario pulsa el botón. Introduce la dirección en URL. Lo que puedes introducir:

• Un sitio web: https://example.com
• Un enlace de aplicación que abre una pantalla dentro de tu app: myapp://promo
• Cerrar la in-app sin JavaScript: pushwoosh://close

Ejecutar JavaScript personalizado

Javascript Personalizado ejecuta código cuando el usuario pulsa el botón. Introduce el código en el campo onClick.

Úsalo cuando un toque deba hacer algo en Pushwoosh, no solo abrir un enlace. La persona en la aplicación sigue viendo un botón normal. No ve tags ni eventos. Tú decides qué sucede a continuación en la pantalla: dejar el mensaje abierto o cerrarlo en el mismo onClick.

Métodos disponibles en onClick

• pushwoosh.closeInApp(): cierra el mensaje in-app. Omítelo para mantener el mensaje abierto después del toque.
• pushwoosh.sendTags({...}): guarda valores como tags de dispositivo para campañas posteriores.
• pushwoosh.postEvent(...): envía un evento personalizado, por ejemplo para iniciar un Customer Journey.
• pushwoosh.getTags(...): lee los tags actuales. Útil en HTML personalizado para cambiar lo que muestra el mensaje.
• pushwoosh.getCustomData(): lee datos personalizados pasados desde la notificación push que abrió esta in-app.

Ejemplo: permitir que los usuarios elijan un interés y guardarlo para campañas posteriores

1. Añade una pregunta en un bloque de Texto o Encabezado, por ejemplo: “¿Qué deporte te interesa?”
2. Añade un Botón por opción, por ejemplo: Yoga y Gimnasio.

3. Establece el Tipo de acción en Javascript Personalizado para cada botón.
4. Para el botón de Yoga, pega esto en onClick:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. Para el botón de Gimnasio, pega esto en onClick:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

Cuando el usuario pulsa Yoga, Pushwoosh escribe el tag interest en su dispositivo y cierra la in-app. Luego puedes dirigirte a ese usuario en un segmento o Customer Journey.

Aprende más sobre cómo crear in-apps con JavaScript

Divisor

Un Divisor es una línea horizontal entre bloques de contenido. Úsalo para separar secciones visualmente en la plantilla.

Configura el estilo de línea (Sólido, Discontinuo, Punteado), color, grosor y ancho en el panel de ajustes.

HTML

El bloque HTML te permite pegar HTML personalizado en una plantilla in-app. Úsalo para un formulario personalizado, una encuesta o un vídeo incrustado cuando no haya un bloque de Formulario dedicado para mensajes in-app.

Ejemplos

Los siguientes ejemplos muestran formas comunes de usar el bloque HTML en una plantilla in-app: un formulario de captación de leads, una encuesta y un vídeo incrustado.

Nota

Los ejemplos de formulario y encuesta guardan tags de dispositivo y envían eventos a través de Pushwoosh. Crea los eventos personalizados en tu cuenta antes de usarlos en campañas.

Formulario de leads

Este formulario de captación de leads escribe el nombre y el correo electrónico como tags, envía un evento promo_requested, muestra un mensaje de agradecimiento y luego cierra la in-app.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

Encuesta

Esta encuesta guarda la hora de entrenamiento seleccionada como un tag, envía un evento schedule_survey_completed, muestra un mensaje de agradecimiento y luego cierra la in-app.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

Vídeo

Este ejemplo incrusta un vídeo de YouTube en el mensaje in-app.

Código 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 bloque Menú coloca varios elementos clicables en una fila o columna. Úsalo para una barra de navegación o una lista de contactos de la empresa.

Para cada elemento del menú, establece:

• Etiqueta: el texto que ven los usuarios
• URL: dónde se abre el elemento
• Destino: misma pestaña o una nueva pestaña

En los ajustes del bloque, también puedes establecer:

• Dirección: Horizontal o Vertical
• Alineación: Izquierda, Centro o Derecha
• Separador: un divisor opcional entre elementos
• Fuente, tamaño, peso, espaciado entre letras y colores de enlace/texto

Social

El bloque Social muestra una fila de iconos de redes sociales que enlazan a tus perfiles. Úsalo para enviar a los usuarios a Facebook, Instagram, X y otras plataformas desde el mensaje in-app.

Añade entradas de plataforma, luego establece la alineación, el tamaño del icono y el espacio entre iconos.

Temporizador de cuenta atrás

El bloque Temporizador es una cuenta atrás en el mensaje in-app. Úsalo para ofertas por tiempo limitado, ventas flash y recordatorios de eventos.

Para configurarlo:

1. En Cuenta atrás, establece la Fecha de finalización y la Hora de finalización, luego elige la Zona horaria y el Idioma para las etiquetas del temporizador.
2. Activa Etiquetas para mostrar los subtítulos “días / horas / minutos / segundos” debajo de los dígitos, o desactívalo para solo números.
3. En Apariencia, establece el Fondo, el Color de los dígitos, el Color de las etiquetas y el tamaño de la fuente para los dígitos (predeterminado 40px) y las etiquetas (predeterminado 16px).
4. Ajusta el Espaciado (relleno) según sea necesario.

Columnas

Las Columnas dividen el lienzo en secciones una al lado de la otra para que puedas colocar contenido uno junto al otro en una sola fila.

Arrastra uno de estos bloques al lienzo:

• 2 columnas: dos columnas iguales
• 3 columnas: tres columnas iguales
• 4 columnas: cuatro columnas iguales
• 33 / 67: columna izquierda de aproximadamente 33% de ancho, derecha de aproximadamente 67%
• 67 / 33: columna izquierda de aproximadamente 67% de ancho, derecha de aproximadamente 33%

Luego añade contenido a cada columna. Para cambiar el espaciado de todas las columnas en la plantilla, abre Ajustes → Valores predeterminados de las columnas y ajusta el relleno exterior, el relleno de la columna y el espacio entre columnas.

Configurar el estilo de toda la plantilla

Los ajustes de la plantilla controlan el estilo de toda la plantilla in-app: tamaño y fondo del documento, aspecto del popup y estilos predeterminados para los bloques.

Abre la pestaña Ajustes en el panel derecho.

Secciones disponibles:

• Documento: tamaño y aspecto de toda el área del mensaje: ancho, relleno, color o imagen de fondo, color del texto, familia de fuentes y el espacio entre bloques.
• Popup: cómo se sitúa el mensaje sobre el fondo atenuado: radio de las esquinas, más color y opacidad de la superposición.
• Valores predeterminados de los bloques: estilos iniciales compartidos para los bloques que añadas más tarde, para que el nuevo contenido coincida con la plantilla hasta que sobrescribas un bloque en el lienzo.
• Valores predeterminados de las columnas: espaciado para cada diseño de Columnas: relleno exterior, relleno dentro de cada columna y el espacio entre columnas.
• Valores predeterminados de la tarjeta: aspecto inicial para los contenedores de Tarjeta que agrupan contenido en el diseño, aplicado hasta que diseñes una tarjeta individualmente.
• Valores predeterminados del grupo de botones: espaciado y alineación cuando varios botones se sientan juntos como un grupo.
• Valores predeterminados del botón: aspecto inicial para los nuevos bloques de Botón para que las llamadas a la acción se mantengan consistentes en toda la plantilla hasta que diseñes uno por separado.
• Valores predeterminados del divisor: estilo de línea inicial, color, grosor y ancho para los nuevos bloques de Divisor.

Los valores predeterminados se aplican siempre que un bloque individual no los sobrescriba.

Nota

No hay ajuste de altura. El popup crece con su contenido. Para un mensaje a pantalla completa, establece el Ancho en Ajustes y elige Pantalla completa en Ajustes de la in-app.

Localizar la plantilla

Una plantilla multilingüe almacena el texto localizado para cada idioma en un solo diseño in-app. Usa el selector de idioma sobre el lienzo para añadir idiomas y editar el contenido por idioma. Para saber cómo funciona la mensajería multilingüe en todos los canales, consulta Mensajería multilingüe.

El contenido que aún no has traducido para el idioma actual se muestra atenuado. Empieza a escribir para crear la traducción. El idioma predeterminado seguirá mostrándose hasta que lo hagas.

Nota

Cualquier bloque que añadas aparece con el mismo contenido para cada idioma. Recuerda traducir el nuevo texto y las etiquetas de los botones para cada idioma que uses en tu plantilla.

Configurar cómo se ve la in-app en el dispositivo

Los Ajustes de la in-app controlan cómo aparece y se comporta el mensaje en el dispositivo: posición, animaciones, gestos de deslizamiento y el botón de cierre. Estos ajustes solo se aplican a iOS y Android Nativo.

Haz clic en Ajustes de la in-app en la barra superior:

• Posición en la pantalla: Pantalla completa, Superior, Centro o Inferior.
• Animación de presentación / Animación de cierre: Ninguna, Desvanecer, Izquierda, Derecha, Arriba o Abajo, o Predeterminado para usar el valor predeterminado del SDK de tu aplicación.

Nota

Ninguna y Desvanecer funcionan actualmente en Android. En iOS, el mensaje aparece y desaparece instantáneamente (la alineación llegará pronto).

• Duración de la animación (MS): de 100 a 3000 milisegundos. Déjalo vacío para usar el tiempo predeterminado del SDK.
• Deslizar para cerrar: habilita cualquier combinación de Izquierda, Derecha, Arriba y Abajo.
• Mostrar botón de cierre: activa o desactiva el control de cierre. Cuando esté activado, establece la Posición (Superior derecha, Superior izquierda, Inferior derecha, Inferior izquierda), el Fondo (un color o Transparente) y el Color del icono. A diferencia de los otros ajustes en este modal, la apariencia del botón de cierre se renderiza en el propio mensaje y se muestra en todas las plataformas, no solo en iOS y Android Nativo.

Haz clic en Aplicar para guardar tus elecciones, o en Cancelar para descartarlas.

Guardar la plantilla

Haz clic en Guardar en la barra superior para guardar tus cambios. Usa Deshacer/Rehacer en la barra superior para retroceder y avanzar en tus ediciones.

Nota

Al guardar, tu plantilla in-app se almacena en Contenido → In-apps. Desde allí puedes previsualizar, editar y gestionar plantillas. Más información

Usar la plantilla guardada

Después de guardar una plantilla in-app, puedes mostrarla a los usuarios en un Customer Journey, como un in-app único, o cuando un usuario pulsa una notificación push.

• Mostrar una in-app como parte de un customer journey
• Enviar una notificación push que abre una in-app al hacer clic
• Mostrar una única in-app a tus usuarios