# Créer une carte de fidélité numérique : branding, Apple & Google Wallet, générateur IA et plus de 70 personnalisations

> Étape par étape : comment créer votre premier programme dans reloop — des couleurs de marque aux icônes de tampon en passant par le pass Wallet. Trois méthodes, plus de 70 options, aperçu en direct.

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

---
export const metadata = {
  title:
    'Créer une carte de fidélité numérique : branding, Apple & Google Wallet, générateur IA et plus de 70 personnalisations',
  description:
    'Étape par étape : comment créer votre premier programme dans reloop — des couleurs de marque aux icônes de tampon en passant par le pass Wallet. Trois méthodes, plus de 70 options, aperçu en direct.',
  publishedAt: '2026-04-27',
  updatedAt: '2026-08-02',
  category: 'Tutoriel',
  tags: [
    'Créer un programme',
    'Apple Wallet',
    'Google Wallet',
    'Branding',
    'Générateur IA',
    'Carte de fidélité',
  ],
  readingMinutes: 12,
};

Lorsque vous créez une **carte de fidélité numérique**, vous construisez en réalité deux pass Wallet en même temps en arrière-plan : un `.pkpass` Apple Wallet et un objet de fidélité Google Wallet. Les deux sont générés à partir d'une seule configuration dans le tableau de bord reloop. Cet article vous guide à travers les trois méthodes pour créer un programme et explique chacune des plus de 70 options de configuration — du branding à la mécanique des tampons en passant par les fonctionnalités anti-fraude. Avant de commencer : vous trouverez la vue d'ensemble complète du tableau de bord dans l'[article pilier](/blog/merchant-dashboard-funktionen).

## Trois méthodes pour créer votre première carte de fidélité

Vous avez trois options pour créer votre premier programme — et toutes aboutissent au même éditeur au final :

1. **Générateur IA à partir de l'URL de votre site** — la méthode la plus rapide, ~10 secondes
2. **Création manuelle** — contrôle total, formulaire vierge
3. **Copier depuis un exemple** — utilisez l'un de nos [exemples de démonstration](/beispiele) comme modèle

### Option 1 : générateur IA

<Callout tone="tip" title="Quand le générateur IA fonctionne bien">
Lorsque votre site web possède un logo clair, des couleurs de marque dans les sections en-tête/hero et un nom d'établissement reconnaissable. Il fonctionne particulièrement bien pour les cafés, les boulangeries, les salons de coiffure et les restaurants disposant d'une présence web établie. Pour les sites très minimalistes ou riches en graphismes, nous extrayons les couleurs directement du CSS — les résultats peuvent alors varier.
</Callout>

Vous cliquez sur « Créer avec l'IA », saisissez l'URL de votre site web, et le système analyse votre page d'accueil. En 10 à 15 secondes, vous obtenez un brouillon contenant :

- Le nom de l'établissement (extrait de la balise `<title>` ou du titre principal)
- La couleur primaire (à partir des tokens Tailwind, des variables CSS ou de la couleur dominante du logo)
- La couleur d'accent (complémentaire ou deuxième couleur d'interface la plus marquée)
- Le logo (extrait de `<link rel="apple-touch-icon">` ou de la section hero)
- La détection du secteur d'activité (« café », « restaurant », « coiffeur »…) comme suggestion de nom de programme
- Un texte de récompense suggéré selon le secteur d'activité

Le brouillon est mis en cache pendant 10 minutes dans votre `sessionStorage`. Vous arrivez dans l'éditeur de programme habituel avec tous les champs préremplis — et vous pouvez tout ajuster avant d'enregistrer. En cas de problèmes liés à l'extraction (par exemple un logo manquant), l'éditeur affiche des avertissements.

### Option 2 : création manuelle

Si vous disposez déjà d'un branding clair ou si votre établissement n'est pas présenté publiquement (fidélité en interne, programmes early-bird), commencez par « Création manuelle ». Vous arrivez dans un éditeur vierge et remplissez les champs vous-même. Durée : ~3 à 5 minutes pour un programme standard.

### Option 3 : copier depuis un exemple

Sur [reloop.cards/beispiele](/beispiele), vous trouverez six pass de démonstration interactifs (café, restaurant, coiffeur, boulangerie, toiletteur pour chiens, food truck). Chacun peut être cloné directement dans votre compte comme modèle — vous héritez de la mécanique et du style de marque et vous n'avez plus qu'à les adapter à votre établissement. Épargnez-vous la conception à partir de zéro.

## Fondamentaux d'un programme

Quelle que soit la méthode choisie, ces quatre champs constituent la base de chaque programme :

| Champ | Description | Exemple |
| --- | --- | --- |
| **Nom du programme** | Titre visible sur la carte Wallet et dans le tableau de bord | « Carte fidélité café » |
| **Sous-titre** | Sous-titre facultatif, affiché en italique sur le pass | « Le 5e est offert » |
| **Texte de récompense** | Ce que le client obtient lorsque la carte est complète | « 1 café offert » |
| **URL du site** | Lien cliquable au dos du pass, facultatif | `https://cafe-milchschaum.at` |

### Mécanique des tampons

| Champ | Plage / valeur par défaut | Signification |
| --- | --- | --- |
| **Objectif de tampons** | 2–100 (par défaut : 5) | Nombre de tampons requis pour la récompense |
| **Nombre max. de tampons par jour** | 1–10 (par défaut : 1) | Limite quotidienne anti-fraude par carte |
| **Expiration en jours** | 0–730 (0 = jamais) | Les tampons expirent après X jours d'inactivité |
| **Moment d'affichage du bonus** | `at_max` \| `before_max` | État de récompense à N, ou déjà à N–1 |
| **Affichage du bonus : afficher extra** | Booléen | Suffixe « +1 tampon » dans le compteur (X/Y+1) |

<Callout tone="info" title="`at_max` vs `before_max`">
**`at_max`** (par défaut) : le client ne voit l'écran de récompense qu'une fois le dernier tampon obtenu. Le modèle classique.<br />
**`before_max`** : la carte affiche la récompense dès N–1 tampons. Utile lorsque le dernier tampon a lieu au moment de l'échange (par ex. « La 5e fois, on vous tamponne ET vous recevez un café offert » — afficher la récompense au 4e tampon signale : la prochaine fois, c'est la bonne).
</Callout>

## Branding : couleurs, logo, arrière-plan

Le branding fait toute la différence entre une « carte de fidélité » générique et une carte qui ressemble à **votre établissement** au premier coup d'œil.

<StampMockup
  merchant="Cafe Milchschaum"
  program="Carte fidélité café"
  reward="Le 5e café offert"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={2}
  required={5}
  emoji="☕"
  caption="Couleur de marque espresso (#5B3826), accent caramel (#E8C180), emoji de tampon ☕"
/>

| Champ | Format | Effet |
| --- | --- | --- |
| **Couleur de marque** | Hex `#RRGGBB` | Arrière-plan de la carte ; le contraste du texte est choisi automatiquement |
| **Couleur d'accent** | Hex `#RRGGBB` | Surbrillances des tampons, eyebrow de récompense, boutons d'action sur le pass |
| **Logo** | URL (Firebase Storage, max. 2 Mo) | Apparaît dans l'en-tête du pass, mis à l'échelle automatiquement pour le retina (1×, 2×, 3×) |
| **Arrière-plan du bandeau** | URL, facultatif | Image d'arrière-plan derrière les tampons (par ex. une photo de latte pour un café) |
| **Mode de superposition du bandeau** | `none` / `darken` / `lighten` / `brand-tint` | Comment l'image d'arrière-plan se mélange à la couleur de marque |
| **Opacité de superposition du bandeau** | 0–80 % (par défaut : 35 %) | Intensité de la superposition |

<Callout tone="tip" title="Conseils pour le logo">
- **Un PNG à fond transparent** fonctionne le mieux — pas de cadres blancs autour de votre logo<br />
- **Carré ou horizontal 3:1** — les deux formats sont mis à l'échelle à 160×50pt<br />
- **Résolution 2× minimum** (par ex. 320×100 px) pour rester net sur les écrans retina<br />
- **Vérifiez le contraste avec la couleur de marque** — les logos clairs nécessitent des couleurs de marque foncées, et inversement
</Callout>

## Affichage des tampons : cercle avec numéro ou image uniquement

Vous avez deux modes d'affichage fondamentaux :

### `circle-number` (par défaut)

Des cercles numérotés classiques. Non tamponné : contour. Tamponné : rempli de la couleur d'accent, numéro dans la couleur de marque. Fonctionne bien pour 5 à 10 tampons.

### `image-only`

Uniquement des icônes de tampon (emoji ou URL personnalisée), sans numéro. Non tamponné : niveaux de gris. Tamponné : pleine couleur. Moderne et très élégant pour les marques boutique.

| Options supplémentaires | Signification |
| --- | --- |
| **URL de l'icône de tampon** | Image personnalisée (PNG, transparent), par ex. votre symbole de logo |
| **Emoji de tampon** | Depuis une palette organisée (☕, 🥐, ✂️, 🐶…) ou n'importe quel emoji |
| **Échelle de l'icône de tampon** | 50–200 % (par défaut : 100 %) — plus grand = plus dominant |
| **Image uniquement : afficher l'anneau d'objectif** | En mode `image-only` : active/désactive l'anneau de progression autour des emplacements vides |

### Icône d'objectif : le symbole du « dernier tampon »

Par défaut, l'emplacement juste avant la récompense affiche une étoile. Vous pouvez remplacer cette icône :

| Champ | Effet |
| --- | --- |
| **Utiliser une icône d'objectif personnalisée** | Bascule : votre propre icône au lieu de l'étoile |
| **URL de l'icône d'objectif** | URL de l'image (par ex. votre logo sous forme de couronne) |
| **Emoji de l'icône d'objectif** | Ou un emoji (par ex. 🏆) |
| **Teinte d'accent de l'icône d'objectif** | Teinte l'icône dans votre couleur d'accent |

<StampMockup
  merchant="Cafe Milchschaum"
  program="Carte fidélité café"
  reward="Le 5e café offert"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={5}
  required={5}
  state="reward"
  caption="État de récompense : sunburst, texte eyebrow, la grande récompense au centre."
/>

## Écran de récompense : le moment de la récompense

Lorsque la carte est complète, le pass bascule dans l'**état de récompense**. Vous disposez ici d'autant d'options de personnalisation que pour l'état de progression :

| Champ | Signification |
| --- | --- |
| **URL de l'arrière-plan de récompense** | Image hero personnalisée dans l'état de récompense (par ex. une photo de votre boisson signature) |
| **Couleur d'arrière-plan de récompense** | Couleur unie en secours en l'absence d'image |
| **Mode de superposition de récompense** | Comme pour le bandeau ci-dessus |
| **Opacité de superposition de récompense** | 0–80 % |
| **Texte eyebrow de récompense** | Petit élément de titre au-dessus de la récompense (par ex. « 🎉 Félicitations ») |
| **Couleur du texte de récompense** | Couleur hex pour la grande ligne de récompense |
| **Sunburst de récompense** | Animation rayonnante derrière la récompense — festive |
| **Masquer l'eyebrow de récompense** | Bascule : omettre l'eyebrow (pour un design minimaliste) |
| **Masquer le texte de récompense** | Bascule : image seule sans texte (lorsque l'image dit déjà tout) |

## Intégration Apple Wallet : le format `.pkpass`

Pour les pass Wallet, Apple exige son format propriétaire **PassKit** — un fichier ZIP signé à la structure strictement définie. reloop le génère côté serveur :

- **Pass.json** avec tous les champs configurés (programme, récompense, compteur, geofences, URL du service web pour les mises à jour)
- **Image du bandeau** (1×, 2×, 3×) — rendue via `sharp` à partir de votre branding
- **Logo** (1×, 2×, 3×) — mis à l'échelle automatiquement
- **Icône** (1×, 2×, 3×) — pour le centre de notifications
- **Signature** à l'aide de votre certificat Pass Type (géré par reloop)

Lorsque vous déclenchez le générateur de pass, le pipeline suivant s'exécute :

1. Les données du programme depuis l'éditeur → AppleWalletInput
2. Récupération du logo depuis Firebase Storage (délai de 8 s, cache TTL de 15 min)
3. Redimensionnement Sharp vers toutes les tailles retina
4. `renderAppleStripSet()` génère les images de bandeau avec vos couleurs, tampons, icône d'objectif et sunburst (si en état de récompense)
5. Pass.json est rempli avec tous les champs
6. Le générateur PassKit signe le ZIP
7. Le `.pkpass` est délivré

Le client appuie sur « Ajouter à Wallet » — sans installation d'application. iOS reconnaît automatiquement le type MIME `application/vnd.apple.pkpass`.

### Mises à jour push via APNs

Dès qu'un nouveau tampon arrive, reloop envoie un push APNs aux serveurs d'Apple. Apple réveille le pass sur l'appareil, qui charge silencieusement les nouvelles données en arrière-plan. **Le client voit le nouveau nombre de tampons à la prochaine ouverture de la carte** — sans mise à jour d'application, sans réinstallation.

## Intégration Google Wallet : LoyaltyClass + LoyaltyObject

Google utilise un modèle centré sur l'API. Pour chaque programme, nous créons une **LoyaltyClass** (branding statique), et pour chaque carte un **LoyaltyObject** (le nombre de tampons dynamique). À chaque tampon, le backend effectue une requête PATCH — et Google synchronise automatiquement la carte sur tous les appareils de l'utilisateur.

### Ce que contient la LoyaltyClass

- IssuerName + ProgramName (allemand et anglais)
- HexBackgroundColor (votre couleur de marque)
- ProgramLogo (URL Firebase Storage)
- HeroImage (l'aperçu de votre bandeau)
- TextModulesData (explication « Comment ça marche »)
- ValueAddedModuleData (bloc promo facultatif, voir ci-dessous)
- ScreenShotEligibility (`INELIGIBLE` lorsque le partage désactivé est actif)
- MultipleDevicesAndHoldersAllowedStatus (`ONE_USER_ALL_DEVICES` lorsque le partage désactivé est actif)

### Ce que contient le LoyaltyObject

- Compteur de tampons (par ex. « 3/5 »)
- Statut actuel (`ACTIVE`, ou `EXPIRED` une fois la date d'expiration atteinte)
- Code-barres (QR statique ou TOTP rotatif, selon le programme)
- HeroImage (avec un cache-buster : elle change à chaque nombre de tampons pour que Google voie immédiatement le nouvel état)
- LinksModuleData (site web, voir la carte en ligne, e-mail de support, politique de confidentialité, mentions légales)
- ValidTimeInterval (date d'expiration)
- MerchantLocations (≤10 geofences avec lat/lon)

### Notifications push via Wallet broadcast

Contrairement à Apple, Google peut envoyer des **notifications push directement sur l'écran de verrouillage**. Dans le tableau de bord, vous rédigez un en-tête et un corps de message, choisissez les programmes cibles — et la notification apparaît pour tous les utilisateurs Google Wallet sous forme de bannière directement sur l'écran de verrouillage. Plus d'informations dans le [volet reporting](/blog/loyalty-reporting-push-newsletter#wallet-push-broadcasts).

## Aperçu en direct : ce que vous saisissez, vous le voyez

Pendant que vous écrivez dans l'éditeur, le **WalletSimulator** s'exécute à droite — le même composant que nous utilisons sur [/beispiele](/beispiele) pour les pass de démonstration. Vous basculez entre Apple et Google, parcourez tous les états de tampon (0/5, 1/5, …, 5/5 + récompense) et voyez immédiatement comment les couleurs, les icônes et les textes se comportent à chaque étape.

<DashboardMock variant="program-editor" caption="L'éditeur avec aperçu en direct. Chaque modification à gauche est rendue dans l'aperçu à droite en moins de 300 ms." />

Le rendu de l'image du bandeau s'exécute côté serveur sur `/api/wallet-preview/strip.png` et est mis en cache pendant 200 ms — les saisies rapides par glissement (par ex. le sélecteur de couleur) sont regroupées en une seule requête pour rester fluides.

## Capture d'e-mails & paliers de fidélité

Deux fonctionnalités particulièrement puissantes pour les programmes avancés :

### Modes de capture d'e-mails

| Mode | Comportement |
| --- | --- |
| `off` | Aucune capture d'e-mail. La carte est 100 % anonyme. |
| `optional` | Après l'enregistrement dans Wallet, un champ e-mail est proposé. Des tampons bonus comme incitation sont possibles. |
| `required` | La carte ne peut être enregistrée qu'avec un e-mail. Portée maximale pour votre newsletter. |

**Tampons de récompense pour capture d'e-mail** = le nombre de tampons bonus que le client obtient en saisissant son e-mail. Valeurs habituelles : 1 à 2 tampons. Très efficace comme moteur de conversion.

### Paliers de fidélité (Bronze / Argent / Or)

Avec la formule Premium, vous pouvez créer des **programmes à plusieurs paliers** : une carte comporte des paliers, et le client passe au palier suivant chaque fois qu'il complète une rangée de tampons. La `tierConfig` est un bloc JSON qui définit le texte de récompense, le seuil et le nom d'affichage pour chaque palier.

Exemple (un café fictif) : Bronze (5 cafés → café offert), Argent (15 cafés → +1 croissant offert), Or (30 cafés → tasse personnalisée avec votre nom). Très efficace pour fidéliser les clients existants.

## Anti-fraude : code QR rotatif, tamponnage NFC, blocage du partage

Trois fonctionnalités de sécurité qui empêchent les abus :

### Code QR rotatif (TOTP)

Le code QR sur la carte tourne toutes les 30 secondes. Toute tentative de tampon avec un ancien code échoue. Cela empêche les captures d'écran et le partage de photos. Disponible à partir de la formule Business. Le TOTP est le même standard que celui utilisé par les applications d'authentification — très sécurisé.

### Tamponnage NFC

Au lieu d'un code QR, le client approche son téléphone d'un tag NFC posé sur votre comptoir. Le tampon est enregistré instantanément, sans que vous ou le client ayez à ouvrir une application. Seule condition : un tag NFC provisionné par nos soins. Inclus dans toutes les formules.

### Blocage du partage de carte

Pour Google Wallet : `screenShotEligibility: INELIGIBLE` et `multipleDevicesAndHoldersAllowedStatus: ONE_USER_ALL_DEVICES`. Cela signifie que les cartes ne peuvent pas être transférées, et que les captures d'écran bloquent l'affichage du pass. Protection maximale contre le partage de cartes. Inclus dans toutes les formules.

### Anti-fraude standard (actif sur toutes les offres)

- Tokens QR signés HMAC-SHA256 (TTL de 60 s)
- Limite de tampons max. par jour et par programme
- Journal d'audit avec ID du personnel, heure et IP pour chaque tampon
- Aucun déclenchement de tampon anonyme — seul le personnel connecté peut tamponner

## Publication, code QR, pause/arrêt

Une fois satisfait, vous cliquez sur **Publier**. Le programme passe au statut `active`, le code QR est généré (URL `/s/[slug]/scan` sous forme de QR), et vous pouvez :

- **Le télécharger en PNG** (le format standard pour l'impression)
- **Le télécharger en SVG** (sans perte et redimensionnable, parfait pour la conception d'affiches)
- **L'imprimer directement** via la boîte de dialogue d'impression du navigateur
- **Le partager par e-mail** (lien direct, sans connexion requise)

<Callout tone="info" title="Recommandation d'impression du QR">
- **Taille minimale :** 4×4 cm pour les chevalets de table, 8×8 cm pour les autocollants de porte<br />
- **Contraste élevé :** QR foncé sur fond blanc, **jamais** de QR blanc sur fond coloré<br />
- **Zone de silence :** au moins 4× la taille du module QR comme marge tout autour<br />
- **Test préalable :** scannez avec deux téléphones différents (iOS et Android) avant d'imprimer
</Callout>

### Mettre en pause ou arrêter un programme

- **Pause** → les cartes existantes restent intactes, les nouveaux tampons sont bloqués. Réversible.
- **Arrêt** → le programme passe en lecture seule. Les cartes peuvent encore échanger leur solde actuel mais ne peuvent plus collecter de nouveaux tampons. Irréversible.
- **Suppression** → suppression définitive complète, y compris toutes les cartes associées et les historiques de tampons. Boîte de dialogue de confirmation à deux facteurs.

## Créer des cartes de test

Avant la mise en ligne, vous devriez parcourir vous-même l'ensemble du parcours client. Dans l'éditeur de programme, cliquez sur **« Créer une carte de test »** — vous obtenez une carte pleinement fonctionnelle sans identifiant client réel, que vous pouvez tamponner, échanger et supprimer vous-même. Les cartes de test ne comptent pas dans votre quota de cartes et sont comptabilisées séparément dans le reporting.

## Récapitulatif : votre premier programme en 5 minutes

En procédant étape par étape :

1. **Générateur IA** → saisir l'URL, vérifier le brouillon
2. Ajuster les **fondamentaux du programme** (nom, récompense, objectif de tampons)
3. Finaliser le **branding** (logo, couleurs, emoji de tampon)
4. Vérifier l'**aperçu en direct** — parcourir tous les états de tampon
5. Choisir vos réglages **anti-fraude** (le standard suffit généralement)
6. **Publier** → imprimer le QR → distribuer votre première carte

<Callout tone="success" title="Prochaines étapes">
- [Comment réactiver vos clients existants via push et newsletter →](/blog/loyalty-reporting-push-newsletter)<br />
- [Vue d'ensemble complète de toutes les fonctionnalités du tableau de bord →](/blog/merchant-dashboard-funktionen)<br />
- [Exemples issus de 6 secteurs →](/beispiele)<br />
- [Commencer gratuitement →](/signup)
</Callout>