Squarespace : 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
4 é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 Squarespace et accédez à la page à modifier
Connectez-vous à votre compte Squarespace. Depuis le tableau de bord principal, cliquez sur Site web dans la barre latérale gauche, puis sur Modifier le site. Dans le panneau Pages qui apparaît à gauche, trouvez la page où vous souhaitez afficher le widget — la plupart des lieux utilisent leur page Contact — puis cliquez dessus pour l'ouvrir.
Bon à savoir
Si vous souhaitez placer le widget sur une page dédiée, vous pouvez en créer une nouvelle. Dans le panneau Pages, cliquez sur le + à côté de Navigation principale et choisissez Page vierge, puis donnez-lui un nom comme « Réserver une visite ».
Ajoutez un bloc Code
Dans l'éditeur de page, passez votre souris sur la zone où vous souhaitez afficher le widget et cliquez sur Ajouter une section. Lorsque le panneau de section s'ouvre, cliquez sur Ajouter un espace vide pour insérer une section vide. Cliquez ensuite sur Ajouter un bloc dans cette section.
Dans la barre de recherche de blocs qui apparaît, saisissez code et sélectionnez le bloc Code dans les résultats (il comporte une icône </>). C'est le bloc qui vous permet de coller du HTML brut directement sur votre page.
Important — réglez le mode sur HTML
Une fois le bloc Code ajouté, un panneau Contenu s'ouvre à droite. Assurez-vous que le menu déroulant Mode est réglé sur HTML et que l'option Afficher le code source est activée. Sans cela, l'iframe apparaîtra sous forme de texte brut au lieu de charger le widget.
Collez votre code et enregistrez
Cliquez dans la zone de l'éditeur de code dans le panneau Contenu 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 gauche de l'éditeur, 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 ?
Vérifiez que le mode du bloc Code est réglé sur HTML et que l'option Afficher le code source est activée. 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 page à l'aide de l'injection de code intégrée de Squarespace — ce qui charge Bridebook en arrière-plan. Vous ajoutez ensuite un bouton à cette page à l'aide d'un bloc Code. 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 page avec l'injection de code
Le script doit se charger dans la section <head> de la page afin d'être disponible avant que le bouton ne soit cliqué. Dans Squarespace, la façon la plus simple de le faire est d'utiliser le paramètre d'injection de code intégré à chaque page — sans extension ni modification du thème.
Dans le panneau Pages, cliquez sur l'icône d'engrenage des paramètres à côté de la page à laquelle vous souhaitez ajouter le widget. Le panneau Paramètres de page s'ouvrira.
Dans le panneau Paramètres de page, cliquez sur Avancé dans le menu de gauche. Vous verrez un champ intitulé Injection de code dans l'en-tête de la page. Collez votre code de script dans ce champ exactement comme vous l'avez copié depuis Bridebook Business.
Cliquez sur Enregistrer pour fermer les Paramètres de page. Le script se charge maintenant en arrière-plan sur cette page.
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. L'injection de code dans l'en-tête de page est disponible uniquement avec les forfaits Squarespace Business et Commerce.
Ajoutez un bouton à votre page
Vous devez maintenant ajouter un bouton quelque part sur votre page pour ouvrir le widget lorsqu'il est cliqué. Cliquez sur Modifier sur la page, passez votre souris à l'endroit où vous souhaitez placer le bouton, puis cliquez sur Ajouter une section → Ajouter un espace vide. Cliquez ensuite sur Ajouter un bloc, saisissez code dans la barre de recherche et sélectionnez le bloc Code.
Dans le panneau Contenu, réglez le mode sur HTML et assurez-vous que l'option Afficher le code source est activée. Collez ensuite l'un des codes de bouton ci-dessous dans l'éditeur.
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
Utilisez cette option si vous souhaitez que le bouton corresponde au style existant de votre lieu. Modifiez les couleurs, la taille de police et le libellé du bouton selon vos besoins. 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 à gauche 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 script est correctement collé dans Paramètres de page → Avancé → Injection de code dans l'en-tête de la page, et que vous avez cliqué sur Enregistrer après l'avoir ajouté. Vérifiez ensuite que le code du bouton inclut data-bb-open exactement comme indiqué. Videz votre cache et réessayez dans une fenêtre privée.
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 →