How-To
Cómo crear una tarjeta de fidelidad digital: branding, Apple y Google Wallet, generador con IA y más de 70 personalizaciones
Paso a paso: cómo configurar tu primer programa en reloop — desde los colores de marca y los iconos de sello hasta el pase de Wallet. Tres vías, más de 70 opciones, vista previa en vivo.
Cuando creas una tarjeta de fidelidad digital, en realidad estás construyendo dos pases de Wallet a la vez entre bastidores: un .pkpass de Apple Wallet y un objeto de fidelización de Google Wallet. Ambos se generan a partir de una única configuración en el panel de reloop. Este artículo te guía por las tres vías para configurar un programa y explica cada una de las más de 70 opciones de configuración — desde el branding y la mecánica de sellos hasta las funciones antifraude. Antes de empezar: encontrarás la visión general completa del panel en el artículo pilar.
Tres vías hacia tu primera tarjeta de fidelidad
Tienes tres opciones para crear tu primer programa — y todas acaban en el mismo editor:
- Generador con IA a partir de la URL de tu página web — la vía más rápida, ~10 segundos
- Crear manualmente — control total, formulario en blanco
- Copiar de un ejemplo — usa uno de nuestros ejemplos de demostración como plantilla
Opción 1: Generador con IA
Haces clic en «Crear con IA», introduces la URL de tu página web y el sistema rastrea tu página de inicio. En 10–15 segundos obtienes un borrador que incluye:
- Nombre del negocio (del
<title>o el encabezado principal) - Color primario (a partir de tokens de Tailwind, variables CSS o el color dominante del logo)
- Color de acento (complementario o el segundo color de interfaz más presente)
- Logo (extraído de
<link rel="apple-touch-icon">o de la sección hero) - Detección del sector («cafetería», «restaurante», «peluquería»…) como sugerencia para el nombre del programa
- Texto de recompensa sugerido según tu sector
El borrador se guarda en caché durante 10 minutos en tu sessionStorage. Aterrizas en el editor de programas habitual con todos los campos rellenados previamente — y puedes ajustarlo todo antes de guardar. Si hay problemas de extracción (por ejemplo, un logo ausente), el editor muestra avisos.
Opción 2: Crear manualmente
Si ya tienes un branding claro, o tu negocio no figura públicamente (fidelización interna, programas early-bird), empieza con «Crear manualmente». Aterrizas en un editor en blanco y rellenas los campos tú mismo. Duración: ~3–5 minutos para un programa estándar.
Opción 3: Copiar de un ejemplo
En reloop.cards/beispiele encontrarás seis pases de demostración interactivos (cafetería, restaurante, peluquería, panadería, peluquería canina, food truck). Cada uno se puede clonar directamente en tu cuenta como plantilla — heredas la mecánica y el estilo de marca y solo los adaptas a tu negocio. Ahórrate diseñar desde cero.
Fundamentos del programa
Sea cual sea la vía que elijas, estos cuatro campos son la base de cada programa:
| Campo | Descripción | Ejemplo |
|---|---|---|
| Nombre del programa | Título visible en la tarjeta de Wallet y en el panel | «Tarjeta de fidelidad del café» |
| Subtítulo | Subencabezado opcional, en cursiva en el pase | «El 5.º es gratis» |
| Texto de recompensa | Lo que recibe el cliente cuando la tarjeta está completa | «1 café por cuenta de la casa» |
| URL de la página web | Enlace clicable en el reverso del pase, opcional | https://cafe-milchschaum.at |
Mecánica de sellos
| Campo | Rango / Predeterminado | Significado |
|---|---|---|
| Objetivo de sellos | 2–100 (predeterminado: 5) | Cuántos sellos hasta la recompensa |
| Máx. sellos por día | 1–10 (predeterminado: 1) | Límite diario antifraude por tarjeta |
| Caducidad en días | 0–730 (0 = nunca) | Los sellos caducan tras X días de inactividad |
| Momento de visualización del bonus | at_max | before_max | Estado de recompensa en N, o ya en N–1 |
| Bonus display show extra | Booleano | Sufijo «+1 sello» en el contador (X/Y+1) |
Branding: colores, logo, fondo
El branding es lo que marca la diferencia entre una «tarjeta de fidelidad» genérica y una tarjeta que parece tu negocio a primera vista.
| Campo | Formato | Efecto |
|---|---|---|
| Color de marca | Hex #RRGGBB | Fondo de la tarjeta; el contraste del texto se elige automáticamente |
| Color de acento | Hex #RRGGBB | Resaltes de los sellos, eyebrow de la recompensa, botones CTA en el pase |
| Logo | URL (Firebase Storage, máx. 2 MB) | Aparece en la cabecera del pase, escalado automáticamente para retina (1×, 2×, 3×) |
| Fondo del strip | URL, opcional | Imagen de fondo detrás de los sellos (p. ej. una foto de latte para una cafetería) |
| Modo de superposición del strip | none / darken / lighten / brand-tint | Cómo se mezcla la imagen de fondo con el color de marca |
| Opacidad de la superposición del strip | 0–80 % (predeterminado: 35 %) | Intensidad de la superposición |
Visualización de sellos: círculo con número o solo imagen
Tienes dos modos de visualización fundamentales:
circle-number (predeterminado)
Círculos numerados clásicos. Sin sellar: contorno. Sellado: relleno con el color de acento, número en el color de marca. Funciona bien para 5–10 sellos.
image-only
Solo iconos de sello (emoji o una URL personalizada), sin números. Sin sellar: escala de grises. Sellado: a todo color. Moderno y muy elegante para marcas boutique.
| Opciones adicionales | Significado |
|---|---|
| URL del icono de sello | Imagen personalizada (PNG, transparente), p. ej. el símbolo de tu logo |
| Emoji de sello | De una paleta curada (☕, 🥐, ✂️, 🐶…) o cualquier emoji |
| Escala del icono de sello | 50–200 % (predeterminado: 100 %) — más grande = más protagonista |
| Solo imagen: mostrar anillo de objetivo | En modo image-only: activa/desactiva el anillo de progreso alrededor de las casillas vacías |
Icono de objetivo: el símbolo del «último sello»
De forma predeterminada, la casilla justo antes de la recompensa muestra una estrella. Puedes reemplazar este icono:
| Campo | Efecto |
|---|---|
| Usar icono de objetivo personalizado | Interruptor: tu propio icono en lugar de la estrella |
| URL del icono de objetivo | URL de imagen (p. ej. tu logo como corona) |
| Emoji del icono de objetivo | O un emoji (p. ej. 🏆) |
| Tinte de acento del icono de objetivo | Colorea el icono con tu color de acento |
Pantalla de recompensa: el momento de la recompensa
Cuando la tarjeta está completa, el pase cambia al estado de recompensa. Aquí tienes tantas opciones de personalización como para el estado de progreso:
| Campo | Significado |
|---|---|
| URL de fondo de la recompensa | Imagen hero personalizada para el estado de recompensa (p. ej. una foto de tu bebida estrella) |
| Color de fondo de la recompensa | Color sólido como reserva cuando no hay imagen |
| Modo de superposición de la recompensa | Igual que en el strip anterior |
| Opacidad de la superposición de la recompensa | 0–80 % |
| Texto eyebrow de la recompensa | Pequeño elemento de titular sobre la recompensa (p. ej. «🎉 Enhorabuena») |
| Color de texto de la recompensa | Color hex para la línea grande de la recompensa |
| Sunburst de la recompensa | Animación radiante detrás de la recompensa — festiva |
| Ocultar eyebrow de la recompensa | Interruptor: omite el eyebrow (para un diseño minimalista) |
| Ocultar texto de la recompensa | Interruptor: solo imagen, sin texto (cuando la imagen ya lo dice todo) |
Integración con Apple Wallet: el formato .pkpass
Para los pases de Wallet, Apple requiere su formato propietario PassKit — un archivo ZIP firmado con una estructura estrictamente definida. reloop lo genera del lado del servidor:
- Pass.json con todos los campos configurados (programa, recompensa, contador, geofences, URL del web service para las actualizaciones)
- Imagen del strip (1×, 2×, 3×) — renderizada con
sharpa partir de tu branding - Logo (1×, 2×, 3×) — escalado automáticamente
- Icono (1×, 2×, 3×) — para el centro de notificaciones
- Firma con tu certificado de Pass Type (gestionado por reloop)
Cuando activas el generador de pases, se ejecuta el siguiente flujo de pipeline:
- Datos del programa desde el editor → AppleWalletInput
- Descarga del logo desde Firebase Storage (timeout de 8s, caché con TTL de 15min)
- Redimensionado con Sharp a todos los tamaños retina
renderAppleStripSet()renderiza las imágenes del strip con tus colores, sellos, icono de objetivo y sunburst (si está en el estado de recompensa)- Pass.json se rellena con todos los campos
- El generador de PassKit firma el ZIP
- Se entrega el
.pkpass
El cliente toca «Añadir a Wallet» — sin instalar ninguna app. iOS reconoce automáticamente el tipo MIME application/vnd.apple.pkpass.
Actualizaciones push vía APNs
En cuanto llega un nuevo sello, reloop envía un push de APNs a los servidores de Apple. Apple despierta el pase en el dispositivo, que carga los nuevos datos de forma silenciosa en segundo plano. El cliente ve el nuevo recuento de sellos la próxima vez que abre la tarjeta — sin actualizar la app, sin reinstalar.
Integración con Google Wallet: LoyaltyClass + LoyaltyObject
Google usa un modelo centrado en la API. Por cada programa creamos una LoyaltyClass (branding estático) y por cada tarjeta un LoyaltyObject (el recuento dinámico de sellos). Con cada sello, el backend hace una petición PATCH — y Google sincroniza la tarjeta automáticamente en todos los dispositivos del usuario.
Qué contiene la LoyaltyClass
- IssuerName + ProgramName (alemán e inglés)
- HexBackgroundColor (tu color de marca)
- ProgramLogo (URL de Firebase Storage)
- HeroImage (tu vista previa del strip)
- TextModulesData (explicación «Cómo funciona»)
- ValueAddedModuleData (bloque promocional opcional, ver más abajo)
- ScreenShotEligibility (
INELIGIBLEcuando disable-sharing está activo) - MultipleDevicesAndHoldersAllowedStatus (
ONE_USER_ALL_DEVICEScuando disable-sharing está activo)
Qué contiene el LoyaltyObject
- Contador de sellos (p. ej. «3/5»)
- Estado actual (
ACTIVE, oEXPIREDuna vez alcanzada la fecha de caducidad) - Código de barras (QR estático o TOTP rotatorio, según el programa)
- HeroImage (con cache buster: cambia con cada recuento de sellos para que Google vea el nuevo estado de inmediato)
- LinksModuleData (página web, ver la tarjeta online, correo de soporte, política de privacidad, aviso legal)
- ValidTimeInterval (fecha de caducidad)
- MerchantLocations (≤10 geofences con lat/lon)
Notificaciones push vía Wallet broadcast
A diferencia de Apple, Google puede enviar notificaciones push directamente a la pantalla de bloqueo. En el panel escribes una cabecera y un cuerpo, eliges los programas destino — y la notificación aparece para todos los usuarios de Google Wallet como un banner directamente en la pantalla de bloqueo. Más sobre esto en el spoke de reporting.
Vista previa en vivo: lo que escribes es lo que ves
Mientras escribes en el editor, a la derecha se ejecuta el WalletSimulator — el mismo componente que usamos en /beispiele para los pases de demostración. Alternas entre Apple y Google, recorres todos los estados de sellos (0/5, 1/5, …, 5/5 + recompensa) y ves al instante cómo se comportan los colores, iconos y textos en cada paso.
Editar programa
El renderizado de la imagen del strip se ejecuta del lado del servidor en /api/wallet-preview/strip.png y está en caché durante 200 ms — las entradas rápidas de arrastre (p. ej. el selector de color) se agrupan en una única petición para que todo fluya con suavidad.
Captura de correo electrónico y niveles de fidelización
Dos funciones especialmente potentes para programas avanzados:
Modos de captura de correo electrónico
| Modo | Comportamiento |
|---|---|
off | Sin captura de correo. La tarjeta es 100 % anónima. |
optional | Tras guardar en Wallet, se ofrece un campo de correo. Se pueden dar sellos bonus como incentivo. |
required | La tarjeta solo se puede guardar con un correo. Alcance máximo para tu newsletter. |
Sellos de recompensa por captura de correo = la cantidad de sellos bonus que recibe el cliente por introducir su correo. Valores habituales: 1–2 sellos. Muy eficaz como motor de conversión.
Niveles de fidelización (Bronce / Plata / Oro)
En el plan Premium puedes crear programas multinivel: una tarjeta tiene niveles, y el cliente avanza al siguiente nivel cada vez que completa una fila de sellos. La tierConfig es un bloque JSON que define el texto de recompensa, el umbral y el nombre visible por cada nivel.
Ejemplo (una cafetería ficticia): Bronce (5 cafés → café gratis), Plata (15 cafés → +1 croissant gratis), Oro (30 cafés → taza personalizada con tu nombre). Muy potente para fidelizar a los clientes existentes.
Antifraude: código QR rotatorio, sellado por NFC, bloquear el uso compartido
Tres funciones de seguridad que evitan el abuso:
Código QR rotatorio (TOTP)
El código QR de la tarjeta rota cada 30 segundos. Cualquier intento de sello con un código antiguo falla. Esto evita capturas de pantalla y el reenvío de fotos. Disponible a partir del plan Business. TOTP es el mismo estándar que usan las apps de autenticación — muy seguro.
Sellado por NFC
En lugar de un código QR, el cliente acerca su móvil a una etiqueta NFC en tu mostrador. El sello se registra al instante, sin que tú ni el cliente tengáis que abrir ninguna app. El único requisito es una etiqueta NFC aprovisionada por nosotros. Incluido en todos los planes.
Bloquear el uso compartido
Para Google Wallet: screenShotEligibility: INELIGIBLE y multipleDevicesAndHoldersAllowedStatus: ONE_USER_ALL_DEVICES. Esto significa que las tarjetas no se pueden reenviar y las capturas de pantalla bloquean la visualización del pase. Protección máxima contra el uso compartido de tarjetas. Incluido en todos los planes.
Antifraude estándar (activo en todos los planes)
- Tokens QR firmados con HMAC-SHA256 (TTL de 60s)
- Límite de máximo de sellos por día por programa
- Registro de auditoría con ID del personal, hora e IP para cada sello
- Sin activación anónima de sellos — solo el personal con sesión iniciada puede sellar
Publicar, código QR, pausar/finalizar
Cuando estés satisfecho, haces clic en Publicar. El programa pasa al estado active, se genera el código QR (URL /s/[slug]/scan como QR) y puedes:
- Descargarlo como PNG (el formato estándar para impresoras)
- Descargarlo como SVG (sin pérdida y escalable, perfecto para el diseño de pósters)
- Imprimirlo directamente a través del diálogo de impresión del navegador
- Compartirlo por correo electrónico (enlace directo, sin necesidad de iniciar sesión)
Pausar o finalizar un programa
- Pausar → las tarjetas existentes se mantienen intactas, se bloquean los nuevos sellos. Reversible.
- Finalizar → el programa pasa a solo lectura. Las tarjetas aún pueden canjear su saldo actual, pero no pueden acumular nuevos sellos. Irreversible.
- Eliminar → borrado completo y definitivo, incluidas todas las tarjetas asociadas y los historiales de sellos. Diálogo de confirmación de dos factores.
Crear tarjetas de prueba
Antes de salir en directo, deberías recorrer tú mismo todo el flujo del cliente. En el editor de programas, haz clic en «Crear tarjeta de prueba» — obtienes una tarjeta totalmente funcional sin ID de cliente real que puedes sellar, canjear y eliminar tú mismo. Las tarjetas de prueba no cuentan para tu cupo de tarjetas y se reportan por separado.
Resumen: tu primer programa en 5 minutos
Si vas paso a paso:
- Generador con IA → introduce tu URL, revisa el borrador
- Ajusta los fundamentos del programa (nombre, recompensa, objetivo de sellos)
- Finaliza tu branding (logo, colores, emoji de sello)
- Comprueba la vista previa en vivo — recorre todos los estados de sellos
- Elige tus ajustes antifraude (el estándar suele bastar)
- Publica → imprime el QR → entrega tu primera tarjeta