Utiliser le widget Billy sur WordPress avec Elementor

Vous avez un site web créé avec WordPress et Elementor ? 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.

Si vous n'avez pas encore publié votre canal de vente, consultez Publier votre canal de vente.

Avant d'intégrer le widget

Veuillez vérifier :

1. Que WordPress est bien installé.
2. Que vous avez installé et activé le plugin Elementor (vous pouvez le trouver en le recherchant dans le Marketplace des plugins).
3. Une fois le plugin activé, vous verrez apparaître l'option Edit with Elementor.

Elementor est un éditeur qui vous aide à mieux structurer votre site web de manière plus simple et plus responsive.

• Pour créer une page simple, nous continuerons d'utiliser l'éditeur WordPress.
• Pour des besoins plus avancés et organisés, nous utiliserons Elementor.

Une fois le plugin activé, vous pourrez facilement basculer entre les deux éditeurs.

Option 1 : Intégrer le checkout dans une page

Vous pouvez insérer le widget Billy directement dans une nouvelle page de votre site. Vos participants pourront acheter des billets ou des produits sans être redirigés vers des tiers.

Une expérience fluide qu'ils retiendront.

En 2 étapes simples, c'est prêt : voyons comment.

Étape 1. Créer une nouvelle page avec un bloc HTML pour afficher le widget (édition avec WordPress)

1. Ajoutez une nouvelle page. Insérez un bloc appelé Custom HTML (vous pouvez le trouver en le recherchant).

1. Cliquez sur Write HTML… dans l'interface.
2. Copiez-collez le code suivant dans l'éditeur :

<div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
<iframe src="[EVENT URL]"
width="100%" height="100%"
style="display: block; margin: 0; padding: 0; border: none;">
</iframe>
</div>

1. Cliquez sur le bouton Save. Vous pouvez maintenant afficher cette page contenant le widget Billy.

Étape 2. Relier le bouton à la page du widget

1. Choisissez le bouton de votre page d'accueil (édition avec Elementor) sur lequel vos visiteurs cliqueront pour lancer le checkout.
2. Dans le champ Link, ajoutez l'URL de la page où s'affiche le widget Billy.

1. Cliquez sur Publish, et voilà !

Vous avez maintenant intégré le checkout Billy sur votre site événement, félicitations ! Publiez cette nouvelle version et testez l'expérience utilisateur.

Option 2 : Afficher le checkout dans une pop-up

Vous pouvez aussi afficher le checkout dans une fenêtre pop-up sur une seule page. Suivez simplement les étapes ci-dessous pour le mettre en place.

Étape 1. Copier-coller le script obligatoire

1. Ouvrez la barre latérale gauche.
2. Ajoutez de nouveau un bloc Custom HTML dans votre page actuelle.
3. Copiez-collez le code suivant :

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

Étape 2. Ajouter le code des attributs personnalisés

1. Ajoutez de nouveau un bloc Custom HTML dans votre page actuelle.

1. Copiez-collez le code suivant :

<div class="popmake-234">
    <a role="button" aria-haspopup="dialog"
       aria-controls="billy-dialog-[YOUR_SALES_CHANNEL_ID]"
       aria-expanded="false"
       style="
           display: inline-block;
           background-color: #FFFCE8; /* Button background */
           color: #0d0d0d; /* Text color */
           font-size: 16px;
           font-weight: bold;
           padding: 2px 50px; /* Adjusted padding to reduce height */
           border-radius: 40px; /* Keep rounded edges */
           text-align: center;
           text-decoration: none;
           transition: background-color 0.3s ease, transform 0.2s ease;border: none;
           cursor: pointer;
           box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15); /* Soft shadow */
           user-select: none; /* Prevent accidental text selection */
           white-space: nowrap; font-weight:600;font-size:19px;/* Prevent text from wrapping */
       "
       onmouseover="this.style.backgroundColor='#F0E6D2'; this.style.transform='scale(1.08)';"
       onmouseout="this.style.backgroundColor='#FFFCE8'; this.style.transform='scale(1)';">
       Réserver →
    </a>
</div>
<style>
    @media (max-width: 767px){ /* For responsive function in mobile page */
        .popmake-234 a{
            font-size:14px!important ;
            font-weight:600 ;
            padding: 3px 13px!important;
        }
    }
</style>

1. Cliquez sur le bouton Publish en haut à droite.

Votre checkout en pop-up est maintenant intégré à votre site événement, félicitations ! Prévisualisez votre site et le widget Billy s'affichera en pop-up sur votre page.