Referencia de bloques del editor de in-apps

Referencia para cada bloque que puede agregar 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 lado a lado (2, 3 o 4 columnas iguales, o divisiones de 33/67 y 67/33)
• Temporizador: una cuenta regresiva para ofertas y fechas límite
• Código de barras: un código escaneable Code 128, EAN-13, EAN-8, UPC-A o código QR generado a partir de un valor de personalización, como un cupón
• Menú: una fila o columna de enlaces de navegación o contacto
• Social: iconos que enlazan a sus perfiles sociales
• HTML: HTML personalizado, como un formulario, una encuesta o un video incrustado
• Productos: una cuadrícula de tarjetas de productos de su Catálogo de productos o del carrito abandonado de un usuario

Cómo configurar los bloques del editor

Arrastre un bloque al lienzo desde la pestaña Bloques, o haga clic en él para agregarlo al final. Seleccione 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 configuraciones de Visibilidad y Condición de visualización. Úselas para ocultar un bloque en el teléfono o en el escritorio, o para mostrarlo solo a usuarios específicos. Aprenda más

Encabezado y texto

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

Haga clic en un bloque de Encabezado o Texto para editar su contenido en el lienzo. Seleccione 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 Etiqueta (Tag) del perfil del usuario en el mensaje, para que cada suscriptor vea un texto personalizado. Para agregar una, seleccione el texto, haga clic en Merge Tags en la barra de herramientas y elija una Etiqueta de su cuenta. Aprenda más sobre los mensajes in-app personalizados

Imagen

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

Selecciónelo en el lienzo para abrir la configuración de Imagen en el panel derecho.

• Añadir imagen / Reemplazar imagen: haga clic en Añadir imagen cuando el bloque esté vacío, o en Reemplazar imagen cuando ya haya una imagen establecida. Puede subir un archivo o elegir uno de su Tienda de medios.
• URL de la imagen: pegue un enlace alojado a la imagen.
• Texto alternativo: describa la imagen para la accesibilidad.
• Prompt: el prompt de generación de IA para una imagen que creó con Generar con IA.
• Ancho (px) / Alto (px): fije la imagen a un tamaño en píxeles. Deje un campo vacío para que se dimensione automáticamente. Debajo de estos campos, una pista muestra el tamaño en que se renderiza la imagen y el tamaño a subir: 2× el tamaño renderizado, para que la imagen se mantenga nítida en las pantallas de los teléfonos. Si el archivo subido es más pequeño que el tamaño renderizado en cualquiera de los ejes, una advertencia le indicará que se ampliará y se verá pixelada.
• Radio de esquina (px): redondee las esquinas de la imagen.
• Alineación: izquierda, centro o derecha.

En Enlace, establezca 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, active Relleno para agregar espacio alrededor de la imagen. Use Todos los lados para el mismo relleno en cada lado, o active Más opciones para establecer cada lado por separado.

Tamaños de imagen recomendados

Suba una imagen al doble del tamaño que muestra la pista debajo de Ancho (px) / Alto (px) para ese bloque. Ese es el número que debe verificar, ya que refleja su propia configuración de Ancho/Alto y recorte. Cuando aún no ha configurado un bloque, use estos anchos de ranura comunes como punto de partida:

Dónde se ubica la imagen	Se renderiza a	Subir al menos
Imagen de ancho completo en el popup predeterminado	hasta 600 px de ancho	1200 px de ancho
Vista previa en teléfono	360–430 px de ancho, dependiendo del dispositivo	hasta 860 px de ancho
Vista previa en tableta/escritorio	768 px de ancho	1536 px de ancho

La relación de aspecto depende de usted. El diseño es responsivo, por lo que la altura sigue cualquier Alto (px) o recorte que establezca. Consulte Tamaño del documento y del popup para cambiar el ancho predeterminado del popup.

Nota

Esta tabla cubre los bloques de Imagen en el editor integrado. Las in-apps nativas (modal, pantalla completa, historias, hoja, carrusel, banner, video) aún no tienen un tamaño de portada recomendado.

Video

Un bloque de Video agrega 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 o el navegador de YouTube o Vimeo.

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

• URL del video: pegue un enlace de YouTube o Vimeo. El editor obtiene una miniatura automáticamente.
• Texto alternativo: describa el video para la accesibilidad.
• URL de la miniatura: conserve la miniatura obtenida automáticamente, o haga clic en Añadir miniatura / Reemplazar miniatura para elegir una de la Tienda de medios, o pegue un enlace alojado directamente.
• Superposición del botón de reproducción: activado por defecto. Desactívelo para mostrar la miniatura simple sin la superposición de ▶.
• Ancho (px), Radio de esquina (px) y Alineación: controlan cómo se ve la miniatura y dónde se ubica 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 tenga que colocar y alinear cuatro bloques separados a mano.

• Diseño: elija en qué lado se ubica la imagen en relación con el contenido, o active Ajustar texto alrededor de la imagen.
• Imagen: agregue o reemplace la imagen, establezca el texto alternativo, edite el Prompt de generación de IA, agregue Relleno y establezca el Radio de esquina (px).
• Tamaño y ajuste: establezca 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 haya elegido.
• Enlace: haga que toda la tarjeta abra una URL al ser pulsada.

Edite el encabezado, el texto y el botón de la tarjeta de la misma manera que edita 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. Úselo para abrir una URL, ejecutar JavaScript personalizado o cerrar el mensaje.

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

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

1. Haga clic en el icono de enlace en la barra de herramientas para abrir Insertar/Editar enlace.
2. Elija un Tipo de acción: Abrir sitio web, URL o Deeplink, o Javascript personalizado.
3. Rellene los campos para esa acción (ver más abajo).
4. Haga clic en Guardar.

Abrir sitio web

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

URL o Deeplink

URL o Deeplink abre un enlace o un enlace profundo cuando el usuario pulsa el botón. Ingrese 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. Ingrese el código en el campo onClick.

Úselo 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 etiquetas ni eventos. Usted decide 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ítalo para mantener el mensaje abierto después del toque.
• pushwoosh.sendTags({...}): guarda valores como etiquetas de dispositivo para campañas posteriores.
• pushwoosh.postEvent(...): envía un evento personalizado, por ejemplo, para iniciar un Customer Journey.
• pushwoosh.getTags(...): lee las etiquetas actuales. Útil en HTML personalizado para cambiar lo que muestra el mensaje.
• pushwoosh.getCustomData(): lee los datos personalizados pasados desde el push que abrió este in-app.
• pushwoosh.registerForPushNotifications(): activa el diálogo de permiso de notificaciones push nativo de la plataforma, por ejemplo, desde una in-app de pre-permiso.

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

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

3. Establezca el Tipo de acción en Javascript personalizado para cada botón.
4. Para el botón de Yoga, pegue esto en onClick:

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

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

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

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

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

Divisor

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

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

HTML

El bloque HTML le permite pegar HTML personalizado en una plantilla in-app. Úselo para un formulario personalizado, una encuesta o un video incrustado cuando no haya un bloque de Formulario dedicado para mensajes in-app.

Ejemplos

Los ejemplos a continuación muestran formas comunes de usar el bloque HTML en una plantilla in-app: un formulario de clientes potenciales, una encuesta y un video incrustado.

Nota

Los ejemplos de formulario y encuesta guardan etiquetas de dispositivo y envían eventos a través de Pushwoosh. Cree los eventos personalizados en su cuenta antes de usarlos en las campañas.

Lead form

Este formulario de clientes potenciales escribe el nombre y el correo electrónico como etiquetas, 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>

Survey

Esta encuesta guarda la hora de entrenamiento seleccionada como una etiqueta, 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>

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. Úselo para una barra de navegación o una lista de contactos de la empresa.

Para cada elemento del menú, configure:

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

En la configuración del bloque, también puede 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 sus perfiles. Úselo para enviar a los usuarios a Facebook, Instagram, X y otras plataformas desde el mensaje in-app.

Agregue entradas de plataforma, luego establezca la alineación, el tamaño del icono y el espacio entre los iconos.

Temporizador de cuenta regresiva

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

Para configurarlo:

1. En Cuenta regresiva, establezca la Fecha de finalización y la Hora de finalización, luego elija la Zona horaria y el Idioma para las etiquetas del temporizador.
2. Active Etiquetas para mostrar leyendas de “días / horas / minutos / segundos” debajo de los dígitos, o desactívelo para solo números.
3. En Apariencia, establezca 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. Ajuste el Espaciado (relleno) según sea necesario.

Código de barras

El bloque Código de barras renderiza un código de barras o código QR escaneable a partir de un valor de personalización, más comúnmente un cupón.

Para configurarlo:

1. En Código, mantenga la etiqueta de dispositivo {Coupon|String|}, o haga clic en Etiqueta de fusión y elija otra etiqueta de dispositivo que almacene el código de cada destinatario. Las in-apps no evalúan Liquid. El SDK rellena la etiqueta en el dispositivo antes de que se muestre la in-app. Esto difiere del bloque de Código de barras de correo electrónico, que utiliza {{voucher}}.

2. Elija la Simbología:
   • QR: un código 2D cuadrado que los teléfonos pueden escanear. Acepta cualquier texto, incluidos códigos alfanuméricos como WELCOME2025-A1
   • Code 128: un código de barras lineal para cualquier texto, incluidos los mismos códigos alfanuméricos
   • EAN-13: el código de barras minorista común en Europa y muchas otras regiones. Solo dígitos, 12–13 caracteres
   • EAN-8: un código de barras minorista más corto para empaques pequeños. Solo dígitos, 7–8 caracteres
   • UPC-A: el código de barras minorista común en América del Norte. Solo dígitos, 11–12 caracteres
3. Si eligió QR, establezca la Corrección de errores. Esto agrega datos de repuesto para que el código aún se pueda escanear cuando parte de él está cubierto, desgastado o es difícil de ver. Elija L, M, Q o H (predeterminado M). Los niveles más altos sobreviven a más daños pero hacen que el patrón sea más denso, lo que puede ser más difícil de leer en tamaños pequeños. Omita este campo para otras simbologías.
4. Opcionalmente, active Imprimir el código en dígitos para mostrar el valor debajo del código.

5. En Apariencia, establezca el Color de las barras más oscuro que el Fondo — la mayoría de los escáneres no pueden leer barras claras sobre un fondo oscuro. Establezca el Ancho (px) y el Alto (px) en al menos 600×200 para que el código se mantenga escaneable en el rango típico de la cámara del teléfono. Deje la Zona de silencio, módulos en Automático para el margen predeterminado.

Nota

En el lienzo, el bloque muestra un código de barras de muestra, no el código real del destinatario. Una etiqueta de dispositivo como {Coupon|String|} solo se rellena en el dispositivo, por lo que la Vista previa tampoco puede construir la imagen real. Verifique el código de barras en un dispositivo real antes de publicar. Use EAN-13, EAN-8 o UPC-A solo para un valor de etiqueta que sea solo de dígitos, con la longitud que cada uno espera. Para códigos alfanuméricos como WELCOME2025-A1, use Code 128 o QR en su lugar.

Columnas

Las Columnas dividen el lienzo en secciones lado a lado para que pueda colocar contenido uno al lado del otro en una sola fila.

Arrastre 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 agregue contenido a cada columna. Para cambiar el espaciado de todas las columnas en la plantilla, abra Configuración → Valores predeterminados de las columnas y ajuste 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 de 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, elija de dónde provienen los productos:

• Manual: ingrese los productos a mano, o haga clic en Elegir del catálogo… para seleccionar artículos específicos de su Catálogo de productos por ID. Puede mezclar ambos en el mismo bloque.
• Regla de catálogo: extraiga productos automáticamente por categoría y orden de clasificación, resueltos nuevamente desde el catálogo cuando se muestra el mensaje.
• Carrito: muestre 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 su plan, y un token de acceso a la API (Configuración → Acceso a la API). Si el selector de Fuente no cambia a uno de ellos, o el bloque no renderiza productos, contacte al Soporte o a su gerente de cuenta, o cree un token y vuelva a seleccionar la fuente.

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

• Número de productos (o Máx. 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: elija un diseño, luego establezca el Fondo de la tarjeta, el Radio de esquina de la tarjeta y el Relleno del contenido para cada tarjeta.

Guardar y reutilizar bloques

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

1. Seleccione el bloque en el lienzo.
2. Haga clic en el icono de marcador (Guardar bloque para reutilizar) en la barra de herramientas del bloque y asígnele un nombre.

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

• Arrastre un bloque guardado al lienzo, o haga clic en él para agregarlo al final de la plantilla.
• Haga clic en la × en el mosaico de un bloque guardado para eliminarlo.

Mantener las copias sincronizadas

Cuando guarde un bloque, active Mantener las copias sincronizadas para vincular cada copia insertada a la misma fuente. Edite la fuente una vez, y el cambio se aplicará en todos los lugares donde se use ese bloque.

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

• Editar bloque sincronizado: desbloquee esta copia para poder cambiarla. Aparece un banner en la parte superior. Haga clic en Aplicar a todos para guardar sus cambios en la fuente y en todas las demás copias, o en Cancelar para descartarlos. Solo puede desbloquear un bloque sincronizado a la vez.
• Actualizar desde la fuente: reemplace esta copia con la última versión de la fuente.
• Desvincular de la fuente: desvincule esta copia de la fuente para poder editarla por su cuenta.

Nota

Cada vez que abre una plantilla in-app, Pushwoosh verifica sus copias sincronizadas y actualiza las que están desactualizadas. Una notificación muestra cuántas se actualizaron. Si la fuente tiene contenido más nuevo, la configuración de la copia muestra una advertencia hasta que vuelva a abrir la plantilla o haga clic en Actualizar desde la fuente. Si la fuente fue eliminada, la copia conserva su último contenido y solo puede Desvincular de la fuente.