Documentación

Diseño de Tarjetas Wallet

Personaliza la tarjeta digital que tus clientes guardan en Apple Wallet y Google Wallet.

El Diseño de Tarjetas te permite controlar cómo se ve la tarjeta digital de tu negocio en Apple Wallet (iOS) y Google Wallet (Android). Configuras una sola vez y la misma configuración se usa para ambos sistemas — con previews en vivo de cada uno.

Las tarjetas digitales en Apple Wallet y Google Wallet están incluidas en todos los planes pagados — Wallet, Shared, Branded, Premium y Founder Lifetime.

Acceder al editor

Ve a la sección Diseño de Tarjetas desde la barra lateral del panel web. Verás dos previews lado a lado: la tarjeta como se ve en Apple Wallet y como se ve en Google Wallet.

Colores

Estos colores se aplican a ambos sistemas:

CampoDescripción
Color de fondoEl color principal de la tarjeta. Por defecto usa el color primario del programa.
Color de etiquetaEl color del texto de las etiquetas (ej. "Puntos", "Sellos").
Color de textoEl color del texto principal (ej. saldo, nombre del cliente).

Imágenes

CampoAplica aDescripción
LogoApple + GoogleLogo de tu negocio que se muestra en la tarjeta.
Imagen heroApple (strip) + Google (hero)Banner visual; en Apple Wallet aparece como strip horizontal; en Google Wallet como hero superior.
Ícono AppleApple solamenteÍcono pequeño que iOS muestra junto al logo en la lista de pases.

Mensaje de proximidad

Apple Wallet permite mostrar un mensaje personalizado cuando el iPhone del cliente entra en proximidad de tu sucursal (vía geolocalización). Configúralo en el campo "Mensaje de proximidad".

Android no permite mensaje custom de proximidad: Google Wallet usa un mensaje fijo del sistema. El campo solo afecta a usuarios de iPhone.

Opciones para programa de Sellos

Si tu programa está configurado como STAMPS, aparecen opciones adicionales para personalizar la representación visual de los sellos en la tarjeta:

CampoDescripción
Estilo de visualizaciónContador (texto: "3 de 10 sellos") o Grid (cuadrícula visual de íconos).
Cantidad del gridCuántos sellos se requieren (1-21). Por defecto coincide con stampsRequired del programa.
Ícono activoImagen del sello completado (ej. taza de café llena).
Ícono inactivoImagen del sello pendiente (ej. taza vacía).
Color activoColor de tinte de los sellos completados.
Color inactivoColor de los sellos pendientes.
Color de fondo del selloColor del contenedor del grid de sellos.

Preview en vivo

A la derecha del editor verás los dos previews:

  • Apple Wallet — simula la tarjeta exactamente como aparece en iPhone.
  • Google Wallet — simula la tarjeta como aparece en Android.

Cualquier cambio en colores, imágenes o sellos se refleja al instante en ambos previews.

Guardar y publicar

Toca Guardar cambios al final del editor. Los cambios se aplican de inmediato a:

  • Las tarjetas que se generen a partir de ese momento.
  • Las tarjetas existentes — Apple Wallet recibe push automático para actualizar el pase, Google Wallet refresca al siguiente abrir.

Si aún no tienes clientes inscritos, prueba el flujo end-to-end abriendo tu Página de Inscripción en tu propio teléfono y agregando la tarjeta.

Diseño de Tarjetas Wallet | Documentación | Xtarly Rewards