Personaliza tus tarjetas Wallet: logo, colores, icono de sello — tu marca en Apple y Google Wallet

Una tarjeta de fidelidad digital con el look por defecto de reloop funciona técnicamente, pero es un desperdicio de potencial de marketing. Cada vez que un cliente abre la tarjeta en Apple Wallet o Google Wallet podría estar viendo tu marca: tu logo, tus colores de marca, tu imagen de fondo. Esta guía te muestra cómo adaptar por completo una tarjeta Wallet a tu negocio en 10 minutos, y qué specs de Apple/Google necesitas conocer para que tu logo no lo recorten las máscaras internas de Wallet.

Qué hacen de forma distinta Apple Wallet y Google Wallet

Antes de subir nada es importante entender esto: Apple y Google renderizan tu logo de forma completamente distinta.

Apple Wallet

• Tu logo aparece arriba a la izquierda, sobre el fondo con el color de marca
• Formato: banner rectangular (máx. 160 × 50 pt, es decir 480 × 150 px @ 3× Retina)
• Relación de aspecto: aproximadamente 3.2 : 1 (horizontal)
• Apple muestra el logo tal cual, sin máscara: si le das un logo cuadrado, se verá pequeño y pobre

Google Wallet

• Tu logo aparece arriba a la izquierda dentro de un círculo
• Formato: cuadrado (mínimo 660 × 660 px)
• Google lo enmascara automáticamente en un círculo, con un 15 % de área segura alrededor del borde
• Si le das un logo de banner horizontal, o bien lo aplasta o lo recorta por arriba y por abajo

El dilema: un único logo no puede ser a la vez banner de Apple Y círculo de Google.

La solución de reloop: subes tu original (idealmente cuadrado o ligeramente rectangular, mínimo 660 × 660 px). El servidor lo normaliza a 1024 × 1024 y genera automáticamente tres variantes de plataforma al guardar:

• logo-apple.png — PNG de 480 × 150, ajustado dentro de un lienzo transparente (para PassKit)
• logo-google.png — PNG cuadrado de 660 × 660 con un 15 % de área segura (para la API de Google Wallet)
• logo-thumb.webp — WebP de 64 × 64 para mostrar en la interfaz del panel

Así que no tienes que elegir entre los dos mundos. Sube un buen cuadrado y el resto ocurre automáticamente.

Paso a paso: adapta la tarjeta a tu marca

1. Abre el programa + pestaña Branding

En el panel: Programas → elige el programa → pestaña Branding (o haz clic en la pestaña "Branding" a la izquierda dentro del editor).

2. Sube tu logo

Arrastra y suelta en el hueco del logo, o haz clic para abrir el selector de archivos. Durante la subida pasan tres cosas en paralelo:

1. Redimensionado en el cliente a máx. 1024 × 1024 (ahorra bytes de almacenamiento + ancho de banda de subida)
2. Se eliminan los datos EXIF (sin filtraciones accidentales de geo-etiquetas)
3. El servidor genera las 3 variantes de plataforma y las guarda como archivos de almacenamiento separados

En el simulador de wallet en vivo, a la derecha, verás al instante cómo queda el logo en Apple Wallet (banner arriba a la izquierda) y en Google Wallet (círculo arriba a la izquierda). Si tu logo es demasiado ancho y se ve recortado en el círculo de Google: vuelve a exportar el logo en un formato cuadrado y súbelo de nuevo.

Consejos de logo:

• Un fondo transparente siempre es mejor. El color de marca detrás del logo debe transparentarse.
• Un margen mínimo del 10 % hasta el borde del logo. Tanto Apple como Google tienen bordes de máscara más suaves o más duros; sin margen, se recortan los bordes exteriores.
• El SVG también funciona y se rasteriza a PNG en el servidor (con densidad 3×).
• Logos oscuros sobre colores de marca claros y viceversa: asegúrate de que el contraste aguante. Un logo negro sobre un fondo de marca rojo oscuro no es legible.

3. Elige un color de marca + color de acento

Dos selectores de color:

• Color de marca (brandColor): el fondo de tu tarjeta Wallet. En Apple Wallet es toda la mitad superior. En Google Wallet es toda la tarjeta. Por defecto: #55182c (vino de Stempelkarte).
• Color de acento (accentColor): el color de los círculos de sello rellenos, de la estrella marcadora del objetivo y (en algunas versiones de Wallet) de la animación del ribbon de recompensa. Por defecto: #f8b627 (oro de Stempelkarte).

Buena práctica: color de marca = tu marca principal (fondo del logo), color de acento = un complementario que contraste. Si tu marca es, por ejemplo, azul oscuro, usa oro o un naranja cálido como acento, no "el mismo azul, un poco más claro".

4. Configura el icono de sello (opcional)

Por defecto es una simple estrella. Tienes tres alternativas:

1. Sube tu propio icono de sello (misma ruta de subida que el logo). PNG/JPG/SVG, máx. 10 MB. Se normaliza a 256×256.
2. Emoji como sello — introduce un único emoji (p. ej. ☕ para una cafetería, 🥐 para una panadería, ✂️ para una peluquería). El renderizador usa Pango + Noto Color Emoji.
3. Deja la estrella por defecto si aún no tienes un concepto.

Consejo: los iconos personalizados con alto contraste funcionan mejor. Un sello de trazo fino desaparece en la pequeña pantalla de la tarjeta; una forma sólida y contundente se lee bien.

5. Elige el modo de visualización del sello

Dos opciones:

• circle-number (por defecto): círculo de sello con el icono dentro, círculo vacío para lo aún no canjeado. Clásico.
• image-only: el icono completo como sello relleno, una variante en escala de grises cuando está vacío. Moderno, acorde a la marca, y solo merece la pena si tu icono es visualmente potente.

El simulador en vivo muestra ambos modos al instante.

6. Imagen de fondo (opcional)

Puedes subir una imagen de fondo para el área del strip (donde van los sellos), por ejemplo un patrón sutil o una foto desenfocada de tu cafetería. Formato: JPG / PNG / WebP, lado largo máx. 1280 px.

El modo de superposición + la intensidad de superposición (0-80 %) controla cuánto pesa tu color de marca sobre la imagen:

• none: imagen completamente visible (bien para patrones muy sutiles)
• darken: imagen oscurecida por el color de marca (bien para fotos claras)
• lighten: imagen aclarada (bien para fotos oscuras)
• brand-tint (por defecto): la imagen recibe un tinte con el color de marca

7. Personaliza el estado de recompensa

¿Qué pasa visualmente cuando la tarjeta está llena y el cliente puede reclamar su recompensa?

• Una imagen de fondo de recompensa propia (p. ej. una foto de confeti o una foto de tu producto de recompensa, como un "capuchino gratis")
• Un color de fondo de recompensa (un color sólido en lugar de una imagen, que anula el degradado de marca por defecto)
• Texto de eyebrow personalizado — en lugar del "RECOMPENSA DISPONIBLE" por defecto → tu propio eslogan, como "TU CAFÉ TE ESPERA"
• Un titular de recompensa personalizado — en lugar de la recompensa específica del programa → tu propio texto de marketing
• Animación de sunburst + confeti activada/desactivada
• Color del eyebrow, tamaño del titular, posición — ajustables por separado en cada eje

Esta es la diferencia entre "la tarjeta está llena" y "la tarjeta lo celebra con el cliente".

8. Desactiva la marca de agua (solo Premium)

Por defecto, tu tarjeta muestra una pequeña marca de agua «reloop» abajo a la derecha. Con el interruptor de marca de agua (hideWatermark) la ocultas: una tarjeta de marca blanca sin nuestra marca. Disponible solo en el plan Premium.

Vista previa y prueba en vivo

En el editor:

• El simulador en vivo muestra los marcos de Apple y Google uno al lado del otro (o mediante un toggle)
• Un scrubber de sellos de 0 al máximo → ves cómo evoluciona la tarjeta a medida que se sella
• Un toggle del estado de recompensa → ves cómo queda la tarjeta cuando está llena

En un teléfono real:

1. Guarda el programa
2. Crea una tarjeta de prueba (en la pestaña Tarjetas → "Nueva tarjeta")
3. Escanea el código QR con tu iPhone (o Android)
4. Toca "Añadir a Wallet"
5. Abre la tarjeta en la app de Wallet → esto es exactamente lo que ven tus clientes

Si algo se ve distinto al simulador: reporta un bug a support@reloop.cards — lo revisamos de inmediato, porque nuestra promesa es "idéntico píxel a píxel entre la vista previa y el pase".

Errores de branding habituales

• Subir el logo demasiado pequeño (200 × 200 px). El servidor tiene que escalarlo hacia arriba → logo borroso. Mínimo 660 × 660 px.
• Elegir un logo cuadrado, pero el banner de Apple se ve diminuto. No es un bug: el banner de Apple es 3.2:1, así que un cuadrado lo llena en vertical pero deja el 75 % del espacio horizontal vacío. Si priorizas Apple, haz un logo más ancho.
• Color de marca igual al color de acento. Entonces los sellos no se ven. El acento tiene que contrastar.
• Imagen de fondo demasiado recargada. Los sellos quedan tapados y la tarjeta se ve sobrecargada. Usa un patrón o una imagen + 50 % de superposición.

Cuándo NO necesitas personalización de marca

Si:

• Solo estás probando el servicio (el diseño por defecto ya se ve bien)
• Tienes prisa por lanzar y quieres hacer el branding más tarde
• Aún no tienes una identidad de marca establecida (en ese caso el branding por defecto no le hace daño a nadie)

El branding se puede mejorar de forma iterativa: en 5 minutos puedes añadir un logo + 2 colores, y al instante se verá un 80 % tan bien como un programa completamente configurado.