Barra laterale di prenotazione

Il widget Barra laterale di prenotazione aggiunge un pulsante al tuo sito web. Con un clic una barra laterale scorre dal bordo dello schermo con la tua pagina di prenotazione Barberly. Il visitatore chiude la barra laterale per tornare alla pagina. Occupa poco spazio, quindi si presta a stare su tutte le pagine del sito, anche su quelle lunghe dove un pulsante fisso sparisce scorrendo.

Crea una nuova istanza#

Accedi al tuo account Barberly su portal.barberly.com.
Vai a MenuApplicazioniTutti i widget.
Fai clic su Barra laterale di prenotazione.
Seleziona Crea nuova istanza.
Dai un nome all'istanza, ad esempio "Barra laterale di prenotazione principale".

Impostazioni#

Testo del pulsante: Il testo del pulsante che apre la barra laterale.
URL di prenotazione: L'URL della tua pagina di prenotazione Barberly mostrata nella barra laterale.
Posizione della barra laterale: Il lato dello schermo da cui si apre la barra laterale, destro o sinistro.

Stili#

Stile del pulsante

Colore di sfondo: Il colore del pulsante.
Colore del testo: Il colore del testo del pulsante. Scegline uno che contrasti con lo sfondo.
Imbottitura: Lo spazio all'interno del pulsante.
Raggio del bordo: Quanto sono arrotondati gli angoli del pulsante.
Peso del carattere: Normale, grassetto e così via.

Stile della barra laterale

Raggio del bordo: Quanto sono arrotondati gli angoli della barra laterale.
Box Shadow: Un'ombra intorno alla barra laterale.
larghezza: Quanta parte dello schermo occupa la barra laterale, impostata separatamente per desktop e mobile.

Sugli schermi più piccoli la barra laterale occupa una parte maggiore della larghezza, e il pulsante di chiusura resta ben visibile.

Aggiungi la barra laterale al tuo sito web#

L'anteprima dal vivo mostra il pulsante e la barra laterale. Fai clic sul pulsante per verificare che la barra laterale si apra con la tua pagina di prenotazione.

Copia il codice dalla sezione Copiate questo codice nel vostro sito web.
Incollalo nell'HTML del tuo sito, dove deve comparire il pulsante.
Salva e pubblica il sito.

Codice di esempio:

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>

Per i passaggi su ogni piattaforma, consulta le guide per WordPress, Wix e Squarespace.

Tenere il pulsante in posizione fissa#

Per tenere il pulsante visibile mentre i visitatori scorrono la pagina, aggiungi questo al CSS personalizzato del tuo sito:

css

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

Più istanze#

Puoi creare altre istanze della barra laterale, ad esempio con un design diverso per ogni sezione del sito. Ripeti i passaggi sopra in Barra laterale di prenotazione. Ogni istanza ha il proprio codice di integrazione.

Aggiornare una barra laterale già pubblicata#

Apri l'istanza in MenuApplicazioniTutti i widget, fai le modifiche e salva. La barra laterale sul tuo sito si aggiorna automaticamente, quindi non devi cambiare il codice sul sito.