Booking Widget — Guida per il designer

Include il file widget.js una volta nella pagina, poi usa i tag dove vuoi.

1. Installazione

Aggiungi questo tag nel <head> della pagina (o prima della chiusura del <body>):

<!-- Una sola volta per pagina -->
<script src="https://demo.mauroallegrini.com/widget.js"></script>

2. Mostrare un pacchetto singolo

<booking-package slug="panchakarma-21"></booking-package>

Anteprima

3. Mostrare tutti i pacchetti

<booking-package-list lang="it"></booking-package-list>

Anteprima

4. Personalizzare i colori (CSS custom properties)

Puoi personalizzare l'aspetto del widget con variabili CSS, senza toccare il codice del widget.

/* Nel tuo CSS */
booking-package, booking-package-list {
  --bw-primary:      #8B4513;   /* colore principale */
  --bw-accent:       #c4922a;   /* colore prezzo e accenti */
  --bw-radius:       12px;      /* arrotondamento angoli */
  --bw-font:         Georgia, serif;
  --bw-booking-height: 600px; /* altezza iframe prenotazione */
}

Anteprima tema personalizzato

5. Attributi disponibili

Attributo	Elemento	Default	Descrizione
slug	`booking-package`	—	Identificatore del pacchetto (obbligatorio)
lang	entrambi	it	Lingua dell'interfaccia di prenotazione (`it`, `en`, `de`, `fr`)

6. CSS custom properties — riferimento completo

Proprietà	Default	Effetto
--bw-primary	#2c6b5a	Colore barra, icona, CTA
--bw-primary-dark	#1e4d3f	Hover del bottone Prenota
--bw-accent	#b5832a	Colore prezzo
--bw-bg	#ffffff	Sfondo barra chiusa
--bw-bg-details	#f7f5f0	Sfondo pannello aperto
--bw-text	#1a1a1a	Testo principale
--bw-text-light	#555	Testo secondario, descrizione
--bw-border	#ddd	Bordi
--bw-radius	6px	Arrotondamento angoli
--bw-font	inherit	Font (eredita dal sito host)
--bw-booking-height	700px	Altezza iframe prenotazione