# Configuration du modèle de carte de fidélité

Que vous soyez un nouveau client qui doit créer le modèle pour les Cartes qui seront distribuées à vos clients, ou un responsable de The Wallet Crew qui doit mettre à jour un modèle existant, cet article vous aidera à naviguer jusqu'à notre concepteur de modèles. L'objectif est de configurer un modèle de Carte qui reflétera l'identité de votre marque, affichera les bonnes informations à vos clients et garantira une expérience fluide sur Apple Wallet et Google Wallet.

## Architecture

Apple et Google ont leurs propres modèles de Carte de fidélité comme vous pouvez le voir ci‑dessous.

{% tabs %}
{% tab title="Apple" %}

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FYfVLapjuz0UuSmlMemNh%2FTemplate%20Apple%20card.png?alt=media&#x26;token=f0a1ac09-9f4a-4704-9ec2-c95e29bdaad7" alt="Architecture - Apple"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Google" %}

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FYNBtqEVMkSMj9UsS8fDa%2Floyaltycard2.png?alt=media&#x26;token=5c73ce32-5f39-42eb-bc66-8ee5d9036aaf" alt="Architecture - Google"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Image de couverture</th></tr></thead><tbody><tr><td align="center">Carte Apple</td><td data-object-fit="contain" data-alt="Apple example loyalty card "><a href="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F5i1FCNt3FmNRqxLMiRfO%2FWhatsApp_Image_2026-01-26_at_11.16.31-removebg-preview.png?alt=media&#x26;token=bd116378-2004-43e3-abb2-14aad3c8eb11">design-loyalty-card-apple-example-loyalty-card-3.png</a></td></tr><tr><td align="center">Carte Apple</td><td data-object-fit="contain" data-alt="Apple example loyalty card "><a href="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FMMXclBtcKe3bZSoDPYyo%2FWhatsApp_Image_2026-01-26_at_11.16.31__1_-removebg-preview.png?alt=media&#x26;token=4d842d0e-497f-461f-a334-5dc10076fe0e">design-loyalty-card-apple-example-loyalty-card-2.png</a></td></tr><tr><td align="center">Carte Apple</td><td data-object-fit="contain" data-alt="Apple example loyalty card "><a href="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F3udUB9SwWlGzjoznqZdz%2FWhatsApp_Image_2026-01-26_at_11.16.30-removebg-preview.png?alt=media&#x26;token=0552d62c-53cc-4cd5-963e-cde2ba47c962">design-loyalty-card-apple-example-loyalty-card.png</a></td></tr></tbody></table>

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Image de couverture</th></tr></thead><tbody><tr><td align="center">Carte Google</td><td data-object-fit="contain"><a href="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FMzi1dMZL1NG9s3nvt9Mc%2FCapture%20d%E2%80%99e%CC%81cran%202026-01-26%20a%CC%80%2012.10.55.png?alt=media&#x26;token=7fb398dd-e172-4cc2-bea3-9798b810ba48">design-loyalty-card-capture-d-e-cran-2026-01-26.png</a></td></tr><tr><td align="center">Carte Google</td><td data-object-fit="contain"><a href="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FTp2HeZbaCrwEbPUgQXOT%2FCapture_d_e%CC%81cran_2026-01-26_a%CC%80_12.12.33-removebg-preview.png?alt=media&#x26;token=529a5043-34a6-4df8-8044-8f93d1b90f12">design-loyalty-card-capture-d-e-cran-2026-01-26-3.png</a></td></tr><tr><td align="center">Carte Google</td><td data-object-fit="contain"><a href="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FJDFuHXkTu83srbIWcqwY%2FCapture_d_e%CC%81cran_2026-01-26_a%CC%80_12.11.22-removebg-preview.png?alt=media&#x26;token=7ff16409-256e-4aad-a033-24bac659f4de">design-loyalty-card-capture-d-e-cran-2026-01-26-2.png</a></td></tr></tbody></table>

{% hint style="info" %}
**Si vous voulez aller plus loin, trouvez tous les détails des deux versions :**
{% endhint %}

**Apple :**

{% embed url="<https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html>" %}

**Android :**

{% embed url="<https://developers.google.com/wallet/retail/loyalty-cards/resources/template>" %}

### Comment le configurer sur The Wallet Crew

Avec The Wallet Crew, vous avez accès à un **concepteur de modèles** qui vous permet de **personnaliser les cartes de fidélité** vous distribuerez à vos clients. Voyons en détail comment personnaliser chaque section !

## Apple

**Jetons un coup d’œil aux différentes sections du concepteur de modèles Apple.**

### Section générale

Dans la section générale, vous avez deux champs obligatoires que vous devez remplir :

* **Description**  : une brève description du pass, qui apparaîtra au dos de la carte
* **Nom de l’organisation**  : le nom de votre entreprise ou de votre marque

Vous avez également la possibilité d’ajouter un texte à côté de votre logo, **activer le partage de la Carte** si vous souhaitez que vos clients puissent la partager ou non avec d'autres personnes, la « fonction d'annulation » pour les coupons, une date pertinente et une date d'expiration utilisées pour les billets d'événement.

Vous pouvez aussi **définir la distance** à partir d'une latitude et d'une longitude pertinentes où la Carte est pertinente, pour **les notifications de géorepérage.**

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fya2BouNilbO358Oqdr55%2Floyaltycard5.png?alt=media&#x26;token=60a2df54-c592-4939-9893-6f43167e118a" alt="Template designer general section"><figcaption><p>La section où vous pouvez personnaliser les informations générales</p></figcaption></figure>

### Code-barres

Choisissez le **type de code-barres** qui est compatible avec votre logiciel de point de vente. La valeur du code-barres correspond au **identifiers** qui vous permettra d'identifier la carte avec votre terminal en magasin. Enfin, le texte alternatif peut être utilisé pour afficher les données du code-barres au cas où le code-barres ne pourrait pas être scanné.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FtnIv9uqf9M3B1bjUsGwI%2Floyaltycard6.png?alt=media&#x26;token=e4a6146a-ae62-454a-bb5b-79cb5863e67e" alt="Template designer barcode"><figcaption><p>La section où vous pouvez personnaliser vos préférences de code-barres</p></figcaption></figure>

### Couleurs et images

Pour changer la couleur d'arrière-plan de votre carte, il suffit de **ajouter le code couleur dans les champs** prévu à cet effet. Pour ajouter une image, téléversez-la depuis votre appareil.

### Champs d’en-tête

Cette section est particulièrement importante dans la version Apple, car les cartes sont **empilées les unes sur les autres**. Seule l'en-tête de la carte reste visible. Il est donc important que cette section attire l'œil et incite à cliquer sur la carte, en affichant notamment les informations les plus importantes telles que les points de fidélité, ou d'autres informations pertinentes.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FVdoZQsBYN7VdYAudUWmr%2Floyaltycard8.png?alt=media&#x26;token=5465d182-2cc7-4b9d-b856-1d8b2b9e08cb" alt="Template designer header fields"><figcaption><p>La section où vous pouvez personnaliser les champs d'en-tête</p></figcaption></figure>

### Champs avant

Les champs avant sont les champs qui servent à **afficher des informations au recto de la carte**, sous l'image de la bande. Le libellé que vous choisirez est le même pour chaque utilisateur (par langue), mais vous pouvez personnaliser la valeur pour afficher le nom du client ou le nombre de points.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F5NcPbaTcDbDEpPwY06Io%2Floyaltycard9.png?alt=media&#x26;token=32a6d32c-1913-40fb-9ba4-14217d8e741f" alt="Template designer front fields"><figcaption><p>La section où vous pouvez personnaliser les champs avant</p></figcaption></figure>

{% hint style="warning" %}
**Pour personnaliser les champs avant, veuillez vous référer à votre équipe technique pour savoir quelle valeur dynamique vous devez renseigner.**
{% endhint %}

### Champs arrière

Cette section, située au verso de la carte de fidélité, comprend plusieurs informations utiles pour le client :

* Comment fonctionne le programme de fidélité
* Récompenses disponibles
* Tickets de caisse
* Offres et messages personnalisés
* La possibilité d'ajouter des liens, comme l'emplacement de leur magasin préféré, un lien pour mettre à jour leur compte et leurs préférences, l'accès aux conditions générales, etc.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FMS1PT14dQLVbbjIp4oMW%2Floyaltycard10.png?alt=media&#x26;token=6d3a21c3-936a-442b-a5e7-d877e88541a4" alt="Template designer backfields"><figcaption><p>La section où vous pouvez personnaliser les champs arrière</p></figcaption></figure>

### Autres sections

Sur Apple, vous avez également trois autres sections :

* **Emplacements**  : Utilisé pour les notifications de géorepérage.
* **Balises (Beacons)**  : Également utilisé pour les notifications de géorepérage.
* **Identifiant de magasin associé**  : Vous pouvez lier votre application si elle se trouve sur l’App Store
* **NFC**  : Une fonctionnalité qui permet aux clients d’échanger du contenu numérique et de connecter des appareils électroniques par contact.

{% hint style="warning" %}
**Veuillez contacter votre représentant The Wallet Crew pour activer ces fonctionnalités**
{% endhint %}

{% hint style="danger" %}
**Une fois que vous avez effectué des modifications, n’oubliez pas de cliquer sur « enregistrer » en haut de votre écran !**
{% endhint %}

***

## Google

**Le concepteur de modèles Google est un peu différent de celui d’Apple.**

{% hint style="warning" %}
**Voici quelques éléments à connaître avant de configurer votre modèle Google :**
{% endhint %}

1. Certains champs tels que « issue » et « program name » sont **obligatoires**
2. Google préconfigure les champs en fonction de leurs valeurs prévues, il est donc préférable de ne pas entrer le nom du client dans le champ des points de fidélité, par exemple, même si c'est ainsi que vous souhaiteriez qu'il apparaisse sur la Carte
3. Les valeurs dynamiques (par ex., {{firstName}}) doivent être **placées dans des champs dynamiques dédiés**. Les champs « Label » sont destinés uniquement au texte statique.

**Passons en revue les différentes sections.**

### Section générale

Dans la section générale, vous avez trois **champs obligatoires** que vous devez remplir :

* **Émetteur** : le nom de la marque ou de l'entreprise qui émet la carte
* **Nom du programme** : il apparaît sur le devant de la carte, cela peut être le nom de votre programme de fidélité par exemple
* **État** : l'état de votre Carte (active, expirée, terminée, inactive)

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FhRafclaCJZkcxKjcdGHc%2Fgoogle%20loyalty.png?alt=media&#x26;token=6229bac5-ef8a-47a7-8e25-3926ff4759a0" alt="Google template designer general section"><figcaption><p>La section où vous pouvez personnaliser les informations générales</p></figcaption></figure>

### Code-barres

Choisissez le **type de code-barres** qui est compatible avec votre logiciel de point de vente. La valeur du code-barres correspond au **identifiers** qui vous permettra d'identifier la carte avec votre terminal en magasin. Enfin, le texte alternatif peut être utilisé pour afficher les données du code-barres au cas où le code-barres ne pourrait pas être scanné.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FQBxt0EDwM6kThQrmqe0V%2Fgoogle%20loyalty%202.png?alt=media&#x26;token=e191533a-f01f-4526-b227-b4c6d9aa9bca" alt="Google template designer Barcode"><figcaption><p>La section où vous pouvez personnaliser le code-barres</p></figcaption></figure>

### Appareils et titulaires multiples

Lorsque vous configurez un modèle, vous devez décider **si le client peut partager son pass ou non**. Concernant Google, vous avez trois options :

* **Titulaire multiple** : cela signifie que le client peut partager son pass avec n’importe qui
* **Un utilisateur plusieurs appareils** : un client mais avec plusieurs appareils (une montre par exemple)
* **Un utilisateur un appareil**

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FyKPoe6WRIOXaeR2EjUoc%2Fgoogle%20template%2010.png?alt=media&#x26;token=4400219f-ecab-4f4c-90fb-5cc807697bce" alt="Google template designer multiple holders"><figcaption><p>La section où vous pouvez décider si un client peut partager sa Carte ou non</p></figcaption></figure>

### Couleurs et images

Pour changer la couleur d'arrière-plan de votre carte, il suffit de **ajouter le code couleur dans les champs** prévu à cet effet. Pour ajouter une image, téléversez-la depuis votre appareil.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FQwCM1G17TeMmKmb8lgfg%2Fgoogle%20template%2011.png?alt=media&#x26;token=47dea18f-fe7e-4fb4-b80c-005181805e9f" alt="Google template designer images and colors"><figcaption><p>La section où vous pouvez personnaliser les couleurs et les images</p></figcaption></figure>

### Compte

La section compte est l'endroit où vous pouvez mettre le **nom du client** et son **identifiant**.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FfeWqiEpouDve4q7FjJnW%2Fgoogle%20template%2012.png?alt=media&#x26;token=27003924-cb4e-4f1d-b131-b097c4971979" alt="Google template designer account section"><figcaption><p>La section où vous pouvez configurer les noms et identifiants de vos clients</p></figcaption></figure>

{% hint style="warning" %}
**Veuillez noter qu'il s'agit d'un champ optionnel et que vous ne pouvez pas mettre de valeur dynamique sur le champ du libellé.**
{% endhint %}

### Liens supplémentaires

Cela apparaît au verso de la carte, vous pouvez mettre le **lien d'un magasin ou de votre site web**!

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fd7AWnd7cIkaBK42GC9oK%2Fgoogle%20template%2013.png?alt=media&#x26;token=fa2340bb-43d9-4330-9c4f-827f3cb83143" alt="Google template designer additional links"><figcaption><p>La section où vous pouvez ajouter des liens supplémentaires</p></figcaption></figure>

### Points de fidélité, Récompenses et Niveaux de récompense

Ces champs sont utilisés pour configurer les **points de fidélité**, et les **récompenses** ou **niveaux de récompense** (statut du programme de fidélité par exemple).

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FcENBaoMd99eaDkzdSJon%2Fgoogle%20template%2014.png?alt=media&#x26;token=24c386c7-74d3-4bed-8c3f-2f241e07927b" alt="Google template designer points" width="375"><figcaption><p>La section où vous pouvez configurer les points et récompenses de la Carte</p></figcaption></figure>

### Messages

Cette section, située au verso de la carte de fidélité, inclut plusieurs **informations utiles** pour le client :

* Comment fonctionne le programme de fidélité
* Récompenses disponibles
* La possibilité d'ajouter des liens, comme l'emplacement de leur magasin préféré, un lien pour mettre à jour leur compte et leurs préférences, l'accès aux conditions générales, etc.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2FOMiiOJXJ5TcEJ5iBZ50Q%2Fgoogle%20template%2015.png?alt=media&#x26;token=d4c94e7e-bf31-4a5e-922b-821f16f97463" alt="Google template designer messages"><figcaption><p>La section où vous pouvez personnaliser les champs arrière de la Carte</p></figcaption></figure>

### Opportunités de valeur ajoutée

Cette section vous permet d’ajouter une **petite section en bas de la carte de fidélité** . Cela sert à afficher des offres ou des actualités.

<figure><img src="https://3097111101-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2F65P0cCbXmycYlulafMfD%2Fgoogle%20template%2016.png?alt=media&#x26;token=5c65b4e1-ff91-4e9e-8bb3-bc4181d22984" alt="Google template designer added value opportunities"><figcaption><p>La section où vous pouvez personnaliser la section en bas de la Carte</p></figcaption></figure>

{% hint style="danger" %}
**Une fois que vous avez effectué des modifications, n’oubliez pas de cliquer sur « enregistrer » en haut de votre écran !**
{% endhint %}

## FAQ

<details>

<summary><strong>Dois‑je sauvegarder ma configuration et mettre à jour toutes les Cartes ?</strong></summary>

Une fois que vous avez fini d'éditer votre modèle, vous avez **deux options :**

* Enregistrer votre configuration sans pousser une mise à jour sur toutes les Cartes : c'est la meilleure option si vous avez beaucoup de Cartes. Vous pouvez enregistrer votre configuration et décider de planifier une mise à jour pendant la nuit pour éviter l'impact d'une mise à jour massive.
* Enregistrer votre configuration et pousser une mise à jour : c'est la meilleure option si vous effectuez des tests ou si vous avez peu de Cartes dans votre environnement.

</details>

<details>

<summary><strong>Comment modifier la configuration pour une autre langue ?</strong></summary>

Vous avez la possibilité de modifier le design de la Carte pour chaque langue. Si vous cliquez sur "général" dans le menu, vous pouvez ajouter une langue. Vous la verrez alors apparaître dans le concepteur de modèles et pourrez la modifier.

</details>
