# Crear mensajes in-app en el editor integrado
Cree una plantilla de mensaje in-app en el editor integrado de Pushwoosh sin escribir código. Obtendrá un diseño reutilizable con bloques de contenido, imágenes, botones y texto personalizado que puede 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 se crea una vez y luego se muestra a los usuarios en las campañas. Puede crear una en el editor integrado, subir un ZIP HTML personalizado o crear una plantilla de rich media nativa. Este artículo cubre la creación de una plantilla desde cero en el editor integrado. Siga los mismos pasos para personalizar una plantilla existente.
1. Vaya a **Contenido** → **In-apps**.
2. Haga clic en **Crear in-app**. El editor integrado se abre directamente.
Haga clic en la flecha junto a **Crear in-app** para crear una plantilla de otra manera:
* **Subir ZIP:** [suba un archivo ZIP](/es/developer/guides/content/rich-media-templates-syntax) con su mensaje in-app en HTML.
* **In-app nativo:** construya un mensaje renderizado por el SDK usando diseños ya hechos. [Más información](/es/product/content/in-apps/create-native-in-app-messages/)
## Explore 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 se gestiona la plantilla en su conjunto: su nombre, el historial de deshacer, el estado de guardado, cómo se ve en el dispositivo (**Ajustes de in-app**), los idiomas (**Autotraducir** y el selector de idioma), el ancho de la vista previa en teléfono o escritorio (el teléfono ofrece **360**, **390**, **393** o **430 px**, que coinciden con los anchos de dispositivo comunes), y un conmutador de lienzo claro/oscuro (**icono de sol/luna**). Consulte [Configurar cómo se ve el 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](#localize-the-template).
Abra el menú **⋮** en la barra superior para más acciones:
#### Vista previa
**Vista previa** le permite probar el mensaje antes de guardarlo: pulse botones, muévase por flujos de varias pantallas y compruebe el diseño en el teléfono o el escritorio.
Lo que 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 combinación (Merge Tags) permanecen como marcadores de posición.
En el encabezado de la vista previa, cambie entre teléfono y escritorio, y entre claro y oscuro, para ver todos los diseños resultantes. Haga clic en **Reiniciar** para mostrar el mensaje desde el principio de nuevo. Para salir de la vista previa, pulse Esc o haga clic fuera del panel.
#### Comprobar
**Comprobar** abre la **Comprobación inteligente** y escanea la plantilla en busca de problemas comunes.
La comprobación inteligente busca:
* Botones, elementos de menú y enlaces de imagen sin una URL, o con una URL que no sea una dirección http(s), `mailto:`, `tel:` o un deep link (por ejemplo, `myapp://promo`)
* Bloques de marcador de posición de IA sin terminar
* Espacios de imagen o vídeo vacíos y texto alternativo faltante
* Tarjetas de producto con un enlace faltante o no válido
* Contraste de texto que no cumple con WCAG AA
* Contenido sin traducir
* Un temporizador de cuenta atrás cuya fecha de finalización ya ha pasado
* Una [condición de visualización](#show-blocks-to-specific-users) con una regla rota o vacía, una rama que perdió el bloque al que se encadena, o una condición que no se aplicará porque el contenido dinámico está deshabilitado para la cuenta
Haga clic en un hallazgo para saltar directamente al elemento afectado en el lienzo. Si no hay nada mal, el panel muestra **Todas las comprobaciones superadas — el contenido parece listo para guardar.**
#### Manual de marca
* **Manual de marca:** abra el [Manual de marca](/es/product/content/brand-book/) de esta aplicación.
* **Aplicar estilos del manual de marca:** rediseñe la plantilla para que coincida con su Manual de marca (una vez que haya configurado uno).
* **Restablecer estilos personalizados:** elimine las anulaciones de estilo en la plantilla y vuelva a los valores predeterminados.
#### Descargar .zip
**Descargar .zip** guarda la plantilla como un archivo ZIP. Descarga la última versión guardada, así que guarde sus cambios primero. El elemento del menú aparece solo después de que la plantilla se haya guardado al menos una vez; las plantillas nuevas y no guardadas no lo muestran.
### Lienzo
Edite el mensaje en el lienzo: haga clic en texto, imágenes y botones para cambiarlos. Use el conmutador de teléfono/escritorio en la barra superior para comprobar cómo se ve el diseño en cada ancho. El conmutador solo cambia la vista previa, no el diseño en sí.
Use el **icono de sol/luna** en la barra superior para seguir editando el lienzo mientras se renderiza en claro u oscuro. Funciona incluso sin una **Variante de modo oscuro** configurada — los colores oscuros se derivan automáticamente hasta que establezca los suyos. Esta es una vista de edición en vivo, no el panel de **Vista previa** de solo lectura.
### Capas
El panel de Capas lista cada bloque de su plantilla como un árbol, en el mismo orden que en el lienzo. Ábralo desde el borde izquierdo para seleccionar un bloque anidado (por ejemplo, un botón dentro de un grupo) o arrastre las filas para reordenar el contenido.
### Panel derecho
Cambie entre tres pestañas:
* **Bloques:** añada contenido al mensaje. Consulte [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Ajustes:** aplique estilos a toda la plantilla a la vez. Consulte [Configurar los ajustes de la plantilla in-app](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA:** chatee con el asistente de IA para generar o editar contenido a partir de una indicación.
## Añadir bloques de contenido
1. Abra la pestaña **Bloques** en el panel derecho.
2. Arrastre un bloque al lienzo, o haga clic en un bloque para añadirlo al final de la plantilla.
3. Siga 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 del [Almacenamiento 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 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 sus 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 su [Catálogo de productos](/es/product/content/product-catalog/) o del carrito abandonado de un usuario
Consulte la [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) para 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. Establezca una **condición de visualización** en un bloque para que se muestre u oculte según las [Tags](/es/product/audience-data-and-segmentation/user-data-tags/tags/) del usuario. Seguirá enviando una sola plantilla, pero cada persona solo verá las partes que le correspondan.
Seleccione el bloque en el lienzo, abra **Condición de visualización** en el panel derecho y active **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 copias localizadas para cada idioma en un único diseño in-app. Para saber cómo funciona la mensajería multilingüe en todos los canales, consulte [Mensajería multilingüe](/es/product/personalization/multi-language/).
Para configurar contenido multilingüe:
1. Haga clic en el selector de idioma en la barra superior para abrir la lista de idiomas.
2. Seleccione los idiomas que desea añadir y luego haga clic en **Aplicar**.
3. Use el selector de idioma para moverse entre idiomas y editar el contenido de cada bloque para el idioma seleccionado.
4. Haga clic en **Autotraducir** para rellenar las traducciones faltantes automáticamente — revise el texto generado por IA antes de guardar.
## Configurar los ajustes de la plantilla
Use 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 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
Haga clic en **Guardar** en la barra superior para guardar sus cambios. Use **Deshacer**/**Rehacer** en la barra superior para retroceder y avanzar en sus ediciones.
## Actualizar traducciones desde sus propios sistemas
Su equipo de desarrollo puede actualizar las traducciones de una plantilla guardada a través de la [API de Pushwoosh](/es/developer/api-reference/) o un cliente de IA conectado al [servidor ManyMoney AI MCP](/es/product/pushwoosh-ai/manymoney-mcp-server/), sin reenviar el HTML o el diseño de la plantilla.
Esto solo funciona en una plantilla que ya se ha guardado una vez (consulte [Guardar la plantilla](#save-the-template) más arriba). Una plantilla sin contenido guardado no tiene nada en lo que fusionar las traducciones.
La actualización fusiona solo los idiomas y las claves de texto enviadas en el campo `localization`. Todos los demás idiomas, claves y el diseño visual permanecen como se guardaron.
- Enviar una clave sin valor elimina esa clave de su idioma.
- Enviar un idioma sin valor elimina todo el idioma de la plantilla.
- El idioma predeterminado puede cambiar a cualquier idioma que quede en la plantilla después de la actualización.
- La actualización se rechaza si eliminaría todos los idiomas de la plantilla, o si el idioma predeterminado solicitado no es uno de los idiomas que quedan después de la fusión.
Para esto, necesitará la ayuda de su equipo de desarrollo.
Haga clic en la flecha junto a **Crear in-app** para crear una plantilla de otra manera:
* **Subir ZIP:** [suba un archivo ZIP](/es/developer/guides/content/rich-media-templates-syntax) con su mensaje in-app en HTML.
* **In-app nativo:** construya un mensaje renderizado por el SDK usando diseños ya hechos. [Más información](/es/product/content/in-apps/create-native-in-app-messages/)
## Explore 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 se gestiona la plantilla en su conjunto: su nombre, el historial de deshacer, el estado de guardado, cómo se ve en el dispositivo (**Ajustes de in-app**), los idiomas (**Autotraducir** y el selector de idioma), el ancho de la vista previa en teléfono o escritorio (el teléfono ofrece **360**, **390**, **393** o **430 px**, que coinciden con los anchos de dispositivo comunes), y un conmutador de lienzo claro/oscuro (**icono de sol/luna**). Consulte [Configurar cómo se ve el 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](#localize-the-template).
Abra el menú **⋮** en la barra superior para más acciones:
#### Vista previa
**Vista previa** le permite probar el mensaje antes de guardarlo: pulse botones, muévase por flujos de varias pantallas y compruebe el diseño en el teléfono o el escritorio.
Lo que 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 combinación (Merge Tags) permanecen como marcadores de posición.
En el encabezado de la vista previa, cambie entre teléfono y escritorio, y entre claro y oscuro, para ver todos los diseños resultantes. Haga clic en **Reiniciar** para mostrar el mensaje desde el principio de nuevo. Para salir de la vista previa, pulse Esc o haga clic fuera del panel.
#### Comprobar
**Comprobar** abre la **Comprobación inteligente** y escanea la plantilla en busca de problemas comunes.
La comprobación inteligente busca:
* Botones, elementos de menú y enlaces de imagen sin una URL, o con una URL que no sea una dirección http(s), `mailto:`, `tel:` o un deep link (por ejemplo, `myapp://promo`)
* Bloques de marcador de posición de IA sin terminar
* Espacios de imagen o vídeo vacíos y texto alternativo faltante
* Tarjetas de producto con un enlace faltante o no válido
* Contraste de texto que no cumple con WCAG AA
* Contenido sin traducir
* Un temporizador de cuenta atrás cuya fecha de finalización ya ha pasado
* Una [condición de visualización](#show-blocks-to-specific-users) con una regla rota o vacía, una rama que perdió el bloque al que se encadena, o una condición que no se aplicará porque el contenido dinámico está deshabilitado para la cuenta
Haga clic en un hallazgo para saltar directamente al elemento afectado en el lienzo. Si no hay nada mal, el panel muestra **Todas las comprobaciones superadas — el contenido parece listo para guardar.**
#### Manual de marca
* **Manual de marca:** abra el [Manual de marca](/es/product/content/brand-book/) de esta aplicación.
* **Aplicar estilos del manual de marca:** rediseñe la plantilla para que coincida con su Manual de marca (una vez que haya configurado uno).
* **Restablecer estilos personalizados:** elimine las anulaciones de estilo en la plantilla y vuelva a los valores predeterminados.
#### Descargar .zip
**Descargar .zip** guarda la plantilla como un archivo ZIP. Descarga la última versión guardada, así que guarde sus cambios primero. El elemento del menú aparece solo después de que la plantilla se haya guardado al menos una vez; las plantillas nuevas y no guardadas no lo muestran.
### Lienzo
Edite el mensaje en el lienzo: haga clic en texto, imágenes y botones para cambiarlos. Use el conmutador de teléfono/escritorio en la barra superior para comprobar cómo se ve el diseño en cada ancho. El conmutador solo cambia la vista previa, no el diseño en sí.
Use el **icono de sol/luna** en la barra superior para seguir editando el lienzo mientras se renderiza en claro u oscuro. Funciona incluso sin una **Variante de modo oscuro** configurada — los colores oscuros se derivan automáticamente hasta que establezca los suyos. Esta es una vista de edición en vivo, no el panel de **Vista previa** de solo lectura.
### Capas
El panel de Capas lista cada bloque de su plantilla como un árbol, en el mismo orden que en el lienzo. Ábralo desde el borde izquierdo para seleccionar un bloque anidado (por ejemplo, un botón dentro de un grupo) o arrastre las filas para reordenar el contenido.
### Panel derecho
Cambie entre tres pestañas:
* **Bloques:** añada contenido al mensaje. Consulte [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Ajustes:** aplique estilos a toda la plantilla a la vez. Consulte [Configurar los ajustes de la plantilla in-app](/es/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA:** chatee con el asistente de IA para generar o editar contenido a partir de una indicación.
## Añadir bloques de contenido
1. Abra la pestaña **Bloques** en el panel derecho.
2. Arrastre un bloque al lienzo, o haga clic en un bloque para añadirlo al final de la plantilla.
3. Siga 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 del [Almacenamiento 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 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 sus 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 su [Catálogo de productos](/es/product/content/product-catalog/) o del carrito abandonado de un usuario
Consulte la [Referencia de bloques del editor in-app](/es/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) para 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. Establezca una **condición de visualización** en un bloque para que se muestre u oculte según las [Tags](/es/product/audience-data-and-segmentation/user-data-tags/tags/) del usuario. Seguirá enviando una sola plantilla, pero cada persona solo verá las partes que le correspondan.
Seleccione el bloque en el lienzo, abra **Condición de visualización** en el panel derecho y active **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 copias localizadas para cada idioma en un único diseño in-app. Para saber cómo funciona la mensajería multilingüe en todos los canales, consulte [Mensajería multilingüe](/es/product/personalization/multi-language/).
Para configurar contenido multilingüe:
1. Haga clic en el selector de idioma en la barra superior para abrir la lista de idiomas.
2. Seleccione los idiomas que desea añadir y luego haga clic en **Aplicar**.
3. Use el selector de idioma para moverse entre idiomas y editar el contenido de cada bloque para el idioma seleccionado.
4. Haga clic en **Autotraducir** para rellenar las traducciones faltantes automáticamente — revise el texto generado por IA antes de guardar.
## Configurar los ajustes de la plantilla
Use 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 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
Haga clic en **Guardar** en la barra superior para guardar sus cambios. Use **Deshacer**/**Rehacer** en la barra superior para retroceder y avanzar en sus ediciones.
## Actualizar traducciones desde sus propios sistemas
Su equipo de desarrollo puede actualizar las traducciones de una plantilla guardada a través de la [API de Pushwoosh](/es/developer/api-reference/) o un cliente de IA conectado al [servidor ManyMoney AI MCP](/es/product/pushwoosh-ai/manymoney-mcp-server/), sin reenviar el HTML o el diseño de la plantilla.
Esto solo funciona en una plantilla que ya se ha guardado una vez (consulte [Guardar la plantilla](#save-the-template) más arriba). Una plantilla sin contenido guardado no tiene nada en lo que fusionar las traducciones.
La actualización fusiona solo los idiomas y las claves de texto enviadas en el campo `localization`. Todos los demás idiomas, claves y el diseño visual permanecen como se guardaron.
- Enviar una clave sin valor elimina esa clave de su idioma.
- Enviar un idioma sin valor elimina todo el idioma de la plantilla.
- El idioma predeterminado puede cambiar a cualquier idioma que quede en la plantilla después de la actualización.
- La actualización se rechaza si eliminaría todos los idiomas de la plantilla, o si el idioma predeterminado solicitado no es uno de los idiomas que quedan después de la fusión.
Para esto, necesitará la ayuda de su equipo de desarrollo.