Hai un sito web? Crea il tuo Booking Widget DiBooq in pochi minuti!

1. Preparazione

1.1 Crea il tuo sito di prenotazione DiBooq

Per prima cosa, crea il tuo sito di prenotazione DiBooq. La configurazione richiede normalmente solo 5–10 minuti.

Una volta che il tuo sito di prenotazione è online (vedi lo screenshot), puoi iniziare a creare il tuo Booking Widget DiBooq.

Per integrarlo nel tuo sito web hai a disposizione due opzioni:

• Widget incorporato (iFrame): il Booking Widget viene integrato direttamente nel tuo sito web.
• Widget Popup (pulsante con overlay): un pulsante apre il Booking Widget in una finestra overlay, senza che i visitatori debbano lasciare il tuo sito.

1.2 Verifica quale tecnologia utilizza il tuo sito web

Il nostro Booking Widget è già stato integrato con successo in diversi tipi di siti web, tra cui:

• Siti web sviluppati su misura (ad esempio in HTML o PHP)
• WordPress
• Website builder come Squarespace, Wix, Jimdo e altri

In generale, il widget può essere utilizzato anche con altri CMS o sistemi di gestione dei siti web, purché consentano l'integrazione di codice HTML e JavaScript personalizzato. 

2. Crea il tuo Booking Widget (Generatore di Codice)

Dopo aver creato il tuo sito di prenotazione DiBooq, apri il Generatore di Codice al seguente indirizzo:

https://tools.dibooq.com/code-generator.html

Qui puoi configurare il tuo Booking Widget e generare il codice personalizzato per integrarlo nel tuo sito web.

• Campo di inserimento: Il tuo sottodominio
  
  

  Inserisci il sottodominio che hai scelto durante la creazione del tuo sito di prenotazione DiBooq.
  
  Importante: inserisci solo il nome del sottodominio, senza .book.dibooq.com.
  
  Esempio: Se il tuo sito di prenotazione è raggiungibile all'indirizzo: casavacanze.book.dibooq.com inserisci semplicemente: casavacanze

• Menu a discesa: Lingua del widget

  
  L'opzione Auto (Predefinita) imposta automaticamente la lingua del sito web. A tale scopo viene letto l'attributo lang definito nell'intestazione HTML della pagina.

  A seconda della tecnologia del sito o del CMS utilizzato, questo attributo potrebbe non essere sempre disponibile. In tal caso, il Booking Widget potrebbe non essere visualizzato nella lingua prevista.
  
  Per questo motivo puoi selezionare una lingua fissa tramite l'opzione Lingua del widget. Il codice generato aprirà sempre il Booking Widget nella lingua selezionata, indipendentemente dalla lingua del sito web.
  
  Puoi scegliere tra: Tedesco, Inglese, Spagnolo, Francese,  Portoghese, Croato, Italiano oppure lasciare l'impostazione predefinita: Auto (Predefinita)

• Campo di inserimento: Testo del pulsante
  
  Qui puoi definire il testo che compare sul pulsante che apre il Booking Widget.
  
  Il testo inserito verrà mostrato sul pulsante quando utilizzi il Widget Popup.
  

• Campo di inserimento: Titolo

  Qui puoi definire il titolo che viene visualizzato nella finestra overlay sopra il Booking Widget.

  Se il tuo sito contiene più strutture, puoi, ad esempio, inserire il nome della struttura per la quale verrà aperto il Booking Widget. In questo modo i tuoi ospiti sapranno immediatamente quale struttura stanno prenotando.

• Campo di inserimento: Sottotitolo

  Qui puoi definire un testo aggiuntivo che verrà visualizzato direttamente sotto il titolo nella finestra overlay.

  Utilizza il sottotitolo per aggiungere una breve descrizione, un'informazione importante o un messaggio personale ai tuoi ospiti.

• Personalizzazione del pulsante

  Qui trovi diverse opzioni per personalizzare il pulsante che apre il Booking Widget in overlay.

  In questo modo puoi adattarne l'aspetto al design del tuo sito web.

 2.1 Crea un Widget Popup (pulsante con overlay)

Nell'anteprima puoi vedere come apparirà il pulsante sul tuo sito web con le impostazioni selezionate.

Puoi fare clic direttamente sul pulsante nell'anteprima. L'overlay si aprirà esattamente come verrà visualizzato sul tuo sito web.

Quando sei soddisfatto delle impostazioni, fai clic su Code Snippet per generare il codice di integrazione.



Codice con CSS integrato (Inline Styling)

Sul lato sinistro trovi il codice con il CSS già integrato (Inline Styling).

Questa opzione è ideale se desideri inserire il Booking Widget in un unico punto del tuo sito web. Ti basta copiare il codice e incollarlo nella posizione desiderata.

Codice con CSS separato

Sul lato destro trovi il codice CSS separato dal codice del widget.

Questa soluzione è consigliata se desideri utilizzare il Booking Widget più volte sul tuo sito web.

Puoi integrare il CSS una sola volta nel tuo sito, ad esempio come CSS personalizzato in WordPress. Successivamente sarà sufficiente inserire il codice più breve del widget nei punti desiderati, senza ripetere il CSS.

Questo semplifica la manutenzione e garantisce che tutti i Booking Widget abbiano lo stesso design.


2.2 Crea un Widget incorporato (iFrame)

L'anteprima mostra come verrà visualizzato il calendario di prenotazione incorporato sul tuo sito web. In questo modo puoi verificare che il widget venga caricato correttamente prima dell'integrazione.

Se il calendario viene visualizzato correttamente nell'anteprima, fai clic su Code Snippet per generare il codice di integrazione.

Potrai quindi inserire il codice generato nel punto desiderato del codice HTML del tuo sito web.

Per WordPress, i website builder o altri CMS è generalmente disponibile un elemento dedicato, ad esempio HTML personalizzato, HTML, HTML incorporato oppure Incorpora codice.

Ti basterà incollare lì il codice generato.