Saltar al contenido
Documentación para desarrolladores Soporte Solicitar demo Iniciar sesión
Pushwoosh.com

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

Anchor link to

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 Crear in-app.
Página de Contenido In-apps con el botón Crear in-app en la parte superior derecha de la lista de plantillas
  1. Introduce un nombre para la plantilla.
  2. Elige cómo crear la plantilla:
    • Crear nueva plantilla: construye una plantilla en el editor integrado.
    • Subir ZIP: sube un archivo ZIP con tu mensaje in-app en HTML.
    • Crear rich media nativo: construye un in-app nativo renderizado por el SDK. Más información
  3. Selecciona Crear nueva plantilla.
  4. Haz clic en Crear in-app.
Diálogo para añadir nueva plantilla con campo de nombre, Crear nueva plantilla seleccionado, Subir ZIP y opciones de Crear rich media nativo

Explora el diseño del editor

Anchor link to

El editor integrado tiene cuatro áreas. Cada una tiene una función clara.

Barra superior

Anchor link to

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 in-app), idiomas (Autotraducir y el selector de idioma), ancho de vista previa para teléfono o escritorio (el teléfono ofrece 360, 390, 393 o 430 px, que coinciden con los anchos de dispositivo comunes), y un interruptor de lienzo claro/oscuro (icono de sol/luna). Consulta Configurar cómo se ve el in-app en el dispositivo y Localizar la plantilla.

Barra superior del editor in-app con el nombre de la plantilla, Deshacer, Rehacer, Ajustes de in-app, selector de idioma, Autotraducir, vista previa de teléfono y escritorio, interruptor claro/oscuro y Guardado

Abre el menú ⋮ en la barra superior para más acciones:

Menú ⋮ expandido en la barra superior del editor in-app con Vista previa, Comprobar, Brand book, Descargar .zip, Aplicar estilos del brand book y Restablecer estilos personalizados

Vista previa

Anchor link to

Vista previa te permite probar el mensaje antes de guardarlo: toca botones, muévete a través de flujos de varias pantallas y comprueba el diseño en el teléfono o el escritorio.

Panel de vista previa con interruptor de teléfono y escritorio, interruptor de claro y oscuro, Reiniciar y un mensaje in-app que muestra una imagen, texto de oferta, temporizador y botón de Reclamar

Lo que funciona en la vista previa:

  • Los botones y los flujos de varias pantallas se ejecutan de verdad.
  • Los enlaces y los enlaces profundos 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, cambia entre teléfono y escritorio, y entre claro y oscuro, para ver todos los diseños resultantes. 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.

Comprobar

Anchor link to

Comprobar abre 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 es una dirección http(s), mailto:, tel: o de enlace profundo (por ejemplo, myapp://promo)
  • Bloques de marcador de posición de IA sin terminar
  • Espacios de imagen o video 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 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
Panel de comprobación inteligente que lista un error de enlace de botón faltante y una advertencia de espacio de imagen vacío

Haz clic en un hallazgo para saltar directamente al elemento afectado en el lienzo. Si no hay nada mal, el panel muestra Todas las comprobaciones pasaron — el contenido parece listo para guardar.

Brand book

Anchor link to
  • Brand book: abre el Brand book de tu cuenta.
  • Aplicar estilos del brand book: rediseña la plantilla para que coincida con tu Brand book (una vez que hayas configurado uno).
  • Restablecer estilos personalizados: elimina las sobreescrituras de estilo en la plantilla y vuelve a los valores predeterminados.

Descargar .zip

Anchor link to

Descargar .zip guarda la plantilla como un archivo ZIP. Descarga la última versión guardada, así que guarda tus 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

Anchor link to

Edita el mensaje en el lienzo: haz clic en texto, imágenes y botones para cambiarlos. Usa el interruptor de teléfono/escritorio en la barra superior para comprobar cómo se ve el diseño en cada ancho. El interruptor solo cambia la vista previa, no el diseño en sí.

Usa 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 establezcas los tuyos. Esta es una vista de edición en vivo, no el panel de solo lectura de Vista previa.

Capas

Anchor link to

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 de Capas que lista Tarjeta, Imagen, Encabezado, Texto, Temporizador, Botones y Pie de página en un árbol

Panel derecho

Anchor link to

Cambia entre tres pestañas:

Pestaña de Bloques en el panel derecho con Encabezado, Texto, Botón, Imagen y otros bloques de contenido

Añadir bloques de contenido

Anchor link to
  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.
Editor in-app vacío con Empezar con un bloque en el lienzo y el panel de Bloques abierto

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 que se puede tocar
  • Imagen: imágenes de la Tienda de medios, subidas o desde una URL
  • Video: una miniatura de video que se puede tocar y 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 atrás para ofertas y fechas límite
  • Menú: una fila o columna de enlaces de navegación o contacto
  • Redes sociales: iconos que enlazan a tus perfiles sociales
  • HTML: HTML personalizado, como un formulario, una encuesta o un video incrustado
  • Productos: una cuadrícula de tarjetas de productos de tu Catálogo de productos o del carrito abandonado de un usuario

Consulta la Referencia de bloques del editor in-app para los ajustes de cada bloque, y cómo guardar y reutilizar bloques.

Mostrar bloques a usuarios específicos

Anchor link to

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) del usuario. Sigues enviando una sola plantilla, pero cada persona solo ve las partes que le corresponden.

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

Localizar la plantilla

Anchor link to

Una plantilla multilingüe almacena el texto localizado para cada idioma en un solo diseño in-app. Para saber cómo funciona la mensajería multilingüe en todos los canales, consulta Mensajería multilingüe.

Para configurar contenido multilingüe:

  1. Haz clic en el selector de idioma en la barra superior para abrir la lista de idiomas.
  2. Selecciona los idiomas que quieres añadir y luego haz clic en Aplicar.
  3. Usa el selector de idioma para moverte entre idiomas y editar el contenido de cada bloque para el idioma seleccionado.
  4. Haz clic en Autotraducir para rellenar las traducciones faltantes automáticamente; revisa el texto generado por la IA antes de guardar.

Configurar los ajustes de la plantilla

Anchor link to

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 in-app (barra superior): posición en la pantalla, animaciones y el botón de cerrar.

Más información

Guardar la plantilla

Anchor link to

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.