Partager et intégrer votre billetterie

Votre boutique est prête, vos produits sont complétés, et il faut maintenant que quelqu'un vienne acheter. Cet article porte sur cette dernière partie : comment amener votre visiteur jusqu'à votre billetterie.

Vous apprenez ici où se trouve votre adresse, comment la partager sur votre site web et sur les réseaux sociaux, comment en faire une affiche QR, et comment intégrer au besoin la boutique dans votre propre page. Si vous préférez une adresse à vous, comme billets.votreassociation.be, lisez Votre domaine propre.

D'abord : qu'est-ce qu'un lien, au juste ?

Un lien (aussi appelé url ou adresse web) est l'adresse d'une page sur internet. Tout comme une adresse postale désigne exactement une boîte aux lettres, un lien désigne exactement une page. Si vous le recopiez, ou si vous cliquez dessus, vous arrivez là et nulle part ailleurs.

Votre billetterie a une telle adresse, et elle ressemble à ceci :

https://{domein}/nl/s/hoevefeesten

Lisez-la de gauche à droite :

Morceau	Ce que cela signifie
https://	Le type de connexion. Le s signifie sécurisé : ce que votre visiteur tape circule chiffré
{domein}	Le nom de l'ordinateur où tourne la boutique
/nl/	La langue de la page. nl est le néerlandais, fr le français, en l'anglais
/s/	Le petit mot par lequel le système sait : ce qui suit est une boutique
hoevefeesten	Le code de votre organisation, le nom court de votre association

Pourquoi la langue figure-t-elle en tête ?

Parce qu'un lien a alors un seul sens, et un seul.

Beaucoup de sites retiennent votre choix de langue dans un cookie (un petit texte que le site laisse sur votre ordinateur). Cela fonctionne très bien jusqu'à ce que quelqu'un transmette ce lien : le destinataire reçoit alors la langue que lui a choisie auparavant, pas celle que vous vouliez. Un membre francophone qui reçoit le lien du secrétaire néerlandophone voit tout à coup une boutique en néerlandais.

Avec la langue dans l'adresse, cela ne peut pas arriver. /nl/ ouvre toujours le néerlandais, /fr/ toujours le français — même via WhatsApp, même après trois transferts, même sur un ordinateur partagé.

En pratique, cela signifie : choisissez consciemment la langue que vous partagez. Si vous placez un lien sur une page francophone de votre site web, utilisez /fr/. Si vous envoyez un seul e-mail à tout votre fichier de membres, utilisez la langue de cet e-mail. Votre visiteur peut toujours changer de langue dans la boutique elle-même.

Ce dont vous avez besoin au préalable

• Un compte avec accès à votre back-office ; pour consulter l'adresse, n'importe quel rôle autorisé à voir les paramètres ou les commandes suffit.
• Une boutique qui est en ligne. Si l'interrupteur La vente en ligne est active est désactivé, votre visiteur voit une page d'erreur « introuvable » au lieu de votre boutique. Voir Configurer votre organisation.
• Pour l'intégration : l'accès à votre propre site web, et le droit d'y coller du code.
• Dix minutes pour le partage, une demi-heure pour une affiche.

Étape 1 — Trouver votre adresse

Il y a deux endroits où vous trouvez votre adresse, et ils donnent la même.

Le plus rapide : allez dans Commandes et cliquez en haut à droite sur Ouvrir la boutique. Votre boutique s'ouvre dans un nouvel onglet. L'adresse figure en haut, dans la barre d'adresse de votre navigateur ; cliquez dedans et copiez-la avec Ctrl+C (Cmd+C sur un Mac).

Le plus complet : allez dans Paramètres → Organisation. Sous le formulaire se trouve le bloc Partager votre boutique, avec l'adresse de votre boutique prête à être copiée et un lien Ouvrir la boutique. Si vous avez un domaine propre qui est prêt, c'est cette adresse-là que vous voyez ici.

Vérifiez aussitôt deux choses avant de partager :

1. La boutique s'ouvre-t-elle comme vous l'attendez, avec vos produits dedans ?
2. La langue figure-t-elle en tête comme vous voulez la partager ?

Collez ensuite l'adresse quelque part où vous la retrouverez — dans une note, ou dans un e-mail à vous-même. Vous en aurez souvent besoin dans les semaines à venir.

Attention : si vous modifiez plus tard le code de votre organisation, votre adresse change avec lui et chaque lien que vous avez partagé cesse de fonctionner. Chaque affiche imprimée également. Choisissez donc bien ce code, une fois pour toutes, et laissez-le en place.

Étape 2 — Partager votre lien

Sur votre propre site web

Placez un bouton ou un lien texte clair portant le mot Billets, et faites- le pointer vers votre adresse. Mettez-le en haut de votre page d'accueil et sur chaque événement, pas seulement sur une page « infos pratiques » où personne ne va.

Presque tous les systèmes de site fonctionnent de la même manière : vous sélectionnez le mot qui doit devenir un lien, cliquez sur l'icône de chaîne, et collez l'adresse dans le champ qui apparaît. Réglez le lien pour qu'il s'ouvre dans un nouvel onglet lorsque votre système propose ce choix ; votre visiteur ne perd alors pas votre propre page.

Écrivez sur le bouton ce qui va se passer : Acheter des billets est meilleur que Cliquez ici, et bien meilleur que Plus d'infos.

Dans une newsletter

Même principe, avec une différence : ne collez jamais l'adresse nue dans le texte. Faites d'un mot un lien. Une url longue dans un e-mail est coupée sur deux lignes par certains logiciels de messagerie, et elle ne fonctionne alors plus.

Placez le lien au moins deux fois dans votre e-mail : une fois comme bouton en haut, une fois comme lien texte ordinaire en bas. Certains lecteurs ne voient pas les boutons ou ne leur font pas confiance.

Testez toujours votre newsletter sur votre propre téléphone avant de l'envoyer à quatre cents personnes. Cliquez réellement sur le lien.

Sur Facebook

Trois endroits, et tous les trois font autre chose.

Une publication sur votre page. Écrivez votre publication, collez-y l'adresse et attendez deux secondes : Facebook va alors chercher lui-même une carte d'aperçu avec le titre et une image de votre boutique. Dès que cette carte apparaît, vous pouvez effacer l'adresse de votre texte — la carte reste et demeure cliquable. Cela se lit plus proprement.

Le lien dans votre bio. C'est le champ avec votre site web dans les informations de votre page. Allez sur votre page, ouvrez les paramètres ou le bouton de modification de vos informations, cherchez le champ Site web et mettez-y votre adresse. C'est le lien que les gens cherchent quand ils consultent d'abord votre page et ne veulent acheter qu'ensuite.

Un bouton sur votre page. En haut d'une page Facebook peut figurer un bouton d'action. Vous choisissez lequel — pour une billetterie, En savoir plus ou Réserver sont les plus utiles. Vous trouvez ce réglage au niveau du bouton lui-même sur votre page ; vous choisissez un type de bouton, collez votre adresse et enregistrez.

Les écrans de Facebook changent tous les quelques mois. Si vous ne retrouvez pas quelque chose, cherchez dans leur propre centre d'aide « bouton d'action » ou « ajouter un bouton à une page » — l'opération elle-même reste la même : choisir le bouton, coller l'adresse, enregistrer.

Sur Instagram

Sur Instagram, vous ne pouvez pas placer de lien cliquable dans une publication ordinaire. Le texte d'une légende ne devient pas cliquable, même si vous le répétez dix fois.

Ce qui fonctionne en revanche :

1. Le lien dans votre profil. Allez sur votre profil, touchez Modifier le profil et mettez votre adresse dans le champ prévu pour votre site web. Renvoyez-y dans vos publications : « billets via le lien dans notre bio ».
2. Un lien dans une story. Vous pouvez y placer un autocollant de lien contenant votre adresse.

Si votre offre change souvent, mieux vaut mettre dans votre profil le lien vers votre boutique générale plutôt que vers un seul événement. Vous n'aurez pas à le remplacer chaque mois.

Dans un groupe WhatsApp

Collez simplement l'adresse dans le groupe. WhatsApp en fait lui-même un lien cliquable et affiche une carte d'aperçu.

Ajoutez une phrase qui dit ce que c'est et jusqu'à quand : « Billets pour la soirée fromage et vin du 12 octobre, inscriptions jusqu'à lundi. » Un lien nu dans un groupe animé est emporté par le défilement.

Étape 3 — Faire une affiche QR

Qu'est-ce qu'un code QR ?

Un code QR n'est rien d'autre qu'un lien, dessiné sous forme d'une trame de petits carrés noirs et blancs. Il n'y a là aucune magie et rien n'est envoyé : un téléphone qui le « lit » lit simplement cette adresse et l'ouvre. Il ne peut donc pas faire plus que votre lien, ni moins.

C'est aussi la réponse à « comment savoir si mon code QR fonctionne encore » : tant que votre lien fonctionne, il fonctionne.

Voici comment en faire un

1. Copiez votre adresse comme à l'étape 1.
2. Allez sur un générateur de QR. Il en existe beaucoup de gratuits ; cherchez « générateur code QR ». Choisissez-en un qui vous laisse télécharger une image (png ou svg) sans devoir créer de compte.
3. Collez votre adresse et créez le code.
4. Téléchargez-le de préférence en svg. C'est un dessin que vous pouvez agrandir sans perte de qualité. Si ce n'est pas possible, prenez un png d'au moins 1000 pixels de large — une petite image devient granuleuse à l'impression, et un code QR granuleux se scanne mal.

Attention : n'utilisez jamais un service proposant un code QR « dynamique » ou « traçable ». Ces codes ne pointent pas vers votre adresse mais vers celle du service, qui redirige ensuite votre visiteur. Cela semble pratique — vous pouvez changer la destination plus tard — mais cela signifie aussi que votre affiche cesse de fonctionner dès que ce service met fin à votre période d'essai gratuite, change de nom ou s'arrête. Avec deux cents affiches imprimées, c'est une découverte coûteuse. Un code QR ordinaire et statique, qui contient directement votre adresse, continue de fonctionner tant que votre adresse fonctionne, et ne coûte rien.

Sur l'affiche

• Taille. Une règle empirique qui fonctionne bien : un code QR destiné à être scanné à un mètre de distance mesure au moins 3 sur 3 centimètres. Si votre affiche est derrière une vitre et que votre visiteur est sur le trottoir, faites-le nettement plus grand — comptez environ un dixième de la distance de lecture. En cas de doute : plus grand.
• Du calme autour. Laissez autour du code une marge blanche d'environ quatre petits carrés de large. Sans cette marge, l'appareil photo d'un téléphone trouve le code plus difficilement.
• Contraste. Code foncé sur un fond clair. Pas l'inverse, et pas par-dessus une photo.
• Ajoutez du texte. Un code QR nu est moins scanné que vous ne le pensez. Écrivez en dessous ce qui se passe quand on scanne : Scannez pour vos billets. Et ajoutez l'adresse en lettres lisibles, pour qui préfère taper ou dont l'appareil photo ne coopère pas.

Testez-le. Deux fois.

Avant l'impression : imprimez un exemplaire sur une imprimante ordinaire, accrochez-le au mur, placez-vous à la distance où les gens se tiendront, et scannez avec votre propre téléphone. Faites-le faire aussi par quelqu'un d'autre, avec un téléphone d'une autre marque.

Après l'impression : sortez une affiche du carton et scannez à nouveau. Un imprimeur peut réduire votre fichier, le rogner ou l'imprimer sur un autre type de papier que prévu, et le papier brillant sous un spot donne des reflets. Cela vous coûte une minute et c'est le seul contrôle qui compte.

Étape 4 — Intégrer la boutique dans votre propre page

Si vous voulez que votre visiteur ne quitte pas votre site, vous pouvez placer la boutique comme un bloc dans une de vos pages. Cela s'appelle intégrer ou embedder.

Qu'est-ce qu'un iframe ?

Un iframe est une fenêtre dans une page web, dans laquelle une autre page web est affichée. Pensez à un tableau sur votre mur : le cadre est à vous, ce qui est dedans vient d'ailleurs. Votre visiteur voit votre page, avec dedans un morceau qui vient de votre billetterie.

Le code ressemble à ceci :

<iframe src="https://{domein}/nl/s/hoevefeesten"
        style="width:100%;height:900px;border:0"
        title="Tickets"></iframe>

Ce que fait chaque morceau :

Morceau	À quoi cela sert
src	L'adresse de votre boutique — remplacez-la ici par la vôtre
width:100%	Le cadre prend toute la largeur de la place qu'il reçoit
height:900px	La hauteur du cadre, en pixels. Voir l'avertissement ci-dessous
border:0	Pas de bordure autour du cadre
title	Ce qui se trouve dans le cadre. Nécessaire pour un lecteur d'écran, laissez-le donc

Attention à la hauteur. Un cadre n'est pas élastique : il ne grandit pas avec ce qu'il contient. S'il est trop bas, votre visiteur doit faire défiler à l'intérieur de ce petit cadre pour trouver le bouton Payer — et c'est exactement là que votre vente échoue. Prenez plutôt trop que trop peu ; 900 pixels est un début raisonnable, et testez ensuite vous-même sur un téléphone.

WordPress

1. Ouvrez la page et cliquez à l'endroit où la boutique doit venir.
2. Cliquez sur le + pour ajouter un bloc et cherchez HTML.
3. Choisissez le bloc HTML personnalisé (en anglais Custom HTML).
4. Collez le code ci-dessus dans le bloc, avec votre adresse dedans.
5. Enregistrez la page et regardez-la en tant que visiteur.

Attention avec WordPress.com : sur l'abonnement gratuit, un iframe est supprimé de votre page à l'enregistrement. Ce n'est pas une faute de votre part ni une faute de votre bloc : WordPress.com n'autorise ce code que sur un abonnement payant avec fonctions d'hébergement. Si votre bloc est vide après l'enregistrement, c'est la raison. Dans ce cas, faites simplement un lien, comme à l'étape 2.

Sur une installation WordPress à vous aussi : qui n'est pas administrateur n'a parfois pas le droit de placer ce code et le voit disparaître à l'enregistrement. Demandez alors à l'administrateur de votre site.

Wix

Dans l'éditeur Wix classique :

1. Cliquez à gauche sur Ajouter des éléments.
2. Cliquez sur Intégrer du code.
3. Choisissez, parmi les intégrations populaires, Intégrer du HTML.
4. Cliquez sur Saisir le code, collez votre code et cliquez sur Appliquer.
5. Faites glisser le cadre au bon endroit et donnez-lui une hauteur généreuse.

Si vous travaillez dans Wix Studio, le chemin s'appelle Ajouter des éléments → Intégrations et réseaux sociaux → Intégrer du code, et l'élément lui-même s'y nomme HTML iFrame. L'opération est la même : coller le code, appliquer.

Deux points tirés du manuel de Wix lui-même qui vous aident ici : votre code doit utiliser https:// (avec http://, rien n'apparaît sur votre site publié), et le cadre ne s'adapte pas tout seul à un petit écran. Mettez donc votre largeur à 100 % et vérifiez votre page sur un téléphone.

Squarespace

1. Modifiez la page et cliquez sur le + pour ajouter un bloc.
2. Choisissez le bloc Code.
3. Cliquez sur le petit crayon pour ouvrir le bloc et collez votre code.
4. Enregistrez.

Attention : un abonnement payant est ici nécessaire. Squarespace n'autorise le code iframe et JavaScript dans un bloc Code qu'à partir de leurs formules payantes (Core et supérieures). Sur un site d'essai ou un plan gratuit, cela ne fonctionne pas.

Et une particularité qui fait croire aux débutants que c'est cassé : tant que vous êtes connecté comme administrateur, Squarespace n'affiche parfois pas votre propre code, alors que les visiteurs le voient normalement. Utilisez leur bouton Preview in Safe Mode, ou regardez dans une fenêtre privée de votre navigateur, avant de conclure que cela ne fonctionne pas.

Google Sites

1. Ouvrez votre site et cliquez à droite sur Insérer.
2. Cliquez sur Intégrer.
3. Choisissez Intégrer le code et collez votre code.
4. Cliquez sur Suivant puis sur Insérer.
5. Agrandissez le cadre et cliquez en haut à droite sur Publier.

Vous pouvez aussi intégrer la boutique comme une page entière : Pages → Ajouter → Page intégrée en plein écran. Cela vous donne plus de hauteur et moins de défilement dans un petit cadre.

N'oubliez pas Publier. Ce que vous voyez en mode édition n'est pas encore ce que voit votre visiteur.

Les inconvénients de l'intégration, honnêtement

L'intégration n'est pas gratuite, même si elle ne coûte rien.

• La hauteur reste une estimation. Un panier qui devient plus long que votre cadre oblige votre visiteur à faire défiler dans un petit cadre. Sur un téléphone, cela se révèle malcommode.
• Deux barres de défilement. La page défile, et le cadre défile. Les gens s'y perdent.
• Votre propre site détermine la vitesse. Si votre site web est lent, votre boutique est lente — même si la boutique elle-même tourne bien. Avec un lien, votre visiteur n'en souffre pas.
• Tous les constructeurs ne l'autorisent pas. Sur un site WordPress.com gratuit et sur un Squarespace sans plan payant, cela ne fonctionne tout simplement pas.

Si cela ne fonctionne pas, ou si vous hésitez : faites simplement un lien. Un bouton clair Acheter des billets qui ouvre votre boutique vend mieux qu'un petit cadre à moitié fonctionnel, et rien ne peut s'y casser.

Le paiement se fait dans la fenêtre complète

Si votre boutique est intégrée dans votre propre page, votre visiteur choisit ses billets dans le cadre. Lorsqu'il clique sur Paiement, la page de paiement s'ouvre dans la fenêtre complète de son navigateur, à l'adresse de votre boutique.

C'est voulu. Les prestataires de paiement comme Mollie et Stripe n'affichent pas leur écran de paiement dans un cadre, et les navigateurs ne conservent pas les données du panier dans un cadre provenant d'un autre site. Après le paiement, votre visiteur arrive sur la page de confirmation de votre boutique, avec ses billets. Vous n'avez rien à configurer pour cela.

Erreurs fréquentes

Partager le lien avec la mauvaise langue dedans. Vous envoyez /nl/ à vos membres francophones. Regardez le morceau qui suit le domaine avant d'envoyer.

Modifier le code de l'organisation après l'impression des affiches. Chaque code QR sur papier ne mène alors plus nulle part. Ne modifiez plus votre code dès que vous l'avez partagé.

Utiliser un code QR d'un service gratuit avec période d'essai. Après trente jours, votre affiche pointe vers une page publicitaire de ce service. Utilisez un code statique qui contient directement votre adresse.

Faire un iframe trop bas. Votre visiteur voit bien les produits, mais pas le bouton pour payer. Testez sur un téléphone, pas seulement sur votre portable.

Ne jamais cliquer soi-même sur le lien. Testez chaque endroit où vous le placez, sur votre propre téléphone, avant de le lâcher devant votre public.

Et si …

Et si mon visiteur voit « introuvable » ou une boutique vide ?

Une page d'erreur « introuvable » signifie le plus souvent que l'interrupteur La vente en ligne est active est désactivé, ou que l'adresse n'est pas correcte (attention à votre code de l'organisation). Allez dans Paramètres → Organisation et regardez l'onglet Votre boutique. Voir Configurer votre organisation.

S'il est écrit « Rien n'est encore en vente », votre boutique fonctionne bien, mais aucun produit n'est en vente. Voir Produits et prix.

Et si je ne retrouve pas ma boutique dans Google ?

Cela peut signifier deux choses. Soit l'interrupteur Publié est désactivé — votre lien continue alors de fonctionner pour qui le connaît, mais les moteurs de recherche ne le reçoivent pas. Soit votre boutique est encore trop récente ; les moteurs de recherche ont besoin de temps.

Ne comptez de toute façon pas sur Google pour votre billetterie. Votre public arrive par vos propres canaux : votre newsletter, votre page, votre affiche.

Et si ma boutique intégrée reste vide ?

Regardez dans cet ordre :

1. Votre code contient-il https://, et non http:// ?
2. Le code est-il encore présent après l'enregistrement ? Rouvrez le bloc. S'il a disparu, c'est que votre constructeur de site le supprime — voyez les avertissements ci-dessus pour WordPress et Squarespace.
3. Regardez votre page dans une fenêtre privée ou en tant que visiteur déconnecté. Certains constructeurs n'affichent pas le code intégré à qui est connecté.

Si cela reste vide : faites simplement un lien. Ce n'est pas une défaite, c'est la manière qui fonctionne le mieux.

Et si le code QR de mon affiche ne se scanne pas ?

Souvent il est trop petit, trop proche d'autres encres, ou le fichier a été imprimé en trop basse résolution. Agrandissez-le, laissez une marge blanche autour, et réimprimez depuis un svg ou un grand fichier png. Testez avec deux téléphones différents.

Et si je dois donner mon lien dans une annonce imprimée ?

Mettez l'adresse complète en lettres lisibles, avec la langue dedans, et placez un code QR à côté. Qui tape, tape ; qui scanne, scanne. Une adresse à vous se lit nettement mieux en imprimé — voir Votre domaine propre.

Questions fréquentes

Puis-je créer un lien qui mène directement à un seul événement ? Pas vers une page à part : votre lien ouvre toujours toute votre boutique, avec tout ce que vous vendez l'un sous l'autre. Pour un produit avec créneaux horaires, c'est possible de façon plus ciblée : dans votre boutique, cliquez sur Choisissez un horaire pour ce produit, puis copiez l'adresse dans la barre d'adresse. Ce lien ouvre votre boutique avec le calendrier de ce produit déjà ouvert.

Mon ancien lien continue-t-il de fonctionner si je prends un domaine propre ? Oui. L'adresse sur la plateforme continue d'exister à côté de votre domaine propre. Voir Votre domaine propre.

Dois-je imprimer un code QR distinct pour chaque langue ? Ce n'est pas nécessaire. Choisissez la langue de votre public et laissez votre visiteur changer lui-même dans la boutique. Sur une affiche bilingue, deux codes figurent bien, chacun avec sa langue — indiquez alors clairement NL et FR à côté.

L'intégration est-elle meilleure pour ma marque que le lien ? À peine. Votre visiteur voit dans les deux cas votre logo et vos couleurs, car ils se trouvent dans votre boutique elle-même. Si vous voulez vraiment votre nom dans la barre d'adresse, un domaine propre est la meilleure voie, et vous pouvez le combiner avec un lien ordinaire.

Puis-je voir combien de personnes ont cliqué sur mon lien ? Ce que vous voyez en tout cas, c'est ce que cela a rapporté : vos commandes, avec le canal. Voir Suivre les commandes.