Bara laterală de rezervări

Widgetul Bara laterală de rezervări adaugă un buton pe site-ul tău. Când vizitatorul apasă pe el, din marginea ecranului glisează o bară laterală cu pagina ta de rezervare Barberly. Vizitatorul închide bara laterală ca să revină la pagină. Ocupă puțin spațiu, așa că se potrivește pe fiecare pagină a site-ului, inclusiv pe paginile lungi, unde un buton fix iese din vedere la derulare.

Creează o instanță nouă#

Conectează-te la contul tău Barberly pe portal.barberly.com.
Mergi la MeniuAplicațiiToate Widget-urile.
Apasă Bara laterală de rezervări.
Selectează Creează o instanță nouă.
Dă un nume instanței, de exemplu "Bara laterală de rezervări principală".

Setări#

Textul butonului: Textul de pe butonul care deschide bara laterală.
URL de rezervare: Adresa URL a paginii tale de rezervare Barberly afișate în bara laterală.
Poziția barei laterale: Partea ecranului din care se deschide bara laterală, dreapta sau stânga.

Stiluri#

Stilul butonului

Culoarea de fundal: Culoarea butonului.
Culoarea textului: Culoarea textului de pe buton. Alege una care contrastează cu fundalul.
Căptușeală: Spațiul din interiorul butonului.
Raza frontierei: Cât de rotunjite sunt colțurile butonului.
Greutatea fontului: Normal, aldin și așa mai departe.

Stilul barei laterale

Raza frontierei: Cât de rotunjite sunt colțurile barei laterale.
Box Shadow: O umbră în jurul barei laterale.
lățime: Cât din ecran ocupă bara laterală, setată separat pentru desktop și mobil.

Pe ecranele mai mici, bara laterală ocupă o parte mai mare din lățimea ecranului, iar butonul de închidere rămâne bine vizibil.

Adaugă bara laterală pe site#

Previzualizarea live arată butonul și bara laterală. Apasă pe buton ca să verifici că bara laterală glisează cu pagina ta de rezervare.

Copiază codul din secțiunea Copiați acest cod pe site-ul dvs.
Lipește-l în codul HTML al site-ului, acolo unde trebuie să apară butonul.
Salvează și publică site-ul.

Exemplu de cod:

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>

Pentru pașii de pe fiecare platformă, vezi ghidurile pentru WordPress, Wix și Squarespace.

Păstrează butonul într-o poziție fixă#

Ca butonul să rămână vizibil în timp ce vizitatorii derulează, adaugă acest cod în CSS-ul personalizat al site-ului:

css

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

Mai multe instanțe#

Poți crea mai multe instanțe ale barei laterale, de exemplu cu un design diferit pentru fiecare secțiune a site-ului. Repetă pașii de mai sus în Bara laterală de rezervări. Fiecare instanță are propriul cod de integrare.

Actualizează o bară laterală publicată#

Deschide instanța din MeniuAplicațiiToate Widget-urile, fă modificările și salvează. Bara laterală de pe site se actualizează automat, așa că nu trebuie să schimbi codul de pe site.