Web app

La Web app es la PWA que ven tus miembros — la página que abren desde un enlace, un QR o después de haberla instalado como app. Ahí consultan su saldo y sus regalos, escanean para pagar, exploran menús o sucursales, introducen códigos de cupón y descargan su Wallet Pass.

En resumen

Todo el diseño de la Web app es autogestionable. En Interfaces de usuario → Web app encontrarás el App Editor: Brand colors, cada pantalla y sus componentes, popups, el comportamiento de instalación y los style overrides avanzados. Los cambios se guardan en un draft, así que nada cambia para tus miembros hasta que pulsas Publish. Antes puedes comprobarlo con Preview y después revertirlo desde History. La edición más habitual del día a día sigue siendo el Carousel de la pantalla de inicio: cambiar las imágenes de los banners y decidir qué pasa cuando un miembro las toca.

El App Editor

Abre en el Hub Interfaces de usuario → Web app. El panel de la izquierda es el mapa del editor; el lienzo de la derecha muestra los ajustes de lo que selecciones.

El editor está organizado en seis áreas:

• Theme & Brand — el aspecto global: Brand colors, Corner radius, Logo y Favicon, Font y la Navigation bar.
• PWA — cómo se presenta la app cuando un miembro la instala en la pantalla de inicio de su teléfono.
• App Settings — imágenes y colores para una app móvil nativa en las tiendas de aplicaciones. Otro trabajo, otro público, así que tiene su propia página: App móvil.
• Popups — mensajes que se muestran tras el inicio de sesión, en cualquier punto de la app y sin estar ligados a una pantalla.
• Screens — una entrada por cada pantalla de la app: la pantalla de inicio más las páginas integradas.
• Advanced — style overrides en crudo para casos límite que los paneles normales no cubren.

El resto de esta página recorre esas áreas. No enumera todos los campos —la mayoría de los campos de color y tamaño hacen exactamente lo que dice su etiqueta—, pero sí cubre los que conviene entender antes de cambiarlos.

Draft → Preview → Publish

Nada de lo que editas se publica directamente. Cada Save escribe en un draft; la barra superior te indica si hay cambios sin publicar. Desde ahí:

• Preview — ver el draft exactamente como lo verían tus miembros, antes de comprometerte.
• Publish — publicar el draft para todos los miembros.
• Discard draft — descartar los cambios sin publicar y volver a la versión publicada.
• History — se conserva cada versión publicada y puedes revertir 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 draft se comprueba de forma continua, así que el indicador se actualiza mientras editas.

Reglas que se aplican en todo el editor

• Todos los botones de guardado — Save draft, Save settings, Save list, Save — escriben en el mismo draft. Nada llega a tus miembros hasta que pulsas Publish.
• Un campo de color vacío suele significar «heredar» — la app recurre al theme.
• Allí donde veas Insert token, puedes insertar datos del miembro en el texto (nombre, saldo…), de modo que un mismo texto se personaliza para cada miembro.
• Los campos de icono esperan un nombre de Iconify como tabler:plus. La app ignora las clases de Font Awesome.

Theme & Brand

El aspecto global. Cambia algo aquí y todas las pantallas lo siguen.

• Brand colors — primario, secundario y texto. El resto del editor recurre a estos colores, así que configúralos primero.
• Layout → Corner radius — un único número, aplicado a las tarjetas y los botones de toda la app. Los paneles individuales pueden anularlo.
• Brand assets
  • Favicon — el icono de la pestaña del navegador. Una vez publicado, también es el avatar de este negocio en el hub, así que aparece en sitios donde quizá no lo esperes.
  • Logo — el logo de reserva para el inicio de sesión cuando Screens → Login Page no tiene uno propio, y el logo que se muestra en las páginas de baja de suscripción y de borrado de datos. Configurarlo aquí cubre los tres casos a la vez.
• Buttons — color de fondo y de texto, altura y relleno de los botones estándar de la app.
• Iframe dialog — el diálogo a pantalla completa que se abre cuando un miembro toca algo que carga un PDF o una página externa. Deja Header icon color vacío y seguirá el color del título.
• Font — elige el proveedor y luego escribe el nombre de la familia tipográfica exactamente como lo escribe ese proveedor.

• Navigation bar — la barra de la parte inferior de la app.
  • Nav bar type y Show labels cambian su forma y si los nombres de los elementos aparecen bajo los iconos.
  • Visibility — tres interruptores independientes: la propia nav bar, el center button (el botón redondo elevado que usan algunos diseños) y la app bar de la parte superior. Si desactivas la nav bar, asegúrate de que la pantalla de inicio ofrezca a tus miembros otra forma de llegar al resto de pantallas.
  • Navigation items — arrastra para reordenar, el lápiz para editar la etiqueta y su destino, la papelera para eliminar. Esta lista es lo que tus miembros tocan realmente, así que limítala a las pantallas que usan.

PWA

Cómo se comporta la Web app una vez que un miembro la instala en la pantalla de inicio de su teléfono. Esto es el sitio web instalado, no la app nativa de las tiendas — para eso, consulta App móvil.

Configura esto antes de promocionar la instalación

Los cambios que hagas aquí no actualizan las apps ya instaladas. Un icono de la pantalla de inicio conserva su nombre y su imagen antiguos hasta que el miembro lo elimina y vuelve a instalarlo.

• App name — el nombre completo que se muestra al instalar.
• Short name — la etiqueta bajo el icono de la pantalla de inicio. Los teléfonos recortan las etiquetas largas, así que hazla corta.
• Description — algunos navegadores la muestran en el aviso de instalación.
• Manifest icons — el conjunto de iconos entre los que elige el teléfono al dibujar el icono de la pantalla de inicio. Save list guarda este bloque por su cuenta.

Popups

Mensajes que se muestran tras el inicio de sesión, encima de la pantalla en la que esté el miembro — sin estar ligados a una pantalla concreta.

• Popup type — para qué sirve el popup. installReminder, por ejemplo, es el aviso de «añade esta app a tu pantalla de inicio».
• Style y Content type — cómo se presenta y qué lleva dentro.
• Delay (ms) — cuánto tarda en aparecer tras el inicio de sesión. 2000 son dos segundos; dale tiempo a la pantalla para que cargue primero.
• Show how many times — el límite de frecuencia por miembro. -1 significa una sola vez; cualquier número positivo equivale a ese número de apariciones.
• Title y Body — el texto, con Insert token para los datos del miembro.
• Close button y "Don't show again" text — déjalos vacíos y el popup usará sus valores por defecto.
• Image o Lottie URL — una imagen fija o una animación. Error title y Error Lottie URL cubren el caso en que la acción del popup falla.

Save list guarda toda la lista de popups de una vez.

Screens

Hay dos tipos de pantallas.

HomeScreen es un lienzo

La pantalla de inicio es una pila de componentes que puedes añadir, reordenar, duplicar y eliminar. Cada uno se abre en su propio panel de ajustes: el contenido por un lado (imagen, texto, enlace) y el aspecto por otro. Aquí es donde vive la mayor parte de la personalidad visual de tu app.

Encima de la pila, el bloque Settings de la propia pantalla define el color o la imagen de fondo y las barras nativas de estado e inferior.

El icono </> de un componente abre su configuración en crudo. Resulta útil para copiar un componente de un sitio a otro, pero se aplica la misma precaución que en Advanced — no hay ninguna validación de lo que pegas.

El Carousel — tu espacio de banners

El Carousel es el componente que más se edita y funciona como un espacio de banners rotativos. En cada diapositiva controlas:

• La imagen — añade, elimina o reordena diapositivas; cada diapositiva es una imagen.
• La acción — qué pasa cuando un miembro la toca: nada (decorativa), abrir un popup, abrir una URL (dentro de la app o en una pestaña nueva), lanzar el aviso de «instala esta app», descargar el Wallet Pass, abrir una ruta o iniciar un correo.
• Quién la ve — opcionalmente, limita una diapositiva a los miembros con etiquetas concretas. Déjalo vacío para mostrarla a todo el mundo. Así es como lanzas banners solo para VIP o específicos de un segmento dentro del mismo Carousel.

Los ajustes que afectan a todo el Carousel están encima de la lista de diapositivas: color de fondo, Auto play con su velocidad en segundos, Transition speed, Infinite para un bucle sin fin y Pagination dots para el indicador de posición.

Una pantalla de inicio puede contener varios Carousels, y muchos negocios usan un Carousel de una sola diapositiva como banner-botón que se puede tocar.

Las demás pantallas son integradas

Login, Verification, Registration, Gifts, Profile, Activities y las demás tienen un diseño fijo. Lo que editas son sus textos —títulos de pantalla, etiquetas de botones, mensajes de estado vacío y de error— y su aspecto: fondo, estilo de las tarjetas, iconos. Así todos los flujos siguen funcionando correctamente y, aun así, puedes acertar con tu tono de voz en cada idioma.

Dos cosas que casi todas comparten:

• Un botón Disable screen, que retira la pantalla de la app por completo. Las pantallas principales de inicio de sesión no lo tienen.
• Native bars — el estilo de la barra de estado y de la barra inferior; solo es relevante si tu programa tiene una app móvil nativa.

GenerateCode aparece en gris cuando esa función no está activada para el negocio.

Flujo de inicio de sesión — Login, Verification, Registration, VerificationPlus

Login Page — título de página, etiqueta del botón de envío y dos mensajes de error (No-connection, Too-many-attempts). El bloque Logo es una anulación por pantalla: deja la imagen vacía y recurrirá al logo del negocio configurado en Theme & Brand. Logo width acepta un ancho CSS como 70% y se ignora mientras Full width esté activo. El resto es el estilo del botón de envío, del título y del separador del pie.

Verification Page — título de página, texto del cuerpo, el aviso y el botón de reenvío, y una nota inferior bajo la línea de reenvío. En los campos de texto enriquecido solo sobreviven <b>, <br> e <i>; todo lo demás se elimina.

Registration Page — título de página, botón de envío, mensaje No-connection.

VerificationPlus — la verificación por email en tres pasos: Step 1 — email, Step 2 — code, Step 3 — success, cada uno con su propio título y su propia descripción, además del placeholder y la etiqueta de envío del formulario de email.

Pantallas del miembro — Gifts, Profile, Activities

Gifts — título de pantalla y el estado vacío No gifts message. Gift card style da forma a la tarjeta que ven tus miembros: ten en cuenta que es al definir un Border color cuando se activa el borde, y que un Icon corner radius vacío recurre al Corner radius global. Gift card texts cubre la línea de validez, la etiqueta de la tarjeta perforada, la etiqueta del regalo y el botón de cierre.

Profile — título de pantalla, el texto de la fila de cierre de sesión y el estilo de la tarjeta de información, del botón de cierre de sesión y del contenedor del menú. El Icon de cierre de sesión puede ser un nombre de Iconify, un icono de Font Awesome, una imagen subida o una animación de Lottie. Divider color solo se muestra cuando Gap between rows está en 0.

Menu buttons son las filas que ve un miembro dentro de Profile — datos personales, preferencias de notificación, actividad, códigos de cupón, tus avisos legales, el formulario de contacto, la solicitud de borrado de datos. Arrastra para reordenar, el lápiz para editar la etiqueta y el destino, la papelera para eliminar.

Activities — título de pantalla, la etiqueta del Show-more button y el estado vacío que ven tus miembros antes de su primera compra. Expand/collapse icons aceptan nombres de Iconify. Filter categories son los chips que hay encima de la lista, y la lista es editable — las categorías por las que pueden filtrar tus miembros las defines tú.

Pantallas auxiliares — UpdateMemberDetails, CommPermissions, EnterCode, Catalogs

UpdateMemberDetails — título de pantalla, botón de guardar, mensaje No-connection. Es el formulario con el que tus miembros completan o corrigen sus propios datos.

CommPermissions — los mismos tres campos, más un Button icon para el botón de envío. Aquí es donde tus miembros gestionan por qué canales aceptan recibir tus comunicaciones.

EnterCode — donde tus miembros escriben un código de cupón. Título de pantalla, título y descripción de la tarjeta de código, placeholder del campo, mensaje de campo obligatorio y etiqueta de envío, además de tres alertas: Success, Invalid-code y Already-used. Code dots son los marcadores visuales de los dígitos — desmarca Show dots para tener un campo de entrada normal.

Catalogs — las listas navegables de tu app: restaurantes, socios, un tablón de anuncios, una carta.

No cambies el nombre del ID de un catálogo

El ID es la forma en que los botones enlazan con un catálogo (/catalog?catalog=<id>). Si lo renombras, se rompen todos los botones que apuntan al ID antiguo.

Advanced

Sin red de seguridad

Son ajustes en crudo, sin ninguna validación. Un valor incorrecto puede romper el estilo de la app para todos tus miembros. Van al draft como todo lo demás, así que Discard draft deshace un experimento — pero solo hasta que lo publiques.

Cuatro campos, todos en JSON:

• Component style overrides (businessStyles.components) — overrides del theme por componente, como la barra de título del navegador integrado en la app o el estilo de los elementos de la Nav bar.
• Page style overrides (businessStyles.pages) — overrides por página, como el contenedor y el formulario del login.
• Nav bar custom CSS y Login footer custom CSS — claves de estilo CSS en crudo que se aplican a ese elemento.

Hay una regla con la que tropieza todo el mundo: usa camelCase. marginTop funciona; margin-top se ignora en silencio.

Si no tienes claro qué hace una clave, pregunta a soporte antes de guardar aquí.

Por dónde empezar

El editor es profundo a propósito — 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 los Carousels que hay en ella. Están en camino Templates ya preparadas, que convertirán un rediseño grande en un punto de partida de un solo clic en lugar de una construcción componente a componente.