App Clips : créer une mini-version de son application iOS, de la carte Safari au code à scanner

Un client s’arrête devant une borne de parking, la carte d’un restaurant ou un échantillon de carrelage en magasin. Pour payer deux euros, consulter un menu ou visualiser un produit, il faudrait ouvrir l’App Store, chercher le bon éditeur, attendre un téléchargement de 150 Mo, puis créer un compte. Combien de personnes abandonnent avant la fin ? C’est précisément ce trou que les App Clips viennent boucher sur iOS.

Une App Clip, c’est une portion réduite de votre application, lancée à l’instant précis où elle sert, pour une seule tâche. On la croise dans Safari, dans Messages, sur la fiche d’un lieu ou en scannant un code collé sur une vitrine. Quelques secondes suffisent pour faire l’action, et l’utilisateur peut ensuite passer à l’application complète s’il le veut. Sur Android, le format équivalent porte le nom d’Instant Apps. Ce guide suit pas à pas le parcours iOS.

Au menu : afficher sur votre site une carte App Clip pleine page, remplir cette carte dans App Store Connect, tester tout le parcours avant d’avoir publié quoi que ce soit, puis créer les codes à scanner qui lanceront l’expérience dans le monde physique. Si votre projet est encore en phase de cadrage, la réflexion arrive tôt, puisqu’elle modifie le découpage des écrans et le périmètre de votre première version.

Ce qu’une App Clip change pour l’utilisateur, et où il la croise

Une phrase suffit pour le principe : plutôt que d’installer une application entière pour une action de trente secondes, l’utilisateur ouvre une version allégée qui ne fait que cette action. Un jeu laisse jouer le premier niveau, puis affiche un bouton pour télécharger le jeu complet. Reçue dans Messages, une vidéo s’ouvre dans un aperçu dédié, sans passer par l’App Store. On règle une borne de parking en scannant un QR code, paiement compris. Sur un échantillon de carrelage, un code déclenche un essai en réalité augmentée, directement dans le salon de la personne.

Mieux vaut connaître ces points d’entrée avant de dessiner le moindre écran, car ils fixent le contexte d’arrivée. Voici ceux qu’iOS propose :

1. Safari, par la bannière d’application ou par la carte pleine page présentée plus loin.
2. Messages, qui affiche un aperçu quand un lien reconnu arrive dans une conversation.
3. La fiche d’un lieu dans Maps, avec un bouton d’action du genre « commander ».
4. La recherche Spotlight, qui fait apparaître l’App Clip lorsque l’utilisateur saisit le nom du commerce.
5. Les suggestions Siri, lorsque l’appareil repère que la personne est près du lieu.
6. Le monde physique : un QR code, un tag NFC ou un code App Clip imprimé.

Remarquez le point commun entre tous ces cas : la personne a déjà une intention. Elle veut commander, payer, regarder. Votre App Clip n’a donc pas à la convaincre, elle doit lui faire gagner du temps. C’est une contrainte de cadrage autant que de code, et elle se note noir sur blanc dans le cahier des charges de l’application.

Afficher la carte App Clip en pleine page dans Safari

Avec la balise meta apple-itunes-app, celle qui génère la bannière en haut de page, votre site web peut déjà signaler votre application. Cette bannière a un défaut : elle réclame trois gestes à l’utilisateur. Il faut repérer le bandeau, toucher « ouvrir », puis confirmer sur la carte App Clip, et à chaque étape une partie des visiteurs s’en va.

Depuis iOS 15 et iPadOS 15, cette même balise sait afficher une carte App Clip sur toute la largeur, placée au milieu du contenu. L’image d’en-tête, le titre et le sous-titre apparaissent, et l’utilisateur lance l’App Clip en un seul geste. Une ligne suffit pour la mettre en place :

1. Reprenez la balise apple-itunes-app existante dans le <head> de la page.
2. Ajoutez-y la clé app-clip-display et donnez-lui la valeur card.
3. Gardez les clés déjà en place, en particulier l’identifiant de l’App Clip et celui de l’application.

Deux comportements sont à prévoir. D’abord, quand l’utilisateur choisit « voir dans Safari », le navigateur retient ce refus et ne montrera plus la carte aux visites suivantes : il revient à la bannière classique. La carte fonctionne aussi, ensuite, dans les applications tierces qui affichent votre site via SafariViewController. Intégrée dans l’app d’un partenaire, votre page devient alors un point de lancement, au sein même de cette app.

Renseigner la carte App Clip dans App Store Connect

Du point de vue de l’utilisateur, tout commence par cette carte et non par votre code. On y trouve quatre éléments : un titre, un sous-titre, l’action proposée (ouvrir, commander, réserver) et une image d’en-tête qui affiche votre marque. Chaque champ se remplit dans App Store Connect, écran après écran, via l’assistant de création d’expérience.

Un champ change beaucoup la donne : l’association à un lieu. Déclarer les adresses liées à votre App Clip ouvre trois canaux de découverte qu’aucun autre réglage ne débloque, à savoir la fiche de lieu dans Maps, les suggestions Siri de proximité et la recherche Spotlight. Un commerce à plusieurs points de vente fait ainsi de chaque adresse un point d’entrée vers son service. On retrouve la logique de la fiche App Store, détaillée dans les bases de l’ASO : c’est le soin apporté au titre, au visuel et à la promesse qui décide du taux d’ouverture.

Tester tout le parcours avec une expérience locale

Cas classique : en développement, votre App Clip marche, mais aucune expérience n’est encore enregistrée dans App Store Connect. Doit-on publier pour vérifier que le scan d’un QR code ouvre bien le bon écran ? Non. iOS offre pour cela les expériences locales, saisies directement sur l’appareil de test.

Pour y accéder, ouvrez les réglages de l’appareil, la section Developer, puis Local Experiences. On renseigne ensuite le préfixe d’URL, l’identifiant du bundle de l’App Clip, le titre, le sous-titre et l’action, avant de choisir une image d’en-tête dans la photothèque.

Deux limites à garder en tête, sous peine de conclusions fausses pendant la recette. D’une part, une expérience locale se déclenche par QR code, tag NFC, code App Clip, Safari et Messages, mais jamais depuis Maps, les suggestions de lieu ou Spotlight : ces trois canaux exigent une expérience enregistrée. D’autre part, le mécanisme ne vaut que pour une App Clip installée par Xcode ou distribuée en test bêta. Si votre testeur ne voit rien arriver, vérifiez d’abord ces deux conditions avant de soupçonner votre code.

Choisir le bon type de code App Clip

Le code App Clip est un visuel conçu par Apple, reconnaissable au premier coup d’œil, et il mène toujours vers une App Clip. C’est sa force : quand quelqu’un le voit sur une table ou une vitrine, il sait qu’une expérience l’attend derrière. Chaque code encode une URL propre à une expérience, et iOS décode cette URL avant de la transmettre à votre App Clip. Conséquence pratique à connaître : votre code existant de gestion des URL suffit, aucun traitement particulier n’est à écrire pour ces codes.

Combien coûterait votre application ?

Un devis estimatif détaillé en six questions, à partir des fourchettes de notre guide des prix.

Reste à choisir entre les deux familles disponibles :

• Le code à NFC intégré se lit avec l’appareil photo ou se déclenche quand on approche le téléphone. Il convient lorsque le client peut toucher le support : distributeur automatique, table de restaurant, vitrine à portée de main.
• Le code à scan seul ne fonctionne qu’avec la caméra. On le choisit dès que le support est hors d’atteinte, placé en hauteur par exemple, ou lorsque le code apparaît sur un écran, dans un e-mail de campagne.

Pour l’apparence, vous réglez la couleur du motif et celle du fond, et le logo App Clip peut être masqué. Laissez-le visible si la place le permet, car il dit au passant de quoi il s’agit, ce qu’un code nu n’apprend à personne. Si votre App Clip utilise ARKit, cas particulier intéressant, le code peut servir d’ancre et maintenir la scène en réalité augmentée au bon endroit. Collé sur un carton, un code permet alors d’explorer le contenu du colis sans l’ouvrir.

Générer ses codes en ligne de commande

Deux chemins mènent au fichier final. Le premier passe par App Store Connect, qui propose le téléchargement du code correspondant à une URL déjà enregistrée. Le second utilise l’outil App Clip Code Generator, à récupérer sur le site développeur d’Apple. Lequel choisir ? App Store Connect convient aux URL enregistrées et aux besoins ponctuels ; la ligne de commande s’impose pendant le développement, quand on veut davantage de personnalisation, ou quand il faut produire des codes en série pour cent points de vente.

Avec l’outil en ligne de commande, la procédure se fait en quatre temps :

1. Lister les gabarits disponibles grâce à la sous-commande templates, qui montre les paires de couleurs avec leur index.
2. Afficher les rendus dans le dossier /Library/Developer/AppClipCodeGenerator/SampleTemplates : un simple aperçu dans le Finder permet de comparer.
3. Exécuter la sous-commande generate en indiquant le type (NFC ou scan seul), l’URL enregistrée, l’index du gabarit choisi ainsi que le nom du fichier de sortie.
4. Vérifier le fichier SVG obtenu, puis le scanner à partir du module de lecture de codes du centre de contrôle.

Le format SVG n’est pas un détail. Comme il s’agit de vectoriel, le même fichier s’imprime proprement d’une feuille A4 jusqu’à une affiche grand format, sans repasser par la case génération. Pensez à archiver ces fichiers avec le reste de vos livrables de production, au même titre que vos pipelines de livraison décrits dans notre guide Fastlane et CI/CD mobile.

Ce que montrent les écrans, fonction par fonction

Pourquoi regarder des fiches App Store d’applications grand public dans un guide sur les App Clips ? Parce que l’exercice le plus difficile n’est pas technique : il consiste à désigner la seule tâche qui mérite de survivre dans la version allégée. Ces quatre écrans montrent comment des applications connues enchaînent déclencheur, action et récompense, selon la grille popularisée par Hooked (2014).

Ce qu’on voit : une image plein cadre, une phrase de promesse en grands caractères et le nom de la marque placé en bas. Pas de champ, pas de bouton de création de compte. Le geste : un pouce suffit pour faire défiler horizontalement les visuels de la fiche. Le lien avec l’écran suivant : il s’agit du déclencheur externe au sens de Hooked. Ce déclencheur crée une attente (le fameux geste de balayage) sans rien demander en retour, et l’utilisateur est ainsi prêt à accepter l’effort de l’écran d’après. Notre page modèle d’application Tinder détaille le découpage de ce parcours.

Ce qu’on voit : des bulles reprenant des amorces de questions et leurs réponses, mêlées à des vignettes de profils. Le geste : lire ces exemples, puis saisir ses propres réponses. Le lien avec l’écran suivant : on entre ici dans la phase d’investissement. Chaque réponse rédigée augmente la valeur perçue du compte et rend le retour plus probable, parce qu’on ne quitte pas facilement un profil que l’on a rempli soi-même. Transposé à une App Clip, c’est exactement ce qu’il faut repousser après la tâche : demander d’investir avant d’avoir rendu service, c’est perdre l’utilisateur.

Ce qu’on voit : une liste de cours (anglais, espagnol, italien, allemand, portugais, maths, musique), chacun avec son drapeau ou son icône et un chevron, l’ensemble classé sous deux en-têtes d’après la langue parlée. Le geste : appuyer une seule fois sur la ligne choisie. Le lien avec l’écran suivant : ce choix unique montre parfaitement ce qu’une App Clip doit contenir, puisqu’il engage l’utilisateur sans compte, sans réglage ni tutoriel. Notre page modèle d’application Duolingo présente la suite logique du parcours.

Ce qu’on voit : une question de traduction, quatre vignettes illustrées dont une est sélectionnée, une barre de progression, un compteur de vies, un bandeau de félicitations et un bouton « continuer » très visible. Le geste : toucher la bonne image, lire le retour, puis continuer. Le lien avec l’écran suivant : la récompense tombe immédiatement et change d’un exercice à l’autre, ce qui pousse à enchaîner. C’est juste après une réussite, à ce moment précis, qu’une App Clip a le plus de chances de convertir vers l’application complète. Ni à l’ouverture ni avant la tâche, mais après la récompense.

Les erreurs fréquentes

La plupart des déconvenues ne viennent pas du code, mais de l’impression et du cadrage. Voici celles qui reviennent le plus souvent :

• Un code trop petit. Sous 2,5 cm de large, on le voit et on le scanne mal. Un code un peu grand vaut mieux qu’un code illisible.
• Un code posé de travers. Le visuel doit être à plat et droit, sans faire tourner le motif ni le logo central.
• Un support gênant. Code partiellement masqué, abîmé, ou collé juste à côté d’un autre code : le scan hésite ou échoue.
• Aucun texte d’accompagnement. Placée à côté du code, une courte phrase d’action dit quoi faire et fait monter le nombre de scans.
• Tester Maps avec une expérience locale. Cela ne marchera jamais, car ce canal n’est pas couvert par la configuration locale.
• Oublier la mémoire de Safari. Une fois « voir dans Safari » choisi, la carte ne revient plus ; un test sur un appareil déjà utilisé peut donc tromper.

Questions fréquentes

Faut-il développer une application séparée ?

Non. L’App Clip fait partie de votre application, conçue pour une tâche précise, et l’utilisateur peut basculer vers l’app complète une fois cette tâche finie. Le travail consiste donc à découper le périmètre, et non à créer un second produit. Son coût s’évalue au cas par cas, selon ce que mobilise la tâche ; les ordres de grandeur figurent dans notre guide des prix d’une application mobile.

À partir de quelle version d’iOS cela fonctionne-t-il ?

Le code App Clip est disponible depuis iOS 14.3. Lors de la présentation du format, Apple évoquait près d’un milliard d’appareils déjà compatibles. L’affichage de la carte pleine page dans Safari, lui, demande iOS 15 ou iPadOS 15.

Mon App Clip doit-elle traiter les codes de façon particulière ?

Non, et c’est une bonne nouvelle pour le planning. iOS décode l’URL contenue dans le code avant de la transmettre à votre App Clip, qui reçoit donc une URL ordinaire. Votre gestion existante des liens entrants prend le relais telle quelle.

Peut-on vérifier le parcours avant la mise en ligne ?

Oui, avec les expériences locales, pourvu que l’App Clip soit installée par Xcode ou distribuée en test bêta. Cela couvre le QR code, le NFC, le code App Clip, Safari et Messages. Pour les canaux liés aux lieux, une expérience enregistrée reste obligatoire. Notre tutoriel publier une application sur l’App Store décrit la marche à suivre pour la publication.

Quiz : avez-vous tout retenu ?

Quelle valeur donner à la clé app-clip-display pour obtenir une carte pleine page ?

• banner
• card
• fullscreen
• clip

Avec la clé app-clip-display positionnée sur card dans la balise apple-itunes-app, la bannière laisse place à une carte affichée au milieu de la page.

Quel canal de découverte ne fonctionne jamais avec une expérience locale ?

• Le QR code
• Messages
• La fiche d’un lieu dans Maps
• Safari

Maps, Spotlight et les suggestions de proximité exigent une expérience enregistrée dans App Store Connect, tandis que les expériences locales couvrent le QR code, le NFC, le code App Clip, Safari et Messages.

Dans quel cas choisir un code à scan seul plutôt qu’un code à NFC intégré ?

• Sur une table de restaurant
• Sur un distributeur automatique
• Sur un visuel affiché dans un e-mail de campagne
• Sur une vitrine accessible à hauteur de main

Pour le NFC, il faut que le client puisse approcher son téléphone du support. Si le code est hors de portée ou s’affiche sur un écran, seul le scan par la caméra reste possible.

Que doit prévoir votre App Clip pour décoder l’URL d’un code App Clip ?

• Un décodeur maison du format visuel
• Une bibliothèque de lecture de QR codes
• Rien de particulier, iOS fournit déjà l’URL décodée
• Un appel réseau de résolution avant ouverture

iOS décode le visuel puis passe l’URL à l’App Clip. Pour ouvrir le bon écran, la gestion des liens entrants déjà présente dans votre application suffit.

Le périmètre à confier à cette version allégée ou le budget à prévoir vous font encore hésiter ? Demandez un devis d’application mobile, puis comparez les réponses poste par poste.

Besoin d’un avis technique sur votre projet d’application ?

Digital Unicorn, agence d’applications mobiles présentée dans ce guide, propose un échange gratuit de trente minutes pour situer votre projet : périmètre, technologies, ordre de grandeur budgétaire.

Réserver un créneau avec Digital Unicorn

Ou directement : contact@digitalunicorn.fr · 06 32 64 24 80. L’agence répond en général dans les 30 minutes (jours ouvrés).

Cadre du projet, ensuite

Un tutoriel store ou technique ne remplace pas un cahier des charges. Quand le périmètre existe (deux stores, un back-office, un paiement), ouvrez le modèle de CDC, les fourchettes du guide des prix, et la grille de devis. Les captures annotées de nos articles suivent la même logique que l’analyse d’écrans du CDC : une source réelle, une exigence écrite, pas une moodboard.

Fourchettes HT, France : MVP 15 000 à 40 000 €, ambition moyenne 40 000 à 120 000 €, complexe 120 000 à 300 000 €. Maintenance 15 à 20 % par an.

Un e-mail par semaine, et rien d’autre

Chaque semaine : un tutoriel mobile, les actualités des stores, les prix constatés qui bougent, et rien à vendre. Désinscription en un clic.

Votre adresse e-mail Je m’abonne

Aucune revente d’adresse. Vos données

Par la rédaction d’Agence Application Mobile. Article publié le 14 octobre 2026.