Constructeur de passes Apple Wallet

Le constructeur de passes Apple Wallet est un concepteur visuel dans le Panneau de Contrôle. Vous choisissez un style de passe, renseignez l’image de marque, les champs et un code-barres, visualisez un aperçu en direct et générez le passe, vous n’avez donc pas besoin d’écrire pass.json manuellement.

Créer un passe

Dans le Panneau de Contrôle, allez dans Campagnes → Wallet Passes, ouvrez l’onglet Tous les passes, sélectionnez Apple Wallet et cliquez sur Créer un pass.

Configurer le passe

• Partir de zéro : commencez avec un passe vide. Choisissez un style de passe, puis définissez vous-même les couleurs, les images, les champs, le code-barres et d’autres options dans les sections ci-dessous.

• À partir d’un modèle : cliquez sur Charger le modèle, choisissez un passe intégré dans Sélectionner un modèle (carte d’embarquement, coupon, billet d’événement, générique ou carte de fidélité). Le modèle s’applique dès que vous cliquez dessus. Le formulaire pré-remplit le style de passe, les couleurs, les champs du passe, le code-barres et les informations de base, et règle Date pertinente sur l’heure actuelle. Les modèles n’incluent pas d’images : téléchargez donc l’Icône et le Logo avant de générer le passe. Modifiez n’importe quelle valeur ou changez le style si nécessaire. Pushwoosh remplace les ID d’équipe et de type de passe du modèle par les valeurs de votre application.

Choisir un style de passe

Sous STYLE DE PASSE, choisissez l’un des cinq styles de passe Apple Wallet. Le style contrôle la mise en page et les zones de champs et d’images disponibles :

• Carte d’embarquement
• Coupon
• Billet d’événement
• Carte de fidélité
• Générique

Choisissez le style avant d’ajouter des champs et des images, car changer de style efface tous les champs du passe.

Ajouter le nom et la description du passe

Sous INFORMATIONS DE BASE, remplissez :

Nom du passe	Le titre du passe et le nom de la source affiché sur les notifications de mise à jour.
Description	Une courte description du passe.
Texte du logo	Texte affiché à côté du logo.

Définir les couleurs et les images

Couleurs

Sous COULEURS, définissez :

• Couleur d’arrière-plan : l’arrière-plan du passe.
• Couleur de premier plan : le texte principal et les icônes sur le passe.
• Couleur de l’étiquette : la couleur des étiquettes de champ (par exemple, DE, PORTE).

Pour définir ou modifier une couleur, cliquez sur son champ et choisissez une couleur dans le sélecteur.

Note

Les couleurs sont stockées au format rgb(r, g, b).

Images

Sous IMAGES, téléchargez l’Icône et le Logo (tous deux requis). Les images facultatives dépendent du style du passe :

Image	Taille	Disponible pour
Icône	29×29	Tous les styles (requise)
Logo	160×50	Tous les styles (requis)
Bandeau	375×144	Coupon, Billet d’événement, Carte de fidélité
Arrière-plan	180×220	Billet d’événement
Vignette	90×90	Billet d’événement, Générique
Pied	286×15	Carte d’embarquement

Cliquez sur Choisir un fichier à côté de chaque emplacement d’image et téléchargez un fichier PNG ou JPEG. Pushwoosh recadre chaque image depuis le centre à la taille de l’emplacement et prépare les résolutions requises par Apple (@1x, @2x, @3x).

Remplir les champs du passe

Sous CHAMPS DU PASSE, ajoutez le texte et les valeurs qui apparaissent sur le passe. Tous les styles ont les mêmes groupes de champs, avec ces limites :

• Champs d’en-tête (Haut du pass) : jusqu’à 3
• Champs principaux (Contenu principal) : 1. Sur une carte d’embarquement, le groupe s’appelle Champs principaux (Origine/Destination) et en contient 2
• Champs secondaires (Infos complémentaires) : jusqu’à 4
• Champs auxiliaires (Détails supplémentaires) : jusqu’à 4, ou 5 sur une carte d’embarquement
• Champs verso (Dos du pass)

Cliquez sur + Ajouter un champ dans chaque groupe dont vous avez besoin.

Pour chaque champ, définissez :

Clé (ID)	Identifiant de champ unique (généré automatiquement).
Étiquette	Étiquette courte sur le passe (par exemple, DE).
Valeur	Valeur affichée sur le passe (par exemple, SFO).
Message de modification	Texte dans la notification de mise à jour lorsque cette valeur change. Affiché uniquement lorsque la valeur change. Utilisez %@ pour la nouvelle valeur (par exemple, Porte changée en %@).

Sur la carte du champ, cliquez sur Format pour afficher les options de formatage. Cliquez sur X pour supprimer le champ.

Options de formatage

• Format de la valeur : Texte, Date / heure ou Nombre / devise.
• Alignement du texte : Par défaut (naturel), Gauche, Centré, Droite ou Naturel.
• Détecteurs de données (champs au verso uniquement) : transformez les numéros de téléphone, les liens, les adresses et les événements de calendrier en contenu cliquable sur les champs au verso.

Personnaliser le contenu du passe

Pour afficher des données propres au destinataire, comme un nom ou un solde de points, insérez un espace réservé de tag dans un champ de texte. Le bouton { } est disponible pour :

• Nom du pass, Description et Texte du logo
• l’Étiquette, la Valeur et le message de modification d’un champ
• Message du code-barres, Texte alternatif et Identifiant de regroupement

Pour insérer un espace réservé :

1. Cliquez sur { } à côté du champ de texte.
2. Choisissez le tag.
3. Choisissez un Format. Pour les options, consultez Personnaliser le contenu de la carte dans le constructeur Google Wallet, qui utilise la même boîte de dialogue.
4. Si vous le souhaitez, saisissez une valeur dans Valeur de rechange (si vide).

L’aperçu en direct affiche les valeurs des tags de l’utilisateur que vous saisissez dans ID utilisateur. Sans ID utilisateur, il affiche les espaces réservés.

Ajouter un code-barres

Sous CODE-BARRES, choisissez un format et saisissez les données à encoder :

1. Format du code-barres : choisissez l’apparence du code-barres et le type de scanner qui peut le lire.
   • Code QR (recommandé) : code carré que la plupart des téléphones et scanners lisent facilement. Idéal pour les coupons, les cartes de fidélité et la plupart des passes.
   • PDF417 : code-barres large composé de plusieurs rangées de lignes. Souvent requis pour les cartes d’embarquement de compagnies aériennes ou de transport en commun.
   • Aztèque : code carré compact, similaire au QR. Courant sur les billets d’événements et de transport.
   • Code128 : code-barres classique à lignes verticales. Choisissez-le uniquement si votre scanner ou votre système de point de vente nécessite un code-barres 1D.
2. Message du code-barres : la valeur encodée dans le code-barres (par exemple, un numéro de billet ou d’adhésion).
3. Texte alternatif (facultatif) : texte affiché sous le code-barres sur le passe.

Définir l’expiration et le statut

Sous EXPIRATION ET STATUT, contrôlez quand le passe est affiché, quand il expire et s’il est toujours valide :

• Date de pertinence (quand afficher le passe) : date et heure auxquelles le passe peut apparaître sur l’écran de verrouillage.
• Date d’expiration (quand le passe expire) : date et heure après lesquelles le passe est grisé dans Wallet.
• Marquer comme annulé (invalider ce passe) : case à cocher pour invalider le passe afin qu’il ne soit plus utilisable.

Options spécifiques au style et avancées

• Type de transport (Carte d’embarquement uniquement) : Aérien, Train, Bus, Bateau ou Générique.
• Identifiant de groupement : regroupez les passes associés dans Wallet.

Pertinence basée sur la localisation (facultatif)

Sous PERTINENCE BASÉE SUR LA LOCALISATION, le passe apparaît lorsque l’utilisateur est à proximité des emplacements que vous ajoutez. Pour chaque emplacement, définissez le texte affiché sur l’écran de verrouillage lorsque l’utilisateur est à proximité. Vous pouvez ajouter jusqu’à 10 emplacements.

Cliquez sur la carte, recherchez une adresse, collez des coordonnées ou importez une géozone pour ajouter un point. Faites glisser le marqueur pour affiner la position.

Une distance maximale (en mètres) contrôle la proximité à laquelle l’utilisateur doit se trouver pour que le passe reste pertinent.

Emplacements vs balises

La section PERTINENCE BASÉE SUR LA LOCALISATION configure uniquement les emplacements basés sur la carte. Vous définissez un lieu et une distance maximale en mètres. L’appareil utilise les services de localisation pour décider quand l’utilisateur est suffisamment proche. Wallet peut alors afficher le texte de votre écran de verrouillage pour cet emplacement.

Pour lier un passe à du matériel iBeacon en intérieur, utilisez la section PERTINENCE IBEACON ci-dessous.

Exemples de cas d’utilisation

• Vente au détail : une carte de fidélité ou un coupon apparaît lorsque le client est proche de votre magasin. Le texte de l’écran de verrouillage peut indiquer que vous êtes près du magasin et lui rappeler d’utiliser le passe.
• Événements : un billet d’événement apparaît lorsque l’utilisateur est près du lieu (stade, théâtre ou site du festival) afin qu’il puisse trouver rapidement le passe à l’entrée.
• Voyage : une carte d’embarquement devient visible près de l’aéroport ou du terminal de départ, de sorte que le passager voit les détails de la porte d’embarquement ou du vol sur l’écran de verrouillage avant d’ouvrir Wallet.
• Hôtellerie : un coupon ou un passe de membre peut apparaître près d’un café ou d’un hôtel que vous définissez.

Pertinence iBeacon (facultatif)

Sous PERTINENCE IBEACON, le passe apparaît lorsque l’appareil est à proximité d’un émetteur iBeacon physique qui diffuse un signal correspondant. Cela fonctionne en intérieur, là où les services de localisation basés sur la carte sont peu fiables.

Pour ajouter une balise, cliquez sur Ajouter une balise (jusqu’à 10 au total). Pour en supprimer une, cliquez sur × sur sa carte.

Pour chaque balise, définissez :

• Proximity UUID : l’identifiant de la balise (par exemple, B9407F30-F5F8-466E-AFF9-25556B57FE6D).
• Major et Minor (facultatif) : restreignent la correspondance à un lieu et à une seule balise. Chacun est un nombre de 0 à 65535, et 0 équivaut à un champ vide. Laissez les deux vides, ou définissez-les tous les deux sur 0, pour correspondre à toute balise diffusant cet UUID.
• Texte pertinent : le texte affiché sur l’écran de verrouillage lorsque le passe devient pertinent.

Saisir un ID utilisateur

Saisissez l’ID utilisateur Pushwoosh de la personne qui recevra ce passe. Pushwoosh délivre le passe à cet utilisateur et le liste sous UTILISATEUR sur Tous les passes.

Prévisualiser et valider

Un aperçu en direct se met à jour au fur et à mesure de vos modifications, vous permettant de voir approximativement à quoi ressemblera le passe dans Wallet.

L'aperçu peut différer sur un appareil

L’aperçu est une approximation. Le passe peut avoir une apparence différente sur un appareil réel. Le code-barres affiché est un espace réservé. Le vrai code-barres est généré dans le fichier .pkpass final.

Pour vérifier la conformité du passe avec les spécifications d’Apple sans le créer, cliquez sur Valider le passe. Le constructeur signale les images requises manquantes et d’autres problèmes.

Générer le passe

Sélectionnez Générer. Pushwoosh valide le passe et traite les images. La génération prend quelques secondes, après quoi le passe apparaît dans Tous les passes.

Pour la modification (y compris la mise à jour par numéro de série), le téléchargement et la suppression des passes après leur génération, consultez Gérer les passes existants. Pour envoyer le passe aux utilisateurs, consultez Partager des passes Wallet.

Pour délivrer un même design à de nombreux utilisateurs et mettre à jour en une fois les champs partagés sur tous les passes délivrés, créez plutôt une Wallet Pass Campaign. Une campagne utilise les mêmes sections de conception que ce constructeur.

Gérer les passes via l’API

Tout ce que fait le constructeur de passes est également disponible via l’API PassKit Designer : créer, mettre à jour, lister, télécharger et supprimer des passes.

API PassKit Apple Wallet