# 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.
## 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 en el editor integrado, subir un ZIP HTML personalizado o construir una plantilla de rich media nativa. 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:
* **Crear nueva plantilla:** construye una plantilla en el editor integrado.
* **Subir ZIP:** [sube un archivo ZIP](/es/developer/guides/content/rich-media-templates-syntax) con tu mensaje in-app en HTML.
* **Crear rich media nativo:** construye un in-app nativo renderizado por el SDK. [Más información](/es/product/content/in-apps/create-native-in-app-messages/)
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
La barra superior es donde gestionas la plantilla en su conjunto: su nombre, historial de deshacer, estado de guardado, cómo se ve en el dispositivo (**Ajustes de la in-app**), idiomas (**Traducción automática** y el selector de idioma), y el ancho de la vista previa en teléfono o escritorio. Consulta [Configurar el aspecto de la in-app en el dispositivo](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) y [Localizar la plantilla](#localizar-la-plantilla).
Abre el menú **⋮** en la barra superior para más acciones:
#### Vista previa
**Vista previa** te permite probar el mensaje antes de guardarlo: pulsa botones, navega por flujos de varias pantallas y comprueba el diseño en teléfono o escritorio.
Qué funciona en la vista previa:
* Los botones y los flujos de varias pantallas se ejecutan de verdad.
* Los enlaces y los deep links se informan, no se abren.
* Las llamadas al SDK y las estadísticas de apertura/clic permanecen desactivadas.
* El idioma coincide con el selector de idioma. Las etiquetas de fusión (Merge Tags) permanecen como marcadores de posición.
En la cabecera de la vista previa, cambia entre teléfono y escritorio para ver ambos diseños. Haz clic en **Reiniciar** para mostrar el mensaje desde el principio de nuevo. Para salir de la vista previa, presiona Esc o haz clic fuera del panel.
#### Brand book
* **Brand book:** abre el [Brand book](/es/product/content/brand-book/) de tu cuenta.
* **Aplicar estilos del brand book:** rediseña la plantilla para que coincida con tu Brand book (una vez que lo hayas configurado).
* **Restablecer estilos personalizados:** elimina las sobreescrituras de estilo en la plantilla y vuelve a los valores predeterminados.
### Lienzo
Edita el mensaje en el lienzo: haz clic en textos, imágenes y botones para cambiarlos. Usa el selector de teléfono/escritorio en la barra superior para comprobar cómo se ve el diseño en cada ancho. El selector solo cambia la vista previa, no el diseño en sí.
### 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 para seleccionar un bloque anidado (por ejemplo, un botón dentro de un grupo) o arrastra las filas para reordenar el contenido.
### Panel derecho
Cambia entre tres pestañas:
* **Bloques:** añade contenido al mensaje. Consulta [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Ajustes:** aplica estilos a toda la plantilla a la vez. Consulta [Configurar los ajustes de la plantilla in-app](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA:** chatea con el asistente de IA para generar o editar contenido a partir de una indicación.
## Añadir bloques de contenido
1. Abre la pestaña **Bloques** en el panel derecho.
2. Arrastra un bloque al lienzo, o haz clic en un bloque para añadirlo al final de la plantilla.
3. Sigue añadiendo bloques hasta que el diseño esté listo.
Cada tipo de bloque tiene un propósito diferente en el mensaje:
* **[Encabezado](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** títulos y titulares cortos
* **[Texto](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** cuerpo del texto y descripciones más largas
* **[Botón](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** una llamada a la acción pulsable
* **[Imagen](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** imágenes de la [Tienda de medios](/es/product/content/media-store/), subidas o desde una URL
* **[Vídeo](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** una miniatura de vídeo pulsable que abre un vídeo de YouTube o Vimeo
* **[Tarjeta](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** una imagen con encabezado, texto y botón en un solo diseño
* **[Divisor](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** una línea que separa secciones
* **[Columnas](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** diseños de lado a lado (2, 3 o 4 columnas iguales, o divisiones de 33/67 y 67/33)
* **[Temporizador](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** una cuenta atrás para ofertas y plazos
* **[Menú](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** una fila o columna de enlaces de navegación o contacto
* **[Social](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** iconos que enlazan a tus perfiles sociales
* **[HTML](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** HTML personalizado, como un formulario, una encuesta o un vídeo incrustado
* **[Productos](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** una cuadrícula de tarjetas de productos de tu [Catálogo de productos](/es/product/content/product-catalog/) o del carrito abandonado de un usuario
Consulta la [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) para ver los ajustes de cada bloque, y [cómo guardar y reutilizar bloques](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Mostrar bloques a usuarios específicos
No todos los usuarios necesitan ver los mismos bloques. Establece una **condición de visualización** en un bloque para que se muestre u oculte según las [Etiquetas (Tags)](/es/product/audience-data-and-segmentation/user-data-tags/tags/) del usuario. Sigues enviando una sola plantilla, pero cada persona solo ve las partes que se aplican a ella.
Selecciona el bloque en el lienzo, abre **Condición de visualización** en el panel derecho y activa **Mostrar este bloque condicionalmente**. [Más información](/es/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localizar la plantilla
Una plantilla multilingüe almacena el texto localizado para cada idioma en un único diseño in-app. Usa el selector de idioma en la barra superior para añadir idiomas y editar el contenido por idioma. Haz clic en **Traducción automática** para generar traducciones. Para saber cómo funciona la mensajería multilingüe en todos los canales, consulta [Mensajería multilingüe](/es/product/personalization/multi-language/).
## Configurar los ajustes de la plantilla
Usa dos lugares para dar estilo y posicionar el mensaje:
* Pestaña **Ajustes** (panel derecho): tamaño del documento, colores, tipografía y estilos predeterminados para los bloques.
* **Ajustes de la in-app** (barra superior): posición en la pantalla, animaciones y el botón de cierre.
[Más información](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## 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.
3. Introduce un nombre para la plantilla.
4. Elige cómo crear la plantilla:
* **Crear nueva plantilla:** construye una plantilla en el editor integrado.
* **Subir ZIP:** [sube un archivo ZIP](/es/developer/guides/content/rich-media-templates-syntax) con tu mensaje in-app en HTML.
* **Crear rich media nativo:** construye un in-app nativo renderizado por el SDK. [Más información](/es/product/content/in-apps/create-native-in-app-messages/)
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
La barra superior es donde gestionas la plantilla en su conjunto: su nombre, historial de deshacer, estado de guardado, cómo se ve en el dispositivo (**Ajustes de la in-app**), idiomas (**Traducción automática** y el selector de idioma), y el ancho de la vista previa en teléfono o escritorio. Consulta [Configurar el aspecto de la in-app en el dispositivo](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) y [Localizar la plantilla](#localizar-la-plantilla).
Abre el menú **⋮** en la barra superior para más acciones:
#### Vista previa
**Vista previa** te permite probar el mensaje antes de guardarlo: pulsa botones, navega por flujos de varias pantallas y comprueba el diseño en teléfono o escritorio.
Qué funciona en la vista previa:
* Los botones y los flujos de varias pantallas se ejecutan de verdad.
* Los enlaces y los deep links se informan, no se abren.
* Las llamadas al SDK y las estadísticas de apertura/clic permanecen desactivadas.
* El idioma coincide con el selector de idioma. Las etiquetas de fusión (Merge Tags) permanecen como marcadores de posición.
En la cabecera de la vista previa, cambia entre teléfono y escritorio para ver ambos diseños. Haz clic en **Reiniciar** para mostrar el mensaje desde el principio de nuevo. Para salir de la vista previa, presiona Esc o haz clic fuera del panel.
#### Brand book
* **Brand book:** abre el [Brand book](/es/product/content/brand-book/) de tu cuenta.
* **Aplicar estilos del brand book:** rediseña la plantilla para que coincida con tu Brand book (una vez que lo hayas configurado).
* **Restablecer estilos personalizados:** elimina las sobreescrituras de estilo en la plantilla y vuelve a los valores predeterminados.
### Lienzo
Edita el mensaje en el lienzo: haz clic en textos, imágenes y botones para cambiarlos. Usa el selector de teléfono/escritorio en la barra superior para comprobar cómo se ve el diseño en cada ancho. El selector solo cambia la vista previa, no el diseño en sí.
### 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 para seleccionar un bloque anidado (por ejemplo, un botón dentro de un grupo) o arrastra las filas para reordenar el contenido.
### Panel derecho
Cambia entre tres pestañas:
* **Bloques:** añade contenido al mensaje. Consulta [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Ajustes:** aplica estilos a toda la plantilla a la vez. Consulta [Configurar los ajustes de la plantilla in-app](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA:** chatea con el asistente de IA para generar o editar contenido a partir de una indicación.
## Añadir bloques de contenido
1. Abre la pestaña **Bloques** en el panel derecho.
2. Arrastra un bloque al lienzo, o haz clic en un bloque para añadirlo al final de la plantilla.
3. Sigue añadiendo bloques hasta que el diseño esté listo.
Cada tipo de bloque tiene un propósito diferente en el mensaje:
* **[Encabezado](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** títulos y titulares cortos
* **[Texto](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** cuerpo del texto y descripciones más largas
* **[Botón](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** una llamada a la acción pulsable
* **[Imagen](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** imágenes de la [Tienda de medios](/es/product/content/media-store/), subidas o desde una URL
* **[Vídeo](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** una miniatura de vídeo pulsable que abre un vídeo de YouTube o Vimeo
* **[Tarjeta](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** una imagen con encabezado, texto y botón en un solo diseño
* **[Divisor](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** una línea que separa secciones
* **[Columnas](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** diseños de lado a lado (2, 3 o 4 columnas iguales, o divisiones de 33/67 y 67/33)
* **[Temporizador](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** una cuenta atrás para ofertas y plazos
* **[Menú](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** una fila o columna de enlaces de navegación o contacto
* **[Social](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** iconos que enlazan a tus perfiles sociales
* **[HTML](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** HTML personalizado, como un formulario, una encuesta o un vídeo incrustado
* **[Productos](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** una cuadrícula de tarjetas de productos de tu [Catálogo de productos](/es/product/content/product-catalog/) o del carrito abandonado de un usuario
Consulta la [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) para ver los ajustes de cada bloque, y [cómo guardar y reutilizar bloques](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Mostrar bloques a usuarios específicos
No todos los usuarios necesitan ver los mismos bloques. Establece una **condición de visualización** en un bloque para que se muestre u oculte según las [Etiquetas (Tags)](/es/product/audience-data-and-segmentation/user-data-tags/tags/) del usuario. Sigues enviando una sola plantilla, pero cada persona solo ve las partes que se aplican a ella.
Selecciona el bloque en el lienzo, abre **Condición de visualización** en el panel derecho y activa **Mostrar este bloque condicionalmente**. [Más información](/es/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localizar la plantilla
Una plantilla multilingüe almacena el texto localizado para cada idioma en un único diseño in-app. Usa el selector de idioma en la barra superior para añadir idiomas y editar el contenido por idioma. Haz clic en **Traducción automática** para generar traducciones. Para saber cómo funciona la mensajería multilingüe en todos los canales, consulta [Mensajería multilingüe](/es/product/personalization/multi-language/).
## Configurar los ajustes de la plantilla
Usa dos lugares para dar estilo y posicionar el mensaje:
* Pestaña **Ajustes** (panel derecho): tamaño del documento, colores, tipografía y estilos predeterminados para los bloques.
* **Ajustes de la in-app** (barra superior): posición en la pantalla, animaciones y el botón de cierre.
[Más información](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## 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.