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

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.

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 comme modèle

Option 1 : générateur IA

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

Mécanique des tampons

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.

Cafe MilchschaumWallet

Carte fidélité café

Le 5e café offert

☕☕☕☕☕

2 / 5 StempelQR-Code

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.

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 :

Cafe MilchschaumWallet

Carte fidélité café

🎉 Glückwunsch

Le 5e café offert

Bereit zum EinlösenQR-Code

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

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.

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

reloop.cards/dashboard/programs/cafe-milchschaum

Modifier le programme

Nom du programmeCarte de fidélité caféRécompenseLe 5e café offert

Objectif de tampons5Max. par jour1

Couleur de marque#5B3826Accent#E8C180

Éclat lors de l’échange

Code-barres QR rotatif

Masquer le filigrane

Aperçu en direct

Cafe MilchschaumWallet

Carte de fidélité café

Le 5e café offert

12345

3 / 5 StempelQR-Code

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

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)

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