Le widget Popup de réservation ajoute un bouton à votre site web. En cliquant dessus, votre page de réservation Barberly s'ouvre dans une popup au centre de l'écran, et le visiteur reste sur la page en cours pendant qu'il réserve. Vous pouvez l'utiliser sur tout le site ou sur certaines pages, comme les pages de prestations ou les articles de blog.
Créer une nouvelle instance#
- Connectez-vous à votre compte Barberly sur portal.barberly.com.
- Allez dans MenuAppsTous les widgets.
- Cliquez sur Popup de réservation.
- Sélectionnez Créer une nouvelle instance.
- Donnez un nom à l'instance, par exemple « Popup de réservation principale ».
Paramètres#
- Texte du bouton
- Le texte du bouton qui ouvre la popup.
- URL de réservation
- L'URL de votre page de réservation Barberly affichée dans la popup.
Styles#
- Couleur de fond
- La couleur du bouton.
- Couleur du texte
- La couleur du texte du bouton. Choisissez-en une qui contraste avec le fond.
- Rembourrage
- L'espace à l'intérieur du bouton.
- Rayon de la bordure
- L'arrondi des coins du bouton.
- Poids de la police
- Normal, gras, etc.
- Rayon de la bordure
- L'arrondi des coins de la popup.
- Boîte d'ombres
- Une ombre autour de la popup.
Sur les appareils mobiles, la popup s'adapte à la taille de l'écran et comporte un bouton X pour la fermer.
Ajouter la popup à votre site web#
L'aperçu en direct montre le bouton et la popup. Cliquez sur le bouton pour vérifier que la popup s'ouvre avec votre page de réservation.
- Copiez le code de la section Copiez ce code sur votre site web.
- Collez-le dans le HTML de votre site, à l'endroit où le bouton doit apparaître.
- Enregistrez et publiez votre site web.
Exemple de code :
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>Pour les étapes propres à chaque plateforme, consultez les guides pour WordPress, Wix et Squarespace.
Plusieurs instances#
Vous pouvez créer d'autres instances de la popup, par exemple avec un design différent pour chaque section de votre site. Répétez les étapes ci-dessus sous Popup de réservation. Chaque instance a son propre code d'intégration.
Modifier une popup en ligne#
Ouvrez l'instance dans MenuAppsTous les widgets, faites vos modifications et enregistrez. La popup sur votre site se met à jour automatiquement, vous n'avez donc pas à modifier le code de votre site.