Personnaliser vos cartes Wallet : logo, couleurs, icône de tampon — votre marque dans Apple & Google Wallet

Une carte de fidélité numérique avec l’apparence reloop par défaut fonctionne techniquement — mais c’est un gaspillage marketing. Chaque fois qu’un client ouvre la carte dans Apple Wallet ou Google Wallet, il pourrait voir votre marque : votre logo, vos couleurs de marque, votre image de fond. Ce guide vous montre comment adapter entièrement une carte Wallet à votre établissement en 10 minutes — et quelles specs Apple/Google vous devez connaître pour que votre logo ne soit pas rogné par les masques internes de Wallet.

Ce qu’Apple Wallet et Google Wallet font différemment

Important à comprendre avant d’importer quoi que ce soit : Apple et Google affichent votre logo de façon complètement différente.

Apple Wallet

• Votre logo apparaît en haut à gauche, par-dessus le fond en couleur de marque
• Format : bannière rectangulaire (max 160 × 50 pt, soit 480 × 150 px @ 3× Retina)
• Rapport d’aspect : environ 3.2 : 1 (paysage)
• Apple affiche le logo tel quel, sans masque — si vous fournissez un logo carré, il paraîtra petit et chétif

Google Wallet

• Votre logo apparaît en haut à gauche dans un cercle
• Format : carré (au moins 660 × 660 px)
• Google le masque automatiquement en cercle, avec une zone de sécurité de 15 % autour du bord
• Si vous fournissez un logo bannière au format paysage, il sera soit écrasé, soit rogné en haut et en bas

Le dilemme : un seul logo ne peut pas être à la fois une bannière Apple ET un cercle Google.

La solution reloop : vous importez votre original (idéalement carré ou légèrement rectangulaire, au moins 660 × 660 px). Le serveur le normalise en 1024 × 1024 et génère automatiquement trois variantes de plateforme lors de l’enregistrement :

• logo-apple.png — PNG 480 × 150, ajusté à l’intérieur d’un canevas transparent (pour PassKit)
• logo-google.png — PNG carré 660 × 660 avec une zone de sécurité de 15 % (pour l’API Google Wallet)
• logo-thumb.webp — WebP 64 × 64 pour l’affichage de l’interface dans le tableau de bord

Vous n’avez donc pas à choisir entre les deux mondes. Importez un bon carré, et le reste se fait automatiquement.

Pas à pas : adapter la carte à votre marque

1. Ouvrir le programme + onglet Personnalisation

Dans le tableau de bord : Programmes → sélectionnez le programme → onglet Personnalisation (ou, dans l’éditeur, l’onglet « Personnalisation » à gauche).

2. Importer votre logo

Glissez-déposez dans l’emplacement du logo, ou cliquez pour ouvrir le sélecteur de fichiers. Trois choses se produisent en parallèle pendant l’import :

1. Redimensionnement côté client à max 1024 × 1024 (économise des octets de stockage + de la bande passante d’upload)
2. Les données EXIF sont supprimées (aucune fuite accidentelle de géolocalisation)
3. Le serveur génère les 3 variantes de plateforme et les enregistre comme fichiers de stockage distincts

Dans le simulateur Wallet en direct à droite, vous voyez immédiatement comment le logo apparaît dans Apple Wallet (bannière, en haut à gauche) et dans Google Wallet (cercle, en haut à gauche). Si votre logo est trop large et paraît rogné dans le cercle Google : réexportez le logo dans une mise en page carrée et importez-le de nouveau.

Conseils pour le logo :

• Un fond transparent est toujours préférable. La couleur de marque derrière le logo doit transparaître.
• Une marge minimale de 10 % jusqu’au bord du logo. Apple comme Google ont des bords de masque plus ou moins doux ; sans marge, les bords extérieurs sont rognés.
• Le SVG fonctionne aussi et est rastérisé en PNG côté serveur (à 3× de densité).
• Logos foncés sur couleurs de marque claires et inversement — assurez-vous que le contraste tient. Un logo noir sur un fond de marque rouge foncé n’est pas lisible.

3. Choisir une couleur de marque + une couleur d’accentuation

Deux sélecteurs de couleur :

• Couleur de marque (brandColor) : le fond de votre carte Wallet. Dans Apple Wallet, c’est toute la moitié supérieure. Dans Google Wallet, c’est toute la carte. Par défaut : #55182c (bordeaux Stempelkarte).
• Couleur d’accentuation (accentColor) : la couleur des cercles de tampon remplis, de l’étoile marquant l’objectif et (sur certaines versions de Wallet) de l’animation du ruban de récompense. Par défaut : #f8b627 (or Stempelkarte).

Bonne pratique : couleur de marque = votre marque principale (fond du logo), couleur d’accentuation = un complément contrastant. Si votre marque est, par exemple, bleu foncé, optez pour de l’or ou un orange chaud comme accent — pas « le même bleu, un peu plus clair ».

4. Configurer l’icône de tampon (optionnel)

Par défaut, c’est une simple étoile. Vous avez trois alternatives :

1. Importer votre propre icône de tampon (même chemin d’import que le logo). PNG/JPG/SVG, max 10 Mo. Normalisée à 256×256.
2. Un emoji comme tampon — saisissez un seul emoji (par ex. ☕ pour un café, 🥐 pour une boulangerie, ✂️ pour un salon de coiffure). Le moteur de rendu utilise Pango + Noto Color Emoji.
3. Conserver l’étoile par défaut si vous n’avez pas encore d’idée.

Astuce : les icônes personnalisées à fort contraste fonctionnent mieux. Un tampon en trait fin disparaît sur le petit affichage de la carte ; une forme pleine et massive se lit bien.

5. Choisir le mode d’affichage des tampons

Deux options :

• circle-number (par défaut) : cercle de tampon avec l’icône à l’intérieur, cercle vide pour un tampon non encore obtenu. Classique.
• image-only : l’icône complète en tampon rempli, une variante en niveaux de gris quand il est vide. Moderne, fidèle à la marque, et pertinent seulement si votre icône est visuellement forte.

Le simulateur en direct affiche les deux modes instantanément.

6. Image de fond (optionnel)

Vous pouvez importer une image de fond pour la zone du bandeau (là où se trouvent les tampons) — par exemple un motif discret ou une photo floutée de votre café. Format : JPG / PNG / WebP, côté long max 1280 px.

Le mode de superposition + la force de superposition (0–80 %) déterminent à quel point votre couleur de marque recouvre l’image :

• none : image entièrement visible (idéal pour les motifs très discrets)
• darken : image assombrie par la couleur de marque (idéal pour les photos claires)
• lighten : image éclaircie (idéal pour les photos sombres)
• brand-tint (par défaut) : l’image reçoit une teinte de couleur de marque

7. Personnaliser l’état de récompense

Que se passe-t-il visuellement lorsque la carte est pleine et que le client peut récupérer sa récompense ?

• Une image de fond de récompense personnalisée (par ex. une photo de confettis ou une photo de votre produit-récompense, comme un « cappuccino offert »)
• Une couleur de fond de récompense (une couleur unie au lieu d’une image, remplaçant le dégradé de marque par défaut)
• Un texte d’accroche personnalisé — au lieu du « RÉCOMPENSE DISPONIBLE » par défaut → votre propre slogan comme « VOTRE CAFÉ VOUS ATTEND »
• Un titre de récompense personnalisé — au lieu de la récompense propre au programme → votre propre message marketing
• Animation soleil rayonnant + confettis activée/désactivée
• Couleur de l’accroche, taille du titre, position — réglables séparément par axe

C’est ce qui fait la différence entre « la carte est pleine » et « la carte célèbre avec le client ».

8. Désactiver le filigrane (Premium uniquement)

Par défaut, votre carte affiche un petit filigrane « reloop » en bas à droite. Avec le bouton de filigrane (hideWatermark), vous le masquez — une carte en marque blanche, sans notre marque. Disponible uniquement dans la formule Premium.

Aperçu et test en direct

Dans l’éditeur :

• Le simulateur en direct affiche les cadres Apple et Google côte à côte (ou via un bouton bascule)
• Un curseur de tampons de 0 au maximum → voyez comment la carte évolue au fil des tampons
• Un bouton bascule d’état de récompense → voyez à quoi ressemble la carte lorsqu’elle est pleine

Sur un vrai smartphone :

1. Enregistrez le programme
2. Créez une carte de test (dans l’onglet Cartes → « Nouvelle carte »)
3. Scannez le QR code avec votre iPhone (ou Android)
4. Touchez « Ajouter à Wallet »
5. Ouvrez la carte dans l’application Wallet → c’est exactement ce que voient vos clients

Si quelque chose diffère du simulateur : signalez un bug à support@reloop.cards — nous vérifions immédiatement, car notre promesse est « pixel-identique entre l’aperçu et le pass ».

Erreurs de personnalisation fréquentes

• Logo importé trop petit (200 × 200 px). Le serveur doit agrandir → logo flou. Au moins 660 × 660 px.
• Logo carré choisi, mais la bannière Apple paraît minuscule. Ce n’est pas un bug — la bannière Apple est en 3.2:1, un carré la remplit verticalement mais laisse 75 % de l’espace horizontal vide. Si vous priorisez Apple, faites un logo plus large.
• Couleur de marque identique à la couleur d’accentuation. Les tampons ne sont alors pas visibles. L’accent doit contraster.
• Image de fond trop chargée. Les tampons sont recouverts, la carte paraît surchargée. Utilisez un motif ou une image + 50 % de superposition.

Quand vous n’avez PAS besoin de personnalisation

Si vous :

• Testez simplement le service (l’apparence par défaut est déjà soignée)
• Êtes sous pression au lancement et voulez faire la personnalisation plus tard
• N’avez pas encore d’identité de marque établie (dans ce cas, la personnalisation par défaut ne fait de mal à personne)

La personnalisation s’améliore de façon itérative — en 5 minutes, vous pouvez intégrer un logo + 2 couleurs, et cela paraîtra aussitôt 80 % aussi réussi qu’un programme entièrement configuré.