# 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.

Canonical: https://reloop.cards/es/blog/digitale-stempelkarte-erstellen
Published: 2026-04-27
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Cómo crear una tarjeta de fidelidad digital: branding, Apple y Google Wallet, generador con IA y más de 70 personalizaciones',
  description:
    '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.',
  publishedAt: '2026-04-27',
  updatedAt: '2026-08-02',
  category: 'How-To',
  tags: [
    'Crear un programa',
    'Apple Wallet',
    'Google Wallet',
    'Branding',
    'Generador con IA',
    'Tarjeta de fidelidad',
  ],
  readingMinutes: 12,
};

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](/blog/merchant-dashboard-funktionen).

## Tres vías hacia tu primera tarjeta de fidelidad

Tienes tres opciones para crear tu primer programa — y todas acaban en el mismo editor:

1. **Generador con IA a partir de la URL de tu página web** — la vía más rápida, ~10 segundos
2. **Crear manualmente** — control total, formulario en blanco
3. **Copiar de un ejemplo** — usa uno de nuestros [ejemplos de demostración](/beispiele) como plantilla

### Opción 1: Generador con IA

<Callout tone="tip" title="Cuándo funciona bien el generador con IA">
Cuando tu página web tiene un logo claro, colores de marca en las secciones de cabecera/hero y un nombre de negocio reconocible. Funciona especialmente bien para cafeterías, panaderías, peluquerías y restaurantes con una presencia web consolidada. En páginas muy minimalistas o con mucha carga gráfica, extraemos los colores directamente del CSS — en cuyo caso los resultados pueden variar.
</Callout>

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](/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) |

<Callout tone="info" title="`at_max` vs. `before_max`">
**`at_max`** (predeterminado): el cliente ve la pantalla de recompensa solo una vez que ha conseguido el último sello. El modelo clásico.<br />
**`before_max`**: la tarjeta muestra la recompensa ya con N–1 sellos. Útil cuando el último sello ocurre al canjear (p. ej. «La 5.ª vez te sellamos Y te llevas un café gratis» — mostrar la recompensa en el 4.º sello indica: la próxima vez es la buena).
</Callout>

## 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.

<StampMockup
  merchant="Cafe Milchschaum"
  program="Tarjeta de fidelidad del café"
  reward="El 5.º café gratis"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={2}
  required={5}
  emoji="☕"
  caption="Color de marca espresso (#5B3826), acento caramelo (#E8C180), emoji de sello ☕"
/>

| 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 |

<Callout tone="tip" title="Consejos para el logo">
- **Un PNG con fondo transparente** funciona mejor — sin cajas blancas alrededor de tu logo<br />
- **Cuadrado o 3:1 horizontal** — ambos formatos se escalan a 160×50pt<br />
- **Al menos 2× de resolución** (p. ej. 320×100 px) para que se mantenga nítido en pantallas retina<br />
- **Comprueba el contraste con el color de marca** — los logos claros necesitan colores de marca oscuros y viceversa
</Callout>

## 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 |

<StampMockup
  merchant="Cafe Milchschaum"
  program="Tarjeta de fidelidad del café"
  reward="El 5.º café gratis"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={5}
  required={5}
  state="reward"
  caption="Estado de recompensa: sunburst, texto eyebrow, la gran recompensa en el centro."
/>

## 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 `sharp` a 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:

1. Datos del programa desde el editor → AppleWalletInput
2. Descarga del logo desde Firebase Storage (timeout de 8s, caché con TTL de 15min)
3. Redimensionado con Sharp a todos los tamaños retina
4. `renderAppleStripSet()` renderiza las imágenes del strip con tus colores, sellos, icono de objetivo y sunburst (si está en el estado de recompensa)
5. Pass.json se rellena con todos los campos
6. El generador de PassKit firma el ZIP
7. 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 (`INELIGIBLE` cuando disable-sharing está activo)
- MultipleDevicesAndHoldersAllowedStatus (`ONE_USER_ALL_DEVICES` cuando disable-sharing está activo)

### Qué contiene el LoyaltyObject

- Contador de sellos (p. ej. «3/5»)
- Estado actual (`ACTIVE`, o `EXPIRED` una 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](/blog/loyalty-reporting-push-newsletter#wallet-push-broadcasts).

## 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](/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.

<DashboardMock variant="program-editor" caption="El editor con vista previa en vivo. Cada cambio a la izquierda se renderiza en la vista previa de la derecha en menos de 300 ms." />

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)

<Callout tone="info" title="Recomendación para imprimir el QR">
- **Tamaño mínimo:** 4×4 cm para expositores de mesa, 8×8 cm para pegatinas de puerta<br />
- **Alto contraste:** QR oscuro sobre fondo blanco, **nunca** un QR blanco sobre fondo de color<br />
- **Zona de silencio:** al menos 4× el tamaño del módulo QR como margen alrededor<br />
- **Prueba de ensayo:** escanea con dos móviles distintos (iOS y Android) antes de imprimir
</Callout>

### 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:

1. **Generador con IA** → introduce tu URL, revisa el borrador
2. Ajusta los **fundamentos del programa** (nombre, recompensa, objetivo de sellos)
3. Finaliza tu **branding** (logo, colores, emoji de sello)
4. Comprueba la **vista previa en vivo** — recorre todos los estados de sellos
5. Elige tus ajustes **antifraude** (el estándar suele bastar)
6. **Publica** → imprime el QR → entrega tu primera tarjeta

<Callout tone="success" title="Próximos pasos">
- [Cómo recuperar clientes existentes con push y newsletter →](/blog/loyalty-reporting-push-newsletter)<br />
- [Visión general completa de todas las funciones del panel →](/blog/merchant-dashboard-funktionen)<br />
- [Ejemplos de 6 sectores →](/beispiele)<br />
- [Empieza gratis →](/signup)
</Callout>