El App Editor

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

Esta página recorre cada área del editor. 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.

Chuleta

• Seis áreas: Theme & Brand · PWA · App Settings · Popups · Screens · Advanced.
• Todos los botones de guardado — Save draft, Save settings, Save list, Save — escriben en el mismo borrador. Nada llega a los miembros hasta que pulsas Publish.
• Un campo de color vacío suele significar "heredar" — la app recurre al tema.
• 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, así que configúralos primero.
• Layout → Corner radius — un solo número, que se aplica a las tarjetas y los botones de toda la app. Los paneles individuales pueden sobrescribirlo.
• Brand assets
  • Favicon — el icono de la pestaña del navegador. Una vez publicado es también el avatar de este negocio en el hub, así que aparece en sitios que quizá no esperas.
  • 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 tal y como lo escribe ese proveedor.

• Navigation bar — la barra que recorre la parte inferior de la app.
  • Nav bar type y Show labels cambian su forma y si los nombres de los elementos aparecen debajo de los iconos.
  • Visibility — tres interruptores independientes: la nav bar en sí, 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 los miembros otra forma de llegar a las demás 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 los miembros tocan de verdad, 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.

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 la instala de nuevo.

• App name — el nombre completo que se muestra al instalar.
• Short name — la etiqueta que aparece debajo del icono de la pantalla de inicio. Los teléfonos recortan las etiquetas largas, así que déjala 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.

App Settings

Solo para apps nativas

Esta área es la configuración de compilación de una app móvil nativa para las tiendas de aplicaciones. Si tu programa funciona solo como Web app, puedes saltártela.

La configuración se guarda por versión. Una versión pasa de borrador a Ready to submit y se bloquea una vez aprobada; Back to draft la desbloquea si todavía hay que cambiar algo. New version empieza la siguiente y History muestra las anteriores.

Marcar una versión como lista no publica la app en las tiendas por sí solo — entrega una configuración aprobada a quien compila y envía la app.

• Store identity — nombre de la app, identificadores de paquete y de bundle, nombre de la empresa, IDs de las cuentas de las tiendas. Es de solo lectura: se configura una vez por app y todas las versiones lo comparten. Contacta con soporte si hay que cambiarlo.
• Pestaña App settings
  • Splash & appearance — la pantalla de arranque: estilo de la barra de estado, fondo del splash (con uno aparte para el modo oscuro), fondo del icono adaptativo y los colores de la barra de progreso de carga.
  • App images — cada hueco indica el tamaño exacto en píxeles que debe tener ese recurso. Al subir un archivo se sustituye por ti la URL guardada, así que no necesitas tocar el campo de la URL.
• Pestaña Store settings — el texto de la ficha y los recursos que acompañan al envío.

Popups

Mensajes que se muestran después del inicio de sesión, encima de la pantalla en la que esté el miembro — no están ligados a ninguna pantalla concreta.

• Popup type — para qué sirve el popup. installReminder, por ejemplo, es el recordatorio de "añade esta app a tu pantalla de inicio".
• Style y Content type — cómo se presenta y qué contiene.
• Delay (ms) — cuánto tarda en aparecer después del inicio de sesión. 2000 son dos segundos; deja que la pantalla cargue primero.
• Show how many times — el límite de frecuencia por miembro. -1 significa una sola vez; cualquier número positivo es esa cantidad de veces.
• 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 añades, reordenas, duplicas y eliminas. Cada uno abre su propio panel de ajustes: el contenido por un lado (imagen, texto, enlace) y el aspecto por el 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 bruto. Resulta práctico 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 carrusel — tu espacio de banners

El carrusel es el componente que más se edita y funciona como un espacio de banners rotativos. De cada 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 una pestaña nueva), lanzar el aviso de "instala esta app", descargar el Wallet Pass, abrir las indicaciones para llegar o iniciar un correo.
• Quién la ve — opcionalmente, limita una diapositiva a los miembros con determinadas etiquetas. Déjalo vacío para mostrar la diapositiva a todo el mundo. Así es como se lanzan banners solo para VIP o para un segmento concreto dentro del mismo carrusel.

Los ajustes que afectan a todo el carrusel 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 carruseles, y muchos negocios usan un carrusel de una sola diapositiva como banner-botón pulsable.

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 mantener tu tono de voz en cada idioma.

Dos cosas que comparten casi todas:

• 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 atenuado cuando esa función no está habilitada para el negocio.

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

Login Page — título de la página, etiqueta del botón de envío y dos mensajes de error (No-connection, Too-many-attempts). El bloque Logo es una sobrescritura 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é activado. El resto es el estilo del botón de envío, del título y del separador del pie de página.

Verification Page — título de la página, texto del cuerpo, el mensaje y el botón de reenvío, y una nota inferior debajo de 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 la página, botón de envío, mensaje de no-connection.

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

Pantallas del miembro — Gifts, Profile, Activities

Gifts — el título de la pantalla y el estado vacío No gifts message. Gift card style da forma a la tarjeta que ven los miembros: ten en cuenta que definir un Border color es lo que activa el borde, y un Icon corner radius vacío recurre al radio de esquinas 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 — el título de la 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 Lottie. Divider color solo aparece cuando Gap between rows es 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 — el título de la pantalla, la etiqueta de Show-more button y el estado vacío que ven los 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 los miembros las defines tú.

Pantallas de utilidad — UpdateMemberDetails, CommPermissions, EnterCode, Catalogs

UpdateMemberDetails — título de la pantalla, botón de guardar, mensaje de no-connection. Este es el formulario que usan los miembros para completar o corregir sus propios datos.

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

EnterCode — donde los miembros escriben un código de cupón. Título de la pantalla, título y descripción de la tarjeta del 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 si prefieres un campo de texto normal.

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

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 cambias uno, se rompen todos los botones que apuntan al ID antiguo.

Advanced

Sin red de seguridad

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

Cuatro campos, todos JSON:

• Component style overrides (businessStyles.components) — sobrescrituras del tema por componente, como la barra de título del navegador integrado o el estilo de los elementos de la nav bar.
• Page style overrides (businessStyles.pages) — sobrescrituras por página, como el contenedor y el formulario del inicio de sesión.
• Nav bar custom CSS y Login footer custom CSS — claves de estilo CSS en bruto que se fusionan con ese elemento.

Hay una regla que pilla a todo el mundo: usa camelCase. marginTop funciona; margin-top se ignora sin avisar.

Si no estás seguro de lo que 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 carruseles que hay en ella. Están en camino unas 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.