Los Merge Tags son marcadores de posición que insertan un valor de [Tag](/es/product/audience-data-and-segmentation/user-data-tags/tags/) 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 mensajes in-app personalizados](/es/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)
### 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 [Galería de medios](/es/product/content/media-store/).
* **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 toque 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 que se puede tocar. El mensaje muestra una imagen fija con una superposición de ▶. Al tocarla, 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 [Galería de medios](/es/product/content/media-store/), 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 cómo se ve 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 cuando se toque.
Edita el encabezado, el texto y el botón de la tarjeta de la misma manera que editas los bloques independientes de [Encabezado, Texto](#encabezado-y-texto) y [Botón](#botón).
### Botón
Un **Botón** es una llamada a la acción que se puede tocar 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 toca 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 toca 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 toca 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 toca 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 los tags ni los 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](/es/product/audience-data-and-segmentation/user-data-tags/tags/) para campañas posteriores.
* `pushwoosh.postEvent(...)`: envía un [evento personalizado](/es/product/audience-data-and-segmentation/events/custom-events/), 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 el 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**:
```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```
5. Para el botón de **Gimnasio**, pega esto en **onClick**:
```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```
Cuando el usuario toca **Yoga**, Pushwoosh escribe el tag `interest` en su dispositivo y cierra el in-app. Luego puedes dirigirte a ese usuario en un [segmento](/es/product/audience-data-and-segmentation/segmentation/) o [Customer Journey](/es/product/customer-journey/journey-elements/#in-app).
Deja tu nombre y correo electrónico. Te enviaremos el código promocional de inmediato.
Ayúdanos a programar las mejores clases para ti
### 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](/es/product/content/product-catalog/) 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](/es/product/how-to-guides/lifecycle-marketing-campaigns/how-to-set-up-an-abandoned-cart-campaign/)
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 del 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 la miniatura 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 todos los lugares 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.