Intégrer le widget Billy sur Webflow

Vous avez un site web créé avec Webflow ? Bonne nouvelle, ajouter votre billetterie Billy est simple et rapide !

Le widget Billy permet à vos fans d'acheter leurs billets directement sur votre site, sans redirection, sans confusion et sans prise de tête technique.

Vous avez deux options d'intégration

Option 1 : Intégration directe (sur une page)

Le module de paiement Billy apparaît directement sur votre page événement, afin que vos fans puissent consulter et acheter leurs billets au même endroit.

Option 2 : Fenêtre pop-up

Le module de paiement Billy s'ouvre dans une fenêtre pop-up élégante lorsque les visiteurs cliquent sur le bouton "Acheter maintenant", idéal pour garder une mise en page simple et claire.

Quelle que soit l'option choisie, vos fans peuvent finaliser leur achat sans quitter votre site web.

Résultat :

• Une expérience d'achat fluide
• Un meilleur taux de conversion
• Une image de marque plus forte et plus professionnelle

Prêt à commencer ? Suivez le guide, cela ne prend que quelques minutes.

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-f6059cb18648 est votre Sales Channel ID.

Option 1: Intégrer le checkout directement sur une page

Vous pouvez insérer le widget Billy directement sur votre site. Vos participants pourront acheter leurs billets ou produits sans être redirigés vers un service tiers. Une expérience fluide qu'ils retiendront.

En 2 étapes seulement, c'est prêt :

Étape 1. Ajouter les éléments Webflow

L'ajout de blocs et d'éléments est une étape obligatoire, et la toute première pour tout créateur de site Webflow.

Vous pouvez placer n'importe quel contenu dans un Div Block : texte, image, code, etc.

1. Ouvrez le panneau des éléments (Add Elements Panel) situé à gauche
2. Ajoutez, dans cet ordre, les deux éléments suivants à votre page de paiement : un Div Block, puis un Code Embed à l'intérieur

Étape 2. Copier-coller le code du widget

1. Double-cliquez sur Code Embed pour ouvrir l'éditeur de code.
2. Copiez-collez ensuite le code suivant dans l'éditeur :

<iframe src="[EVENT URL]" allow="payment" width="100%" height="1000px"></iframe>

1. Cliquez sur Save & Close. Votre nouvelle page contenant le widget est maintenant prête !

Étape 3. Relier votre bouton à la page du widget

1. Cliquez sur votre bouton pour ouvrir les paramètres de lien (Link Settings).
2. Sélectionnez la page que vous venez de créer avec le widget Billy.
3. Enregistrez ou publiez, et voilà !

Vous avez maintenant un flux de paiement intégré directement sur votre site Webflow. Félicitations ! Vous pouvez publier la nouvelle version de votre site et tester l'expérience utilisateur.

Option 2: Afficher le checkout dans une pop-up

Vous pouvez également afficher le flux de paiement dans une fenêtre pop-up sur une seule page. Suivez simplement les 4 étapes ci-dessous pour mettre cela en place.

Étape 1. Ajouter les éléments Webflow

1. Ouvrez le panneau des éléments à gauche.
2. Ajoutez les deux éléments suivants dans votre page actuelle : un Div Block, puis un Code Embed à l'intérieur

Étape 2. Copier-coller le script obligatoire

1. Double-cliquez sur l'élément Code Embed pour ouvrir l'éditeur.
2. Copiez-collez ce script :

<script type="text/javascript"
        defer src="https://events.billyapp.live/embed.js"
        data-host="https://events.billyapp.live"></script>

1. Cliquez sur Save & Close pour valider.

Étape 3. Personnaliser les attributs du bouton

1. Sélectionnez votre bouton CTA (par exemple Buy Now).
2. Dans la barre latérale droite, cliquez sur Settings.

1. Ajoutez les trois attributs personnalisés suivants :

• (Name) aria-haspopup = (Value) dialog
• (Name) aria-controls = (Value) billy-dialog-[YOUR_SALES_CHANNEL_ID]
• (Name) aria-expanded = (Value) false

Étape 4. Connecter le bouton Buy Now à la pop-up

1. Cliquez sur le bouton que vous souhaitez connecter.
2. Sélectionnez Mouse click (tap).
3. Sous On 1st click, choisissez Start an animation.
4. Ajoutez une New Timed Animation → Hide/Show. Et voilà !

Félicitations ! Votre flux de paiement en pop-up est maintenant intégré à votre site Webflow. Publiez votre site pour tester l'expérience en direct.