Referencia de bloques del editor in-app

Referencia para cada bloque que puedes añadir en el lienzo del editor integrado.

Cada tipo de bloque tiene un propósito diferente en el mensaje:

• Encabezado: títulos y titulares cortos
• Texto: cuerpo del texto y descripciones más largas
• Botón: una llamada a la acción pulsable
• Imagen: imágenes de la tienda de medios, subidas o desde una URL
• Video: una miniatura de video pulsable que abre un video de YouTube o Vimeo
• Tarjeta: una imagen con encabezado, texto y botón en un solo diseño
• Divisor: una línea que separa secciones
• Columnas: diseños de lado a lado (2, 3 o 4 columnas iguales, o divisiones de 33/67 y 67/33)
• Temporizador: una cuenta regresiva para ofertas y plazos
• Menú: una fila o columna de enlaces de navegación o contacto
• Redes sociales: iconos que enlazan a tus perfiles sociales
• HTML: HTML personalizado, como un formulario, una encuesta o un video incrustado
• Productos: una cuadrícula de tarjetas de productos de tu Catálogo de productos o del carrito abandonado de un usuario

Cómo configurar los bloques del editor

Arrastra un bloque al lienzo desde la pestaña Bloques, o haz clic en él para añadirlo al final. Selecciona el bloque para abrir su configuración en el panel derecho y configurar el contenido, los enlaces, el tamaño y el espaciado.

Consejo

Cada bloque también tiene ajustes de Visibilidad y Condición de visualización. Úsalos para ocultar un bloque en el teléfono o en el escritorio, o para mostrarlo solo a usuarios específicos. Aprende más

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.

Los 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 uno, selecciona el texto, haz clic en Merge Tags en la barra de herramientas y elige un Tag de tu cuenta. Aprende más sobre los mensajes in-app personalizados

Imagen

Un bloque de Imagen muestra una imagen en la plantilla in-app.

Selecciónalo en el lienzo para abrir la configuración 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 tienda de medios.
• URL de la imagen: pega un enlace alojado a la imagen.
• Texto alternativo: describe la imagen para la accesibilidad.
• Prompt: el prompt de generación de IA para una imagen que creaste con Generar con IA.
• Ancho (px) / Alto (px): fija la imagen a un tamaño en píxeles. Deja un campo vacío para que se dimensione automáticamente.
• Radio de esquina (px): redondea las esquinas de la imagen.
• Alineación: izquierda, centro o derecha.

En Enlace, establece un Tipo de acción (por ejemplo, Abrir sitio web o URL o Deeplink) y su URL para abrir algo cuando se pulse la imagen, y un Destino del enlace para abrirlo en la misma pestaña o en una nueva.

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.

Video

Un bloque de Video añade un video de YouTube o Vimeo al mensaje como una miniatura pulsable. El mensaje muestra una imagen fija con una superposición de ▶. Al pulsarla, se abre el video en la aplicación de YouTube o Vimeo o en el navegador.

Selecciona el bloque en el lienzo para abrir su configuración:

• URL del video: pega un enlace de YouTube o Vimeo. El editor obtiene una miniatura automáticamente.
• Texto alternativo: describe el video para la accesibilidad.
• URL de la miniatura: mantén la miniatura obtenida automáticamente, o haz clic en Añadir miniatura / Reemplazar miniatura para elegir una de la tienda de medios, o pega un enlace alojado directamente.
• Superposición del botón de reproducción: activado por defecto. Desactívalo para mostrar la miniatura simple sin la superposición de ▶.
• Ancho (px), Radio de esquina (px) y Alineación: controlan el aspecto de la miniatura y dónde se sitúa en el diseño.

Tarjeta

Un bloque de Tarjeta combina una imagen con un encabezado, texto y botón en un único diseño predefinido, para que no tengas que colocar y alinear cuatro bloques separados a mano.

• Diseño: elige en qué lado se sitúa la imagen en relación con el contenido, o activa Ajustar texto alrededor de la imagen.
• Imagen: añade o reemplaza la imagen, establece el texto alternativo, edita el Prompt de generación de IA, añade Relleno y establece el Radio de esquina (px).
• Tamaño y ajuste: establece el Ancho, Alto, Recorte (Original o una proporción fija) y Ajuste (Cubrir o un punto focal) de la imagen. Los campos exactos dependen del Diseño que hayas elegido.
• Enlace: haz que toda la tarjeta abra una URL al ser pulsada.

Edita el encabezado, el texto y el botón de la tarjeta de la misma manera que editas los bloques independientes de Encabezado, Texto y Botón.

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: Abrir sitio web, URL o Deeplink o Javascript personalizado.
3. Rellena los campos para esa acción (ver más abajo).
4. Haz clic en Guardar.

Abrir sitio web

Abrir sitio web abre una página web cuando el usuario pulsa el botón. Introduce la dirección en URL, por ejemplo https://example.com.

URL o Deeplink

URL o Deeplink abre un enlace o un deep link cuando el usuario pulsa el botón. Introduce la dirección en URL, por ejemplo, una pantalla de la aplicación: myapp://screen.

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ó este 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 el 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ólida, Discontinua, Punteada), el color, el grosor y el ancho en el panel de configuración.

HTML

El bloque HTML te permite pegar HTML personalizado en una plantilla in-app. Úsalo para un formulario personalizado, una encuesta o un video 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 cliente potencial, una encuesta y un video 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 cliente potencial

Este formulario de cliente potencial escribe el nombre y el correo electrónico como tags, envía un evento promo_requested, muestra un mensaje de agradecimiento y luego cierra el 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 el 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>

Video

Este ejemplo incrusta un video 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: a dónde se abre el elemento
• Destino: misma pestaña o una nueva pestaña

En la configuración 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

Redes sociales

El bloque Redes sociales 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 plataformas, luego establece la alineación, el tamaño del icono y el espacio entre iconos.

Temporizador de cuenta regresiva

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

Para configurarlo:

1. En Cuenta regresiva, 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 Configuración → Valores predeterminados de las columnas y ajusta el relleno exterior, el relleno de la columna y el espacio entre columnas.

Productos

Un bloque de Productos muestra una cuadrícula de tarjetas de productos desde una plantilla compartida. Cada tarjeta puede incluir una imagen, título, descripción, precio y un botón de compra. La plantilla se repite para cada producto.

En el panel de configuración, en Fuente, elige de dónde provienen los productos:

• Manual: introduce los productos a mano, o haz clic en Elegir del catálogo… para seleccionar artículos específicos de tu Catálogo de productos por ID. Puedes mezclar ambos en el mismo bloque.
• Regla de catálogo: extrae productos automáticamente por categoría y orden de clasificación, resueltos de nuevo desde el catálogo cuando se muestra el mensaje.
• Carrito: muestra los artículos del carrito abandonado actual de cada usuario. Cómo configurar una campaña de carrito abandonado

Nota

Regla de catálogo y Carrito necesitan Plantillas de contenido en tu plan, y un token de acceso a la API (Configuración → Acceso a la API). Si el selector de Fuente no cambia a una de ellas, o el bloque no renderiza productos, contacta con Soporte o tu gestor de cuenta, o crea un token y vuelve a seleccionar la fuente.

Una vez que hayas elegido una fuente, estas configuraciones controlan cómo se ven la cuadrícula y sus tarjetas:

• Número de productos (o Máximo de productos mostrados para Carrito): cuántas tarjetas mostrar.
• Columnas: 1, 2 o 3 tarjetas por fila.
• Espacio: el espacio entre tarjetas.
• Límite de descripción: el límite de caracteres al que se recorta el texto de la descripción, para que las tarjetas mantengan un tamaño consistente.
• Plantilla de tarjeta: elige un diseño, luego establece el Fondo de la tarjeta, el Radio de esquina de la tarjeta y el Relleno de contenido para cada tarjeta.

Guardar y reutilizar bloques

Guarda un bloque para reutilizarlo en esta u otras plantillas in-app en lugar de reconstruirlo cada vez.

1. Selecciona el bloque en el lienzo.
2. Haz clic en el icono de marcador (Guardar bloque para reutilizar) en la barra de herramientas del bloque y dale un nombre.

Los bloques guardados aparecen en Bloques guardados en la parte inferior de la pestaña Bloques.

• Arrastra un bloque guardado al lienzo, o haz clic en él para añadirlo al final de la plantilla.
• Haz clic en la × en el mosaico de un bloque guardado para eliminarlo.

Mantener las copias sincronizadas

Cuando guardes un bloque, activa Mantener las copias sincronizadas para vincular cada copia insertada a la misma fuente. Edita la fuente una vez, y el cambio se aplica en todas partes donde se use ese bloque.

Una copia sincronizada está bloqueada en el lienzo. No puedes editarla directamente. Selecciona la copia para abrir su configuración:

• Editar bloque sincronizado: desbloquea esta copia para que puedas cambiarla. Aparece un banner en la parte superior. Haz clic en Aplicar a todos para guardar tus cambios en la fuente y en todas las demás copias, o en Cancelar para descartarlos. Solo puedes desbloquear un bloque sincronizado a la vez.
• Actualizar desde la fuente: reemplaza esta copia con la última versión de la fuente.
• Desvincular de la fuente: desvincula esta copia de la fuente para que puedas editarla por tu cuenta.

Nota

Cada vez que abres una plantilla in-app, Pushwoosh comprueba sus copias sincronizadas y actualiza las que no estén al día. Un aviso muestra cuántas se actualizaron. Si la fuente tiene contenido más nuevo, la configuración de la copia muestra una advertencia hasta que vuelvas a abrir la plantilla o hagas clic en Actualizar desde la fuente. Si la fuente fue eliminada, la copia conserva su último contenido y solo puedes Desvincular de la fuente.