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 y Premium.
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.
¿Diseñaste tu tarjeta en xtarly.com/disena-tu-tarjeta o usaste la calculadora antes de crear tu cuenta? Tu organización nace con ese trabajo puesto: colores, degradado, estilo de la tarjeta, colores de sello, tipo de programa y cuántos sellos. Te enganchamos por el correo con el que dejaste tus datos. Las imágenes no viajan con tu diseño (solo se suben si pediste tu tarjeta de muestra para el wallet, y ésas se borran a los 30 días), así que el logo y las fotos hay que volver a subirlos aquí.
Colores
Estos colores se aplican a ambos sistemas:
| Campo | Descripción |
|---|---|
| Color de fondo | El color principal de la tarjeta. Por defecto usa el color primario del programa. |
| Color de etiqueta | El color del texto de las etiquetas (ej. "Puntos", "Sellos"). |
| Color de texto | El color del texto principal (ej. saldo, nombre del cliente). |
Estilo de la tarjeta
El estilo define cómo se acomodan el logo, la imagen y los sellos dentro de la tarjeta. Elige uno y los previews se actualizan al instante:
| Estilo | Cómo se ve |
|---|---|
| Cuadrícula | Los sellos en filas, centrados. El clásico. |
| Logo protagonista | Tu logo grande y centrado arriba, con los sellos en una franja abajo. |
| Foto y sellos | Foto de tu negocio arriba, sellos abajo sobre color sólido. |
| Barra de progreso | Una barra que se llena en vez de sellos individuales. |
| Solo imagen | Sin sellos en la tarjeta: tu imagen ocupa todo el espacio. |
Los cuatro primeros estilos dibujan los sellos dentro de la propia tarjeta, así que el cliente ve su avance sin abrir nada. "Solo imagen" es para programas de puntos o para quien prefiere una tarjeta puramente visual.
Fondo detrás de los sellos
Debajo de la cuadrícula puedes poner:
| Opción | Cuándo usarla |
|---|---|
| Imagen | Una foto de tu negocio o producto. Si queda muy clara, Xtarly la oscurece automáticamente para que los sellos se sigan leyendo. |
| Degradado | Dos colores tuyos, de uno a otro. Buena opción si no tienes una foto que funcione en formato tan alargado. |
| Color liso | Un solo color detrás de los sellos. Lo más limpio y el que mejor resiste cualquier pantalla. |
Logo grande dentro de la tarjeta
En los estilos que lo permiten (por ejemplo, Logo protagonista) puedes subir un logo grande que se dibuja centrado dentro del diseño, no solo en la esquina superior. Es la forma de que tu marca se vea en la pantalla de bloqueo del cliente.
Apple no deja mover el logo pequeño de la esquina: es un espacio fijo del sistema. Por eso el logo grande se compone dentro de la imagen de la tarjeta.
Programas de puntos y niveles
En puntos y niveles la tarjeta no dibuja sellos, así que el editor cambia en dos cosas.
Una sola imagen: Strip / Hero
El editor pide una sola imagen, Strip / Hero, dentro de la sección Fondo de la tarjeta. Es la misma que se ve en Apple Wallet y en Google Wallet. En esa sección eliges una de tres:
| Opción | Cuándo usarla |
|---|---|
| Imagen | Una foto de tu producto o de tu local, de 1125×432 px (Google la escala automáticamente). Si queda muy clara, se oscurece sola para que los puntos o el nivel se sigan leyendo. |
| Degradado | Dos colores tuyos, de uno a otro. |
| Color liso | Un solo color de fondo. |
Dónde se ven los puntos o el nivel
En Dónde se ven los puntos (o Dónde se ve el nivel) eliges en qué parte de la tarjeta de Apple Wallet va el dato principal:
| Opción | Cómo se ve |
|---|---|
| Sobre la imagen | Grande, encima del fondo. |
| Arriba | Pequeño, junto al logo. |
| Abajo de la imagen | A la derecha del nombre del cliente; la imagen queda libre. Si el nombre es largo, se acorta para que quepan los dos. |
El mismo selector, con las mismas tres opciones, está en xtarly.com/disena-tu-tarjeta.
Imágenes
| Campo | Aplica a | Descripción |
|---|---|---|
| Logo | Apple + Google | Logo de tu negocio que se muestra en la tarjeta. |
| Strip / Hero | Apple (strip) + Google (hero) | Banner visual; en Apple Wallet aparece como strip horizontal; en Google Wallet como hero superior. En puntos y niveles es la única imagen de fondo y vive en Fondo de la tarjeta. |
| Lockscreen icon | Apple solamente | Ícono pequeño que iOS muestra junto al logo en la lista de pases y en las notificaciones. |
| Banner de Google | Google solamente | Imagen ancha de la parte superior en Google Wallet. |
| Logo horizontal | Versión apaisada del logo para el encabezado de Google Wallet. |
Mensaje de proximidad
Cuando el teléfono de tu cliente se acerca a una de tus sucursales, su tarjeta aparece en la pantalla de bloqueo. Funciona en iPhone y en Android, siempre que la sucursal tenga coordenadas capturadas.
En Apple Wallet puedes escribir el texto que acompaña ese aviso, en el campo "Mensaje de proximidad". Admite el token {branch}, que se reemplaza por el nombre de la sucursal.
Si dejas el campo vacío, la tarjeta no se queda sin aviso: sale con el texto genérico ¡Estás cerca de {branch}! Pasa por tus puntos. — el mismo que ves como placeholder en el editor.
El texto es solo de Apple: en Android, Google Wallet muestra su propio mensaje del sistema y no acepta uno personalizado. Además, Google toma hasta 10 ubicaciones por negocio; si tienes más sucursales, las 10 primeras son las que disparan el aviso en Android.
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:
| Campo | Descripción |
|---|---|
| Estilo de visualización | Contador (texto: "3 de 10 sellos") o Grid (cuadrícula visual de íconos). |
| Cantidad del grid | Cuántos sellos se dibujan en la tarjeta (1-21). Por defecto coincide con los sellos que pide tu programa. |
| Ícono activo | Imagen del sello completado (ej. taza de café llena). |
| Ícono inactivo | Imagen del sello pendiente (ej. taza vacía). |
| Color activo | Color de tinte de los sellos completados. |
| Color inactivo | Color de los sellos pendientes. |
| Color de fondo del sello | Color del contenedor del grid de sellos. |
La cantidad del grid es el número que tu cliente ve en su tarjeta, tanto en los sellos dibujados como en el texto "N / total". Si la cambias a un número distinto al de tu programa, la tarjeta mostrará el del diseñador — así que asegúrate de que sea el que realmente pides en caja. Después de cambiarla, vuelve a guardar el diseño para que los pases ya instalados se actualicen.
La meta de sellos del programa sigue al premio activo con más sellos. Para cambiarla, edita ese premio en Recompensas; el editor te avisa si el número de sellos de la tarjeta no coincide con él.
El reverso de la tarjeta
El reverso no se configura: se arma solo con lo que ya tienes en el panel — cómo funciona tu programa (con tus niveles, si los usas), tus premios con su costo y su tope por cliente, tus sucursales con dirección y horario, tus condiciones, tu enlace de reseñas de Google y el enlace personal al Portal Mi tarjeta del cliente. Cada sección se omite si te falta el dato.
Se detalla sección por sección en Plan Wallet, pero aplica a la tarjeta wallet de todos los planes.
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 diseño al final del editor. Mientras tengas algo pendiente, junto al botón aparece Cambios sin guardar. 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.
Borrador sin guardar
Mientras editas, Xtarly conserva un borrador de tus cambios en ese navegador. Si cierras la pestaña, recargas o se corta tu sesión antes de guardar, al volver a abrir el editor verás «Recuperamos un borrador sin guardar.» con tu diseño tal como lo dejaste, y la opción Descartar para volver a lo último guardado. El navegador también te avisa si intentas cerrar o recargar con cambios pendientes.
El borrador vive solo en ese navegador, por negocio, y se borra al guardar. Las imágenes que no terminaron de subirse no forman parte del borrador.
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.