Intégrer le widget Billy sur votre site web
Intégrez le widget de paiement Billy sur n'importe quel site, en direct dans la page ou dans une fenêtre modale.
Qu'est-ce qu'un widget ?
Un widget est un petit bloc de code autonome que vous pouvez facilement intégrer à votre site web pour ajouter des fonctionnalités spécifiques, sans avoir besoin de développements complexes.
Avec le widget Billy, vos fans peuvent acheter leurs billets directement sur votre site, sans redirection ni friction.
Pourquoi choisir le widget Billy ?
Le widget Billy est conçu pour être rapide, flexible et simple à utiliser.
Facile à installer sur Webflow, WordPress ou Shopify, il fluidifie l'expérience d'achat, améliore le processus de paiement et augmente vos conversions.
C'est une solution sécurisée, performante et intuitive, parfaitement intégrée à votre site.
Avant de commencer…
Où trouver votre Sales Channel ID
Publiez d'abord votre Sales Channel
Important : vous ne verrez PAS de Sales Channel ID tant que votre Sales Channel n'aura pas été publié. Si le canal est encore en brouillon, le lien et l'ID n'existent pas encore.
Ouvrez vos Sales Channels
- Allez dans Studio → Events → Sales Channels
- Sélectionnez le canal que vous souhaitez utiliser
- Descendez en bas de la page et cliquez sur le bouton Share
Récupérez votre Sales Channel ID
- Le Sales Channel ID est simplement le long code situé à la fin de l'URL.
- Exemple d'URL :
https://events.billyapp.live/12b8b09a-eb23-4d65-ba92-f6059cb18648→ Ici,12b8b09a-eb23-4d65-ba92-f6059cb18648est votre Sales Channel ID.
Script obligatoire
La première étape consiste à intégrer le script qui permet de créer les fenêtres modales de vos événements, ou de gérer l'iframe que vous insérez dans votre page.
<script type="text/javascript" defer src="https://events.billyapp.live/embed.js"></script>Dans tous les exemples ci-dessous, vous devez remplacer YOUR_SALES_CHANNEL_ID par l'ID fourni par Billy pour votre canal de distribution.
Option 1: Widget directement dans la page
Si vous souhaitez intégrer le widget directement dans votre page, il vous suffit de créer un iframe et de ne pas oublier d'ajouter le <script> obligatoire dans votre site.
<iframe src="https://events.billyapp.live/YOUR_SALES_CHANNEL_ID" width="100%" height="500px" style="border:0;"></iframe>Le <script> indiqué plus haut s'occupe automatiquement d'ajuster la taille de l'iframe lorsque l'utilisateur navigue dans le widget, et assure la bonne connexion entre votre site et le widget.
Option 2: Widget dans une fenêtre modale (après un clic sur un bouton)
Vous pouvez déclencher l'ouverture de la modale de deux façons :
- Avec un simple lien
<a>:
<a href="https://events.billyapp.live/YOUR_SALES_CHANNEL_ID">
Open Billy Event in a dialog
</a>- Avec un
<button>:
<button aria-haspopup="dialog" aria-controls="billy-dialog-YOUR_SALES_CHANNEL_ID" aria-expanded="false">
Open Billy Event in a dialog
</button>Si vous utilisez le bouton, nous employons des attributs HTML pour ouvrir la modale. Vous devez créer un élément avec ces attributs :
aria-haspopup="dialog"aria-controls="billy-dialog-YOUR_SALES_CHANNEL_ID"aria-expanded="false"
Et c'est tout !
Personnaliser la fenêtre
Vous pouvez également personnaliser certains éléments de la modale à l'aide de variables CSS. Voici les variables disponibles avec leurs valeurs par défaut :
--billy-dialog-overflow-background-color: rgba(0, 0, 0, 0.8);
--billy-dialog-container-width: calc(100vw - min(10vh, 100px));
--billy-dialog-container-height: calc(100vh - min(10vh, 100px));
--billy-dialog-container-max-width: 1280px;
--billy-dialog-radius: 8px;
--billy-dialog-close-top: 6px;
--billy-dialog-close-right: 6px;
--billy-dialog-close-size: 26px;
--billy-dialog-close-color: #fff;
--billy-dialog-close-background-color: rgba(0, 0, 0, 0.5);
--billy-dialog-close-radius: 0px;Ces variables doivent être définies dans le fichier CSS de votre site, ou ajoutées en style inline dans votre balise <html> ou <body>.
Exemple complet
<iframe src="https://events.billyapp.live/6c3259a0-e1e4-4b69-9d8a-40dffa97d171" width="100%" height="600px" style="border:0;"></iframe>
<script type="text/javascript" defer src="https://events.billyapp.live/embed.js"></script>