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

<Aside type="note">
Antes de empezar, integra el SDK de Pushwoosh para que los mensajes in-app puedan aparecer en tu aplicación. [Más información](/es/product/messaging-channels/in-apps/)
</Aside>

## 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**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="Página de Contenido In-apps con el botón Añadir plantilla en la parte superior derecha de la lista de plantillas"/>

3.  Introduce un nombre para la plantilla.
4.  Elige cómo crear la plantilla:
    *   **Subir ZIP:** [sube un archivo ZIP](/es/developer/guides/content/rich-media-templates-syntax) 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**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="Formulario de nueva plantilla con campo de nombre, opción Subir ZIP y Crear nueva plantilla seleccionada"/>

### 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](#configure-how-the-in-app-looks-on-device).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="Barra superior del editor in-app con el nombre de la plantilla, Deshacer, Rehacer, Ajustes de la in-app y Guardar"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="Lienzo vacío en el editor in-app con el mensaje Comienza con un bloque en el centro" width="480"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="Panel de Capas listando Tarjeta, Imagen, Encabezado, Texto, Temporizador, Botones y Pie de página en un árbol"/>

**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](#configure-template-wide-styling).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="Pestaña de Bloques en el panel derecho con Encabezado, Texto, Botón, Imagen y otros bloques de contenido" width="320"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="Editor in-app vacío con Comienza con un bloque en el lienzo y el panel de Bloques abierto"/>

### 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](#heading-and-text):** títulos y titulares cortos en el mensaje
*   **[Texto](#heading-and-text):** cuerpo del texto y descripciones más largas
*   **[Botón](#button):** una llamada a la acción pulsable
*   **[Imagen](#image):** imágenes de la [Galería multimedia](/es/product/content/media-store/), subidas o desde una URL
*   **[Divisor](#divider):** una línea que separa secciones visualmente
*   **[2 columnas](#columns):** dos columnas iguales una al lado de la otra
*   **[3 columnas](#columns):** tres columnas iguales una al lado de la otra
*   **[4 columnas](#columns):** cuatro columnas iguales una al lado de la otra
*   **[33 / 67](#columns):** dos columnas donde la izquierda ocupa aproximadamente el 33% del ancho y la derecha aproximadamente el 67%
*   **[67 / 33](#columns):** dos columnas donde la izquierda ocupa aproximadamente el 67% del ancho y la derecha aproximadamente el 33%
*   **[Temporizador](#countdown-timer):** una cuenta atrás para ofertas y plazos
*   **[Menú](#menu):** una fila o columna de enlaces, como navegación o contactos
*   **[Social](#social):** iconos que enlazan a tus perfiles sociales
*   **[HTML](#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**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="Bloque de Encabezado seleccionado en el lienzo con la barra de herramientas de formato de texto mostrando opciones de estilo y formato"/>

Las 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 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](/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 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](/es/product/content/media-store/).
*   **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.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="Bloque de Imagen vacío en el lienzo con los ajustes de Imagen mostrando Añadir imagen, URL de la imagen, Texto alternativo, URL del enlace y Espaciado" width="600"/>

### 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`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="Diálogo Insertar/Editar Enlace para un Botón con Tipo de acción Abrir Sitio Web y un campo de URL"/>

#### 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**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="Diálogo Insertar/Editar Enlace para un Botón con Tipo de acción Javascript Personalizado y onClick configurado para closeInApp"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="Plantilla in-app con botones de Yoga y Gimnasio y Javascript Personalizado onClick para el botón de Yoga"/>

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 pulsa **Yoga**, Pushwoosh escribe el tag `interest` en su dispositivo y cierra la 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).

<LinkCard title="Aprende más sobre cómo crear in-apps con JavaScript" href="/developer/guides/messaging-channels/inapp-with-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.

<Aside type="note">
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.
</Aside>

<Tabs>
<TabItem label="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.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="Formulario de leads HTML en el editor in-app con campos de nombre y correo electrónico y un botón Enviadme el código" width="360"/>

<details>
<summary>Código HTML</summary>

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

</details>

</TabItem>
<TabItem label="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.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="Encuesta HTML en el editor in-app preguntando cuándo prefiere el usuario entrenar con cuatro opciones de tiempo" width="360"/>

<details>
<summary>Código HTML</summary>

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

</details>

</TabItem>
<TabItem label="Vídeo">

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

<details>
<summary>Código HTML</summary>

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

</details>

</TabItem>
</Tabs>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="Ajustes del bloque Social con enlaces de TikTok, Instagram y Facebook, además de Alineación, Tamaño del icono y Espacio" width="320"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="Ajustes del bloque Temporizador con fecha y hora de finalización de la cuenta atrás, Etiquetas, Apariencia y opciones de Espaciado"/>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="Pestaña de Ajustes con secciones de Documento, Popup y estilos predeterminados para bloques y columnas" width="320"/>

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.

<Aside type="note">
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**.
</Aside>

## 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](/es/product/personalization/multi-language/).

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.

<Aside type="note">
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.
</Aside>

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

<Aside type="note">
**Ninguna** y **Desvanecer** funcionan actualmente en Android. En iOS, el mensaje aparece y desaparece instantáneamente (la alineación llegará pronto).
</Aside>

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="Modal de Ajustes de la in-app con opciones de posición, animaciones, deslizar para cerrar y botón de cierre"/>

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.

<Aside type="note">
Al guardar, tu plantilla in-app se almacena en **Contenido** → **In-apps**. Desde allí puedes previsualizar, editar y gestionar plantillas. [Más información](/es/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## 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](/es/product/customer-journey/journey-elements/#in-app)
*   [Enviar una notificación push que abre una in-app al hacer clic](/es/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
*   [Mostrar una única in-app a tus usuarios](/es/product/messaging-channels/in-apps/)