WordPress : comment installer le widget pour site web Bridebook
Choisissez la façon dont vous souhaitez afficher le widget sur votre site web, puis suivez les étapes correspondant à l'option choisie.
Avant de commencer
5 étapes pour publier
Obtenez votre code de widget depuis Bridebook Business
Connectez-vous à Bridebook Business et rendez-vous dans la section Widget pour site web. Vous y trouverez votre code d'intégration unique, prêt à être copié. Ce code est propre à votre lieu — ne le partagez pas et n'utilisez pas celui de quelqu'un d'autre.
<iframe width="100%" height="600"
src="https://enquiry.bridebook.com?publicId=YOUR_VENUE_ID&widgetId=YOUR_WIDGET_ID">
</iframe>Ouvrez votre tableau de bord WordPress et accédez aux Pages
Connectez-vous à votre administration WordPress à l'adresse yoursite.com/wp-admin. Une fois connecté, survolez Pages dans la barre latérale gauche et cliquez sur Toutes les pages pour voir toutes les pages de votre site.
Ouvrez la page à modifier
Trouvez la page sur laquelle vous souhaitez afficher le widget et cliquez sur Modifier. La plupart des lieux l'ajoutent à leur page Contact, mais vous pouvez aussi créer une page dédiée « Réserver une visite » si vous souhaitez la garder séparée.
Ajoutez un bloc HTML personnalisé
Dans l'éditeur de blocs, cliquez sur le bouton + pour ajouter un nouveau bloc. Dans la barre de recherche, saisissez html et sélectionnez HTML personnalisé dans les résultats. C'est le bloc qui vous permet de coller du code brut directement sur votre page.
Vous ne le trouvez pas ?
Assurez-vous d'être en vue HTML dans le bloc, et non en Aperçu. Le bloc ressemble à une petite icône de balise de code dans la bibliothèque de blocs.
Collez votre code et enregistrez
Cliquez dans le bloc HTML personnalisé et collez le code iframe que vous avez copié depuis Bridebook Business. N'ajoutez pas d'espaces ni de sauts de ligne supplémentaires autour. Cliquez ensuite sur Enregistrer dans l'angle supérieur droit, puis ouvrez votre page dans un nouvel onglet pour vérifier que le widget s'affiche.
Ce qu'il faut vérifier
Le formulaire Bridebook se charge directement sur votre page
Les couples verront les options permettant de réserver une visite, de s'inscrire à une journée portes ouvertes ou d'envoyer une demande. Chaque soumission arrive dans Bridebook Business avec le tag Widget pour site web.
Il ne s'affiche pas ?
Videz le cache de votre navigateur ou ouvrez la page dans une fenêtre privée. Si le widget n'apparaît toujours pas, vérifiez que le code a été collé sans modification de l'URL ni de l'espacement.
Avant de commencer
Comment fonctionne le pop-up
Le widget pop-up comporte deux parties. Vous ajoutez d'abord un script à l'en-tête de votre site à l'aide de l'extension Code Snippets. Vous ajoutez ensuite un bouton à n'importe quelle page. Lorsqu'un couple clique dessus, le formulaire Bridebook s'ouvre dans une superposition pop-up. Le design existant de votre page reste exactement tel quel.
4 étapes pour publier
Obtenez votre script depuis Bridebook Business
Connectez-vous à Bridebook Business et accédez à la section Widget pour site web. Copiez votre balise de script unique. Elle est différente du code du widget intégré — il s'agit d'une seule ligne qui commence par <script plutôt que par un iframe.
<script src="https://enquiry.bridebook.com/widget.js"
data-public-id="YOUR_PUBLIC_ID"
data-widget-id="YOUR_WIDGET_ID"
defer></script>Ajoutez le script à l'en-tête de votre site avec Code Snippets
Le script doit être chargé dans la section <head> de votre site afin d'être disponible sur chaque page. La façon la plus simple de le faire dans WordPress est d'utiliser l'extension Code Snippets.
Dans votre tableau de bord WordPress, cliquez sur Code Snippets dans la barre latérale gauche, puis sur Ajouter.
Donnez un nom à votre snippet (ex. Widget Bridebook), collez votre code de script dans l'éditeur de code et réglez le type de snippet sur HTML. Réglez ensuite l'emplacement sur En-tête du site afin qu'il se charge sur toutes les pages.
Cliquez sur Enregistrer les modifications et activer. Le script est maintenant actif sur votre site.
Bon à savoir
Le script se charge discrètement en arrière-plan. Rien n'apparaîtra sur votre site tant que vous n'aurez pas ajouté un bouton à l'étape suivante.
Ajoutez un bouton à votre page
Accédez à la page à laquelle vous souhaitez l'ajouter et ouvrez-la dans l'éditeur de blocs. Ajoutez un bloc HTML personnalisé en cliquant sur le bouton +, en recherchant « html » et en sélectionnant HTML personnalisé. Collez ensuite le code du bouton ci-dessous dedans.
Option A — bouton aux couleurs Bridebook
Utilisez cette option si vous souhaitez démarrer rapidement. Elle reprend la couleur et le style de Bridebook et fonctionne immédiatement.
<button data-bb-open style="background-color:#4D52E3;
color:#fff;padding:12px 24px;border-radius:30px;
border:none;font-size:15px;font-weight:700;
cursor:pointer;">Réserver une visite</button>Aperçu de l'apparence du bouton
Option B — assorti à votre propre marque
Modifiez les couleurs, la taille de police et le libellé du bouton pour correspondre au style de votre lieu. La seule chose à conserver est data-bb-open — c'est ce qui connecte le bouton au pop-up Bridebook.
<button data-bb-open style="background-color:#YOUR_COLOUR;
color:#YOUR_TEXT_COLOUR;padding:12px 24px;
border-radius:8px;border:none;
font-size:15px;font-weight:700;
cursor:pointer;">Libellé de votre bouton</button>La seule règle
Vous pouvez modifier tout ce qui concerne l'apparence du bouton, mais data-bb-open doit rester sur l'élément bouton. Sans cela, le pop-up ne s'ouvrira pas.
Enregistrez et testez
Cliquez sur Enregistrer en haut à droite de l'éditeur. Ouvrez ensuite votre page dans un nouvel onglet et cliquez sur le bouton. Le formulaire Bridebook devrait s'ouvrir dans une superposition pop-up au-dessus de votre page existante.
Ce qu'il faut vérifier
Le formulaire Bridebook s'ouvre dans un pop-up lorsque le bouton est cliqué
Les couples peuvent réserver une visite, s'inscrire à une journée portes ouvertes ou envoyer une demande sans quitter votre page. Chaque soumission arrive dans Bridebook Business avec le tag Widget pour site web.
Le pop-up ne s'ouvre pas ?
Vérifiez que le snippet Code Snippets est actif et réglé sur En-tête du site. Vérifiez ensuite que le code du bouton inclut data-bb-open exactement comme indiqué. Videz votre cache et réessayez.
Compatible avec
Prêt ?
Configurez votre widget dans Bridebook Business
Obtenez votre code unique, choisissez votre type de widget et publiez-le. Chaque demande arrive automatiquement dans Bridebook Business, avec un tag indiquant la source et prête à être traitée.
Configurer votre widget →