Barre latérale de réservation

Le widget Barre latérale de réservation ajoute un bouton à votre site web. En cliquant dessus, une barre latérale glisse depuis le bord de l'écran avec votre page de réservation Barberly. Le visiteur ferme la barre latérale pour revenir à la page. Elle prend peu de place et convient donc à toutes les pages du site, y compris les pages longues où un bouton fixe disparaît en faisant défiler.

Créer une nouvelle instance#

Connectez-vous à votre compte Barberly sur portal.barberly.com.
Allez dans MenuAppsTous les widgets.
Cliquez sur Barre latérale de réservation.
Sélectionnez Créer une nouvelle instance.
Donnez un nom à l'instance, par exemple « Barre latérale de réservation principale ».

Paramètres#

Texte du bouton: Le texte du bouton qui ouvre la barre latérale.
URL de réservation: L'URL de votre page de réservation Barberly affichée dans la barre latérale.
Position de la barre latérale: Le côté de l'écran depuis lequel la barre latérale s'ouvre, à droite ou à gauche.

Styles#

Style du bouton

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.

Style de la barre latérale

Rayon de la bordure: L'arrondi des coins de la barre latérale.
Boîte d'ombres: Une ombre autour de la barre latérale.
largeur: La part de l'écran occupée par la barre latérale, réglée séparément pour ordinateur et mobile.

Sur les petits écrans, la barre latérale occupe une plus grande partie de la largeur, et le bouton de fermeture reste bien visible.

Ajouter la barre latérale à votre site web#

L'aperçu en direct montre le bouton et la barre latérale. Cliquez sur le bouton pour vérifier que la barre latérale 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 :

html

<div id="sidebar-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="sidebar_booking" data-container-id="sidebar-booking-container"></script>

Pour les étapes propres à chaque plateforme, consultez les guides pour WordPress, Wix et Squarespace.

Garder le bouton à une position fixe#

Pour que le bouton reste visible pendant le défilement, ajoutez ceci au CSS personnalisé de votre site :

css

#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

Plusieurs instances#

Vous pouvez créer d'autres instances de la barre latérale, par exemple avec un design différent pour chaque section de votre site. Répétez les étapes ci-dessus sous Barre latérale de réservation. Chaque instance a son propre code d'intégration.

Modifier une barre latérale en ligne#

Ouvrez l'instance dans MenuAppsTous les widgets, faites vos modifications et enregistrez. La barre latérale sur votre site se met à jour automatiquement, vous n'avez donc pas à modifier le code de votre site.