Intégrez votre billetterie sur votre site web

Vendez vos billets directement sur votre propre site web. Avec l'intégration EventSquare, vous placez votre billetterie sur n'importe quelle page. Elle adapte sa hauteur à son contenu, suit la position de défilement de votre page et fonctionne sur ordinateur comme sur mobile.

Astuce : vous n'avez pas besoin d'écrire le code vous-même. Dans l'admin EventSquare, ouvrez votre billetterie et allez dans Intégrer sur votre site web. Vous y trouverez un extrait de code déjà complété pour votre billetterie, prêt à être copié.

Démarrage rapide

Collez ce code à l'endroit où la billetterie doit apparaître :

<div id="eventsquare-store"></div>  <script>   window.EventSquare = window.EventSquare || function () { (EventSquare.q = EventSquare.q || []).push(arguments); };   EventSquare('init', {     store: 'https://votreevenement.eventsquare.store/fr/edition/canal',     target: '#eventsquare-store',   }); </script> <script src="https://votreevenement.eventsquare.store/embed/v1.js" async></script>

C'est tout. Remplacez l'URL store par le lien vers votre propre billetterie (vous le trouverez dans l'admin).

Ce que fait ce code :

La <div> indique l'endroit de votre page où la billetterie apparaît.
Le premier <script> configure la billetterie. Il peut s'exécuter avant le chargement du script EventSquare : les appels sont mis en file d'attente, puis exécutés.
Le dernier <script> charge le script d'intégration EventSquare. Grâce à async, il ne ralentit jamais votre page.

Intégration en HTML uniquement (créateurs de sites)

Certains créateurs de sites (constructeurs de pages WordPress, Wix, Squarespace, …) n'autorisent pas le JavaScript en ligne ou le suppriment. Utilisez alors cette version, sans configuration JavaScript :

<div data-eventsquare-store="https://votreevenement.eventsquare.store/fr/edition/canal"></div> <script src="https://votreevenement.eventsquare.store/embed/v1.js" async></script>

Les options se définissent avec des attributs data- :

<div   data-eventsquare-store="https://votreevenement.eventsquare.store/fr/edition/canal"   data-background="opaque"   data-scroll-offset="80"   data-title="Billets pour mon festival" ></div>

Options

Option	Attribut data	Par défaut	Description
`store`	`data-eventsquare-store`	—	Obligatoire. L'URL de votre billetterie.
`target`	—	—	Obligatoire (intégration JavaScript). Sélecteur CSS ou élément dans lequel placer la billetterie, p. ex. `'#eventsquare-store'`.
`background`	`data-background`	`'transparent'`	`'transparent'` : la billetterie se fond dans votre page. `'opaque'` : la billetterie reçoit sa propre couleur de fond, utile sur des fonds sombres ou chargés.
`scrollOffset`	`data-scroll-offset`	`16`	Espace en pixels conservé au-dessus de la billetterie lorsqu'elle défile dans la vue (voir Défilement). Indiquez la hauteur de votre en-tête fixe (sticky).
`minHeight`	—	`450`	Hauteur en pixels réservée pendant le chargement de la billetterie, et plus petite hauteur qu'elle peut prendre.
`title`	`data-title`	`'Ticket shop'`	Titre du cadre intégré, lu par les lecteurs d'écran.
`checkout`	`data-checkout`	`'inline'`	`'inline'` : la commande se déroule dans la billetterie intégrée (voir Commande et paiement). `'window'` : les visiteurs poursuivent vers la page de commande d'EventSquare dans la fenêtre complète du navigateur.
`tickets`	`data-tickets`	`'button'`	Après la commande : `'button'` affiche un message de remerciement avec un bouton qui ouvre les billets dans une nouvelle fenêtre. `'redirect'` affiche automatiquement les billets dans la billetterie intégrée. `'none'` n'affiche rien : la billetterie intégrée disparaît et vous affichez votre propre confirmation. Voir Après la commande.
`tracking`	`data-tracking`	`'host'`	`'host'` : vos balises de suivi (Google Analytics, Google Tag Manager, Meta, TikTok) fonctionnent sur votre page, grâce aux événements de suivi ; les intégrations que vous avez connectées dans l'admin EventSquare ne fonctionnent pas dans la billetterie intégrée. `'frame'` : elles fonctionnent aussi dans la billetterie intégrée, comme sur votre page de billetterie habituelle. Voir Suivi et consentement aux cookies.

Langue

La langue fait partie de l'URL de la billetterie : https://votreevenement.eventsquare.store/fr/... (français), /nl/... (néerlandais), /en/... (anglais). Si vous omettez la langue (https://votreevenement.eventsquare.store/edition/canal), la billetterie choisit la langue du navigateur de votre visiteur.

Votre site est multilingue ? Utilisez alors, sur chaque version linguistique de votre page, l'URL de la billetterie dans la langue correspondante.

Mise en page et style

La billetterie occupe toujours 100 % de la largeur de son conteneur. Pour limiter la largeur, donnez au conteneur une width ou une max-width :
```
<div id="eventsquare-store" style="max-width: 800px; margin: 0 auto;"></div>
```
La hauteur est automatique. Ne donnez pas de height fixe au conteneur.
La billetterie a des coins arrondis et son propre style, et utilise la couleur de marque définie dans l'admin EventSquare. Aucun CSS supplémentaire n'est nécessaire.
Sur des fonds sombres ou des photos, utilisez background: 'opaque' pour que tout le texte reste lisible.

Défilement

Lorsqu'un visiteur passe à l'étape suivante (par exemple de Billets à Panier) et que le haut de la billetterie n'est pas visible, votre page fait défiler la billetterie en douceur pour la remettre en vue. Si votre site a un en-tête fixe (sticky), réglez scrollOffset sur sa hauteur pour que la billetterie ne passe pas derrière :

EventSquare('init', {   store: 'https://votreevenement.eventsquare.store/fr/edition/canal',   target: '#eventsquare-store',   scrollOffset: 80, // hauteur de votre en-tête fixe en px });

Commande et paiement

Tout l'achat des billets se déroule dans la billetterie intégrée, et les visiteurs restent sur votre site :

Les visiteurs choisissent leurs billets et remplissent leurs coordonnées dans la billetterie intégrée.
Seul le paiement lui-même s'ouvre dans une petite fenêtre pop-up, car les banques et les prestataires de paiement n'autorisent pas les paiements dans des cadres intégrés. Pendant ce temps, la billetterie affiche un message avec un bouton pour rouvrir la fenêtre de paiement si elle a été fermée. Si la pop-up est bloquée (par exemple dans certains navigateurs intégrés aux applications), le paiement s'ouvre dans la fenêtre complète du navigateur.
Les commandes gratuites et les invitations ne nécessitent pas de paiement : il n'y a donc pas de pop-up.
Après la commande, la billetterie affiche un message de remerciement avec un bouton qui ouvre les billets dans une nouvelle fenêtre. Les visiteurs reçoivent aussi leurs billets par e-mail.

Après la commande

Choisissez ce qui se passe après la commande avec l'option tickets (ou data-tickets) :

`tickets`	Ce que voient les visiteurs
`'button'` (par défaut)	Un message de remerciement avec un bouton qui ouvre les billets dans une nouvelle fenêtre.
`'redirect'`	Les billets, immédiatement, dans la billetterie intégrée.
`'none'`	Rien d'EventSquare : la billetterie intégrée disparaît et vous affichez votre propre confirmation grâce à l'événement `tickets`.

EventSquare('init', {   store: 'https://votreevenement.eventsquare.store/fr/edition/canal',   target: '#eventsquare-store',   tickets: 'redirect', // ou 'none' });

Votre propre confirmation avec tickets: 'none' :

// D'abord écouter, puis init (voir « Configurer les écouteurs » sous Événements) EventSquare('on', 'tickets', function (order) {   // La billetterie intégrée s'est masquée : affichez votre propre message   var link = document.createElement('a');   link.href = order.url;   link.target = '_blank';   link.textContent = 'Téléchargez vos billets';   document     .getElementById('eventsquare-store')     .replaceChildren('Merci pour votre commande ' + order.transaction_id + ' ! ', link); });  EventSquare('init', {   store: 'https://votreevenement.eventsquare.store/fr/edition/canal',   target: '#eventsquare-store',   tickets: 'none', });

Les visiteurs reçoivent toujours aussi leurs billets par e-mail.

Événements (pour les développeurs)

Écoutez ce qui se passe dans la billetterie, par exemple pour afficher un message ou enregistrer des statistiques.

Événement	Données	Quand
`ready`	—	La billetterie est chargée.
`resize`	`{ height }`	La hauteur de la billetterie a changé (en px).
`navigate`	`{ path }`	Le visiteur est passé à une autre étape ou page de la billetterie.
`add_to_cart`	voir Événements de suivi	Des billets ont été ajoutés au panier.
`remove_from_cart`	voir Événements de suivi	Des billets ont été retirés du panier.
`begin_checkout`	voir Événements de suivi	Le visiteur a commencé la commande (une fois par panier).
`purchase`	voir Événement purchase	Une commande a été finalisée (payante, gratuite ou invitation).
`tickets`	voir Événement tickets	Les billets de la commande finalisée sont prêts.

Les callbacks reçoivent (data, instance). Les événements ne contiennent jamais de données personnelles de vos visiteurs (pas de noms, d'adresses e-mail ni d'autres données client).

Configurer les écouteurs

Ajoutez vos écouteurs avant EventSquare('init', …), dans le même script, juste après la première ligne (le loader). Le loader met chaque appel en file d'attente jusqu'au chargement du script d'intégration, puis les exécute dans l'ordre. Vos écouteurs sont ainsi en place avant le démarrage de la billetterie et aucun événement n'est manqué :

<div id="eventsquare-store"></div>  <script>   // 1. Loader : toujours en premier   window.EventSquare =     window.EventSquare ||     function () {       (EventSquare.q = EventSquare.q || []).push(arguments);     };    // 2. Écouteurs   EventSquare('on', 'ready', function () {     console.log('La billetterie est chargée');   });   EventSquare('on', 'navigate', function (event) {     console.log('Le visiteur est allé vers', event.path);   });    // 3. La billetterie   EventSquare('init', {     store: 'https://votreevenement.eventsquare.store/fr/edition/canal',     target: '#eventsquare-store',   }); </script> <script src="https://votreevenement.eventsquare.store/embed/v1.js" async></script>

EventSquare('on', …) écoute toutes les billetteries de la page, y compris celles intégrées avec data-eventsquare-store : placez alors le loader et vos écouteurs dans un script avant le script d'intégration.
Vous utilisez un gestionnaire de balises ou un script séparé ? Veillez à ce qu'il exécute lui-même la ligne du loader (cela peut se faire plusieurs fois) et ajoute les écouteurs avant que la billetterie puisse être utilisée. Les événements survenus avant l'ajout d'un écouteur ne sont pas répétés, sauf ready : un écouteur ready ajouté plus tard est tout de même appelé.
Les exemples ci-dessous omettent le loader et init par souci de concision.

Événements de suivi

La billetterie signale les mêmes étapes qu'EventSquare envoie à Google Analytics, Meta et TikTok lorsque vous les connectez dans l'admin EventSquare. Vous pouvez ainsi les mesurer avec vos propres balises sur votre site (voir Suivi et consentement aux cookies pour savoir pourquoi) :

Événement	Google Analytics 4	Meta Pixel	TikTok Pixel	Envoyé par
`add_to_cart`	`add_to_cart`	`AddToCart`	`AddToCart`	Billetterie
`remove_from_cart`	`remove_from_cart`	—	—	Billetterie
`begin_checkout`	`begin_checkout`	`InitiateCheckout`	`InitiateCheckout`	Commande (inline)
`purchase`	`purchase`	`Purchase`	`PlaceAnOrder`	Commande (inline)

Tous les événements de suivi utilisent les champs des événements e-commerce de Google Analytics 4 : currency, value (le total de la modification, du panier ou de la commande), items (voir Événement purchase), ainsi que event, edition et channel. begin_checkout et purchase ne sont envoyés que lorsque la commande se déroule dans la billetterie intégrée (checkout: 'inline', la valeur par défaut).

Pour tous les transmettre en une fois :

var metaEvents = { add_to_cart: 'AddToCart', begin_checkout: 'InitiateCheckout', purchase: 'Purchase' }; var tiktokEvents = { add_to_cart: 'AddToCart', begin_checkout: 'InitiateCheckout', purchase: 'PlaceAnOrder' };  ['add_to_cart', 'remove_from_cart', 'begin_checkout', 'purchase'].forEach(function (name) {   EventSquare('on', name, function (data) {     // Google Tag Manager : videz d'abord l'objet ecommerce précédent (recommandé par Google)     window.dataLayer = window.dataLayer || [];     window.dataLayer.push({ ecommerce: null });     window.dataLayer.push({ event: name, ecommerce: data });      // Ou Google Analytics 4 (gtag.js)     // gtag('event', name, data);      var summary = {       value: data.value,       currency: data.currency,       content_ids: data.items.map(function (item) { return item.item_id; }),       content_type: 'product',     };     if (window.fbq && metaEvents[name]) {       // eventID : permet à Meta de le combiner avec le même événement d'un autre pixel (pas de double comptage)       fbq('track', metaEvents[name], summary, name === 'purchase' ? { eventID: data.order_id } : undefined);     }     if (window.ttq && tiktokEvents[name]) ttq.track(tiktokEvents[name], summary);   }); });

Suivi et consentement aux cookies

Par défaut (tracking: 'host'), la billetterie intégrée et la commande n'exécutent aucun suivi : ni le Google Analytics, le Google Tag Manager, le Meta Pixel, le TikTok Pixel ou la balise de conversion que vous avez connectés dans l'admin EventSquare, ni les statistiques propres d'EventSquare. Votre page reçoit à la place les événements de suivi et les transmet à vos balises. C'est ainsi que fonctionnent la plupart des modules de commande intégrés, car :

Consentement aux cookies : votre bannière cookies ne couvre que votre propre page. Des balises dans la billetterie intégrée fonctionneraient sans le consentement de votre visiteur ; les balises sur votre page le respectent, comme le reste de votre site.
Mesure fiable : les navigateurs (Safari, Firefox, et Chrome avec des paramètres de confidentialité) bloquent ou isolent les cookies dans les cadres intégrés, si bien que les balises y perdent la trace de vos visiteurs. Pas les balises sur votre page.
Attribution : les identifiants de clic publicitaire et les balises UTM (gclid, fbclid, utm_…) se trouvent dans l'adresse de votre page, où vos balises peuvent les voir.
Pas de double comptage : chaque conversion est comptée une seule fois, par vos balises.

Vous préférez malgré tout utiliser les intégrations de l'admin EventSquare dans la billetterie intégrée ? Réglez tracking: 'frame' (ou data-tracking="frame"). N'envoyez alors pas les mêmes événements aux mêmes pixels depuis votre page, ou dédupliquez-les (p. ex. avec l'eventID de Meta), pour ne pas compter les conversions deux fois.

Les visiteurs qui ouvrent votre billetterie directement (sans intégration), ainsi que les anciens codes d'intégration sans le script d'intégration, continuent d'utiliser les intégrations de l'admin EventSquare comme avant. Avec checkout: 'window', la commande s'ouvre elle-même dans la fenêtre complète du navigateur et les utilise aussi.

Événement purchase

Envoyé une fois par commande, dès que la commande est confirmée, pendant que le visiteur voit le message de remerciement. Disponible lorsque la commande se déroule dans la billetterie intégrée.

Les champs suivent l'événement purchase de Google Analytics 4 : vous pouvez donc transmettre les données telles quelles :

EventSquare('on', 'purchase', function (purchase) {   // Google Analytics 4 (gtag.js)   gtag('event', 'purchase', purchase);    // Google Tag Manager   window.dataLayer = window.dataLayer || [];   window.dataLayer.push({ event: 'purchase', ecommerce: purchase });    // Meta Pixel   fbq('track', 'Purchase', { value: purchase.value, currency: purchase.currency }, { eventID: purchase.order_id }); });

Champ	Exemple	Description
`transaction_id`	`"HRG66616"`	Référence de la commande, telle que le visiteur la voit et dans l'e-mail de confirmation.
`order_id`	`"05ab4e26-e168-…"`	Identifiant unique de la commande. Utilisez-le pour ne pas compter une commande deux fois.
`value`	`22.28`	Montant total payé, frais compris. `0` pour les commandes gratuites.
`currency`	`"EUR"`	Code de devise ISO 4217.
`invitation`	`false`	`true` si la commande est une invitation.
`items`	voir ci-dessous	Les billets et produits de la commande.
`event`	`{ "id": "682075652458", "name": "Demo" }`	L'événement.
`edition`	`{ "id": "059710758584", "name": "2027" }`	L'édition de l'événement.
`channel`	`{ "id": "620258808826" }`	Le canal de vente (billetterie).

Chaque élément de items :

Champ	Exemple	Description
`item_id`	`"451871480410"`	Identifiant du type de billet ou du produit.
`item_name`	`"Billet d'entrée"`	Nom du type de billet ou du produit.
`item_category`	`"ticket"`	`"ticket"` ou `"product"`.
`price`	`10`	Prix unitaire, hors frais.
`quantity`	`2`	Nombre d'articles.
`discount`	`0`	Réduction par article.
`fee`	`1.14`	Frais de service par article.
`show`	`null`	Pour les représentations (dates / créneaux horaires) : `{ id, name }`.

Événement tickets

Envoyé lorsque la confirmation d'une commande finalisée s'affiche, juste après l'événement purchase, avec le lien vers les billets du visiteur. Utilisez-le pour afficher votre propre confirmation avec tickets: 'none' (voir Après la commande).

EventSquare('on', 'tickets', function (order) {   console.log(order.url); // https://tickets.eventsquare.io/… });

Champ	Exemple	Description
`url`	`"https://tickets.eventsquare.io/10c1b57b-…"`	Lien vers les billets du visiteur (consulter et télécharger).
`order_id`	`"05ab4e26-e168-…"`	Identifiant unique de la commande (le même que dans l'événement `purchase`).
`transaction_id`	`"HRG66616"`	Référence de la commande (la même que dans l'événement `purchase`).

Traitez le lien des billets comme un mot de passe. Toute personne disposant du lien peut ouvrir les billets. Montrez-le au visiteur, mais ne l'envoyez jamais à des outils de statistiques, des gestionnaires de balises ou d'autres tiers. C'est pourquoi il s'agit d'un événement séparé : les données de purchase peuvent être transmises telles quelles à vos statistiques.

Tester votre suivi

Pas besoin de passer une commande pour tester votre configuration. EventSquare('test', event) déclenche un événement d'exemple sur votre page, avec les mêmes champs qu'un vrai et test: true :

EventSquare('test', 'purchase');     // un événement EventSquare('test');                 // tous les événements de suivi : add_to_cart, remove_from_cart, begin_checkout, purchase, tickets

Exécutez-le dans la console de développement de votre navigateur sur la page contenant la billetterie intégrée, ou depuis votre propre code. L'événement va uniquement aux écouteurs de votre page (EventSquare('on', ...)) : rien n'est envoyé à EventSquare, aucune commande n'est créée et aucune billetterie ne doit être chargée. L'achat d'exemple a un transaction_id commençant par TEST et une valeur de 50 EUR.

Excluez les données de test de vos rapports en vérifiant l'indicateur :

EventSquare('on', 'purchase', function (purchase) {   if (purchase.test) return console.log('Achat de test EventSquare', purchase);   gtag('event', 'purchase', purchase); });

Ou, pendant vos tests avec le mode aperçu de Google Tag Manager (Tag Assistant), continuez à les transmettre et vérifiez que vos balises se déclenchent. Passez ensuite une vraie commande pour tester l'ensemble du parcours : un billet gratuit, ou un billet payant via le lien d'aperçu de la billetterie en mode test (sans paiement réel).

API JavaScript (pour les développeurs)

Une fois le script d'intégration chargé, vous pouvez aussi utiliser l'API directement. Ajoutez les écouteurs d'une instance juste après init, dans le même script (la billetterie se charge de manière asynchrone, vous ne manquez donc rien) :

var store = EventSquare.init({   store: 'https://votreevenement.eventsquare.store/fr/edition/canal',   target: '#eventsquare-store', });  store.on('navigate', function (event) { /* ... */ }); store.off('navigate', handler); store.destroy(); // retire la billetterie de la page

Commande	Description
`EventSquare('init', options)`	Intégrer une billetterie. `EventSquare.init(options)` renvoie l'instance.
`EventSquare('on', event, callback)`	Écouter un événement de toutes les billetteries intégrées.
`EventSquare('off', event, callback)`	Arrêter l'écoute.
`EventSquare('destroy')`	Retirer toutes les billetteries intégrées.
`EventSquare('test', event)`	Déclencher un événement de suivi d'exemple (`test: true`) sur votre page, voir Tester votre suivi. Sans `event` : tous les événements de suivi.
`EventSquare.scan()`	Rechercher de nouveaux éléments `data-eventsquare-store` (après les avoir ajoutés dynamiquement).

Instance	Description
`instance.on(event, callback)`	Écouter uniquement les événements de cette billetterie.
`instance.off(event, callback)`	Arrêter l'écoute.
`instance.destroy()`	Retirer cette billetterie de la page.
`instance.iframe`	L'élément `<iframe>`.

Applications monopage (React, Vue, Angular, …)

Chargez le script d'intégration une seule fois, par exemple dans votre index.html. Créez ensuite la billetterie au montage de votre composant et retirez-la à son démontage :

// Exemple React useEffect(() => {   const store = window.EventSquare.init({     store: 'https://votreevenement.eventsquare.store/fr/edition/canal',     target: containerRef.current,   });   return () => store && store.destroy(); }, []);

target accepte aussi bien un élément qu'un sélecteur CSS.

Content Security Policy

Votre site utilise une Content Security Policy (CSP) ? Autorisez alors EventSquare (la billetterie, ainsi que les pages de commande et de billets sur eventsquare.io qui s'y ouvrent) :

script-src https://*.eventsquare.store; frame-src  https://*.eventsquare.store https://*.eventsquare.io;

Dépannage

La billetterie n'apparaît pas.

Ouvrez la console de développement de votre navigateur. Le script d'intégration affiche des messages clairs commençant par [EventSquare], par exemple lorsque l'URL store ou target manque.
Vérifiez que votre créateur de site n'a pas supprimé les balises <script>. Si c'est le cas, utilisez l'intégration en HTML uniquement.
Vérifiez votre Content Security Policy.
Les bannières cookies et les gestionnaires de balises bloquent parfois les scripts de domaines inconnus. Le script d'intégration est nécessaire au fonctionnement de la billetterie : autorisez-le.

La billetterie est coupée ou affiche une barre de défilement.

Supprimez toute height fixe sur le conteneur ou sur l'<iframe>.
Vérifiez que vous utilisez le code d'intégration le plus récent de l'admin (avec embed/v1.js).

La billetterie passe derrière mon en-tête fixe lors d'un changement d'étape.

Réglez scrollOffset (ou data-scroll-offset) sur la hauteur de votre en-tête.

Le texte est difficile à lire sur mon arrière-plan.

Utilisez background: 'opaque' (ou data-background="opaque").

Mes écouteurs ne reçoivent pas l'événement purchase (ni d'autres événements de suivi).

Testez d'abord votre code d'écoute avec EventSquare('test', 'purchase') dans la console de développement (voir Tester votre suivi).
Ajoutez les écouteurs avant EventSquare('init', …) (voir Configurer les écouteurs).
begin_checkout, purchase et tickets nécessitent que la commande se déroule dans la billetterie intégrée : ne réglez pas checkout: 'window'.
Testez sur un serveur web (http:// ou https://), comme votre vrai site, et non avec un fichier HTML ouvert depuis votre ordinateur (file://).

Toujours bloqué ? Contactez le support EventSquare en indiquant l'URL de la page où vous avez intégré la billetterie.