Web app
La Web app es la PWA orientada al miembro — la página que los miembros abren desde un enlace, un QR o tras instalarla como app. Es donde ven su saldo y sus regalos, escanean para pagar, consultan menús o ubicaciones, introducen códigos de cupón y descargan su Wallet Pass.
Todo el diseño de la Web app es ahora autoservicio. En Interfaces de usuario → Web app encontrarás el App Editor: tema y colores de marca, cada pantalla con sus componentes, popups y overrides avanzados de estilo. Los cambios se guardan en un borrador, así que nada de lo que ven tus miembros cambia hasta que pulses Publish — y puedes usar Preview antes y volver atrás después desde History. La edición más habitual del día a día sigue siendo el carrusel de la pantalla de inicio: cambiar las imágenes de banner y lo que ocurre cuando un miembro las toca.
El App Editor
Abre Interfaces de usuario → Web app en Hub. El panel izquierdo es el mapa del editor; el lienzo de la derecha muestra los ajustes de lo que selecciones.
El editor se organiza en cuatro áreas:
- Theme & Brand — el aspecto global: colores de marca, radio de esquinas, tipografía y la barra de navegación.
- Popups — mensajes que se muestran tras el login, en cualquier parte de la app, sin estar ligados a una pantalla.
- Screens — una entrada por pantalla de la app: la pantalla de inicio más las páginas integradas (login, verificación, registro, regalos, perfil, actividad, introducción de códigos, catálogos…).
- Advanced — overrides de estilo en bruto para casos límite que los paneles normales no cubren.
Borrador → Preview → Publish
Nada de lo que editas se publica directamente. Cada Save escribe en un borrador; la barra superior te dice si existen cambios sin publicar. Desde ahí:
- Preview — ve el borrador exactamente como lo verían los miembros, antes de comprometerte.
- Publish — publica el borrador para todos los miembros.
- Discard draft — descarta los cambios sin publicar y vuelve a la versión en vivo.
- History — se conserva cada versión publicada, y puedes volver a cualquiera de ellas.
La barra superior también muestra avisos de validación cuando un ajuste tiene un valor que la app no puede interpretar (por ejemplo, texto donde se espera un número). Corrige los avisos antes de publicar — el borrador se comprueba continuamente, así que el indicador se actualiza mientras editas.
Theme & Brand — el aspecto global
Aquí es donde la Web app adopta tu identidad: los colores de marca (primario, secundario, texto), el radio de esquinas usado en tarjetas y botones, y la tipografía. También es donde controlas la barra de navegación inferior de la app: sus colores, si se muestran las etiquetas, qué elementos aparecen y en qué orden, y si la barra (o el botón central, o la barra superior) es visible.
Los ajustes de aquí se aplican en todas partes — cambia un color de marca una vez y todas las pantallas lo siguen.
Screens
Las pantallas vienen en dos variantes:
La pantalla de inicio es un lienzo. Es una pila de componentes que puedes añadir, eliminar, reordenar, duplicar y editar — un logo, un saludo, una barra de progreso de niveles o puntos, carruseles, filas de botones, bloques de texto y más. Cada componente se abre en su propio panel de ajustes: eliges el contenido (imagen, texto, enlace) por un lado y ajustas el aspecto (colores, espaciado, alineación) por otro. Aquí vive la mayor parte de la personalidad visual de tu app.
Las demás pantallas son integradas. Páginas como Gifts, Profile, Activities, el flujo de login y registro o la introducción de códigos tienen un diseño fijo — lo que editas es su redacción (títulos de pantalla, etiquetas de botones, mensajes de estado vacío y de error) y su aspecto (color o imagen de fondo). Así cada flujo sigue funcionando correctamente y aun así puedes ajustar tu tono de voz en cada idioma.
Cada pantalla tiene además un pequeño bloque Settings para su fondo y — solo relevante si tu programa tiene app móvil nativa — el estilo de las barras de estado e inferior del teléfono en esa pantalla.
El carrusel — tu espacio de banners
El carrusel es el componente más editado y funciona como un espacio de banners rotatorio en la pantalla de inicio. Por diapositiva controlas:
- La imagen — añade, elimina o reordena diapositivas; cada diapositiva es una imagen.
- La acción — qué ocurre cuando un miembro la toca: nada (decorativa), abrir un popup, abrir una URL (dentro de la app o en pestaña nueva), disparar el aviso de "instala esta app", descargar el Wallet Pass, abrir indicaciones de navegación o iniciar un correo.
- Quién la ve — opcionalmente limita una diapositiva a los miembros con ciertas etiquetas. Déjalo vacío para mostrarla a todos. Así se publican banners solo-VIP o por segmento dentro del mismo carrusel.
Los ajustes del carrusel completo (fondo, auto-play, velocidad, bucle infinito) están encima de la lista de diapositivas. Una pantalla de inicio puede tener varios carruseles — muchos negocios usan un carrusel de una sola diapositiva como banner-botón tocable.
Popups
Los popups aparecen tras el login, encima de la pantalla en la que esté el miembro. Cada popup tiene su contenido (imagen, texto, botón de acción), un retardo y un límite de frecuencia — cuántas veces lo verá un miembro. Usos típicos: un recordatorio de "añade esta app a tu pantalla de inicio", el anuncio de una campaña de temporada, un aviso puntual.
Advanced
La sección Advanced expone overrides de estilo en bruto (estilos por componente y por página, CSS personalizado para la barra de navegación y el pie del login). Son ajustes para usuarios avanzados sin red de seguridad — un valor incorrecto puede romper el estilo para todos los miembros. Siguen las mismas reglas de borrador, así que Discard draft deshace un experimento fallido; aun así, si no estás seguro, consulta con soporte antes de editar aquí.
El editor es profundo — deliberadamente: un usuario avanzado puede dar forma a casi todo. Para el trabajo del día a día rara vez necesitarás más que Screens → HomeScreen y sus carruseles. Las Templates (plantillas listas para usar) están en camino, y convertirán los rediseños grandes en un punto de partida de un clic en lugar de una construcción componente a componente.