Para negocios que usan Reward Points.
El configurador es el Paso 2 del alta de un programa, en Tarjetas → Configurar Tarjeta. Define cómo se ve la tarjeta dentro de Apple Wallet y Google Wallet: no estás diseñando una imagen, estás diseñando el pase.
La vista previa tiene pestañas de Apple y Google, y el botón Voltear para ver el Frente o el Reverso. En la computadora vive a la derecha. En el teléfono se abre con Vista previa, en el pie, en cualquiera de los tres pasos; en el Paso 2 también se abre tocando la franja. Úsala: las dos billeteras no pintan lo mismo, y ahí es donde vas a notarlo.
Los tres pasos
Arriba tienes la navegación: General, Progreso y Extras. Puedes ir y venir entre ellos cuando quieras — cambiar de paso guarda un borrador solo, sin publicar nada. Desde el Paso 1, "atrás" te devuelve a la configuración del programa.
Paso 1 · General — diseño de la tarjeta
Es el frente de la tarjeta, y es donde vive todo lo que se personaliza por cliente.
- Logo. Toca el recuadro. Si todavía no hay logo, lo subes y lo recortas ahí mismo; si ya hay uno, se abre Logotipo actual, con Editar (volver a recortar), Subir nueva y Eliminar. Si tu organización ya tenía logo, aparece precargado.
- Título de la tarjeta. Acepta variables. Debajo dice "Solo Apple. En Google se muestra el nombre del programa", y es literal: esa línea solo la pinta Apple Wallet.
- Encabezado superior. Son dos campos: la etiqueta, texto libre (por ejemplo "Cliente"), y el valor, que acepta variables (por ejemplo el nombre de la persona).
- Información en filas. Las tres columnas que el cliente ve en el frente. Arriba las tienes como una tira de vista previa, con el valor ya resuelto; tocas una y se abre abajo a lo ancho para editar su encabezado y su contenido —este último acepta variables—. Las que dejes vacías se marcan como "Sin usar" y no aparecen en la tarjeta.
Variables
En el título, en el valor del encabezado superior y en el contenido de cada columna aparece el selector Insertar variable: datos que se rellenan solos para cada cliente. La variable queda como una etiqueta con su valor de ejemplo al lado, así que ves cómo va a quedar antes de guardar.
| Grupo | Variable | Qué muestra |
|---|---|---|
| Cliente | Nombre del cliente | Su nombre de pila. |
| Cliente | Última visita | La fecha de su última visita, o "Aún sin visitas". |
| Tarjeta | Puntos | Su saldo actual. |
| Tarjeta | Puntos que faltan | Lo que le falta para la meta. |
| Tarjeta | Fecha de emisión | Cuándo recibió la tarjeta. |
| Tarjeta | Fecha de vencimiento | Cuándo vencen sus puntos, o "Sin vencimiento". |
| Empresa | Nombre de empresa · Nombre del programa | Los tuyos. |
Recomendación. Piensa dos veces antes de poner el saldo al frente: el frente lo ve cualquiera que mire el teléfono del cliente por encima del hombro. Deja ahí lo mínimo y manda el detalle al reverso.
Debajo, el panel Apariencia del pase agrupa los colores:
- Color de fondo. El color principal que verán tus clientes; la paleta te sugiere tonos sacados de tu logo.
- Color de texto y color de etiquetas. Los dos están marcados "Solo Apple Wallet" — Google Wallet los ignora y decide por su cuenta. Son opcionales: si no los tocas, la plataforma elige claro u oscuro según qué tan claro sea tu fondo, y el botón Limpiar los devuelve a ese automático.
Paso 2 · Progreso — la barra de avance
La franja donde el cliente ve cuánto lleva. Son cuatro grupos, los mismos en la computadora y en el teléfono: Barra, Fondo, Texto y Ajustes. En la computadora son secciones plegables; en el teléfono son los cuatro botones de la barra de abajo. No son dos editores distintos.
El paso abre en Barra. Los segmentos los define la meta del programa y no se editan aquí: para cambiarlos, edita el programa.
Barra. El Relleno de la parte ya cumplida —Sólido o Gradiente— y el Fondo barra, el color de los segmentos vacíos.
Fondo. Toda la franja. Dos modos: Color (un color sólido; la paleta te sugiere tonos del logo) o Imagen. Con color o con imagen aparece Mimetizar con la tarjeta, que funde los bordes de la franja con el color de fondo del pase.
Texto. El color de los textos —cinco grises y un color personalizado— tiñe el contador y la etiqueta. La Etiqueta es el texto debajo de la barra, con Mostrar etiqueta para encenderla u ocultarla.
Ajustes. Altura de la barra (de 12 a 48) y Redondeo de las esquinas (de 0 a 24), ambos con deslizador; y Divisores, las líneas entre segmentos. Si los enciendes, aparece Color divisores.
Debajo de la franja, Simular avance mueve cuántos segmentos se ven llenos en la maqueta. Solo es para la vista previa: no le da puntos a ningún cliente. En la tarjeta real el avance se calcula con la actividad de cada uno.
El aviso de contraste
Si eliges una tinta que casi no se distingue de lo que quedó debajo, aparece un aviso en rojo: "Este tono casi no se distingue del fondo. Los clientes podrían no ver su avance."
No es decorativo ni una regla de estilo: la plataforma mide el contraste real contra el fondo ya compuesto —tu imagen, tu gradiente, tus divisores, todo junto— y avisa cuando cae por debajo del mínimo legible. Si lo ves, cambia la tinta. Es el único aviso del configurador que predice una queja.
Una imagen, dos recortes
La imagen del progreso se muestra en ambas billeteras. Súbela en formato Apple Wallet, 1125 × 432 px: la recortas una vez y la plataforma genera sola la versión optimizada para Google Wallet, que pide otra proporción. Puedes descargar cualquiera de las dos para revisarla fuera del navegador, y volver a recortar sin subir la imagen otra vez.
Paso 3 · Extras — información adicional y reverso
Aquí va lo que el cliente lee cuando voltea la tarjeta, y es un solo bloque: módulos de texto.
Cada módulo tiene un encabezado y un cuerpo: las reglas del programa, tu dirección, tu horario. Agregas y quitas los que quieras, y vienen con sugerencias redactadas para tu giro que puedes insertar con un toque.
Aquí se escribe texto tal cual: el selector de variables no está en este paso, vive en el Paso 1.
Las imágenes: lo que acepta
Formatos JPG, PNG o WEBP, hasta 12 MB y 4000 × 4000 px.
Guardar: qué pasa exactamente
No hay un botón de publicar aparte. Al guardar, en un solo movimiento:
- Se guarda tu diseño.
- Se publica en Google Wallet — eso es lo que habilita emitir tarjetas.
- El diseño nuevo alcanza a las tarjetas ya instaladas, en Apple Wallet y en Google Wallet.
Ese último punto merece leerse dos veces: al guardar, el cambio llega a todas las tarjetas ya emitidas. Nadie tiene que reinstalar nada, y nadie recibe una notificación por un cambio de diseño. Corregir una falta de ortografía no interrumpe a tus clientes; sumar puntos sí, y ese aviso no cambia.
El indicador de arriba te dice dónde estás: Borrador (nunca guardado), Guardado · pendiente de publicar, o Publicado en Google Wallet.
Si el guardado se publica a medias
Puede pasar que tu diseño se guarde pero Google Wallet no lo tome. Tu trabajo nunca se pierde y nunca es culpa de algo que hiciste mal. Lo único que cambia entre casos es si vale la pena reintentar:
- "Google Wallet no respondió en este momento" — vuelve a guardar en unos minutos. Es el único caso donde reintentar sirve.
- "Google Wallet rechazó la publicación" — nos llegó el aviso y lo corregimos nosotros. No lo intentes de nuevo.
- "A esta tarjeta le falta el programa de lealtad" — revísalo desde Tarjetas y vuelve a guardar.
Antes de emitir la primera tarjeta
Guarda, y luego emítete una tarjeta a ti mismo e instálala en tu teléfono. La vista previa es buena, pero la pantalla real de tu billetera es la que van a ver tus clientes — y el contraste, el tamaño del logo y la legibilidad de la barra se juzgan mejor ahí.
Para emitírtela, ve a Doy de alta a un cliente en el mostrador; para entender qué verá tu cliente al recibirla, Cómo recibe el cliente su pase. En esa misma página aparece Sobre el negocio si llenaste la ficha: Completo la ficha de mi negocio.