Widget per il sito

Il Booking Engine di Hotely può essere integrato direttamente nel sito web della tua struttura tramite un widget configurabile. Questo permette agli ospiti di cercare disponibilità e prenotare senza mai lasciare il tuo sito — un'esperienza fluida che aumenta la fiducia e il tasso di conversione.

A differenza dei sistemi tradizionali che offrono un semplice redirect verso una pagina esterna, il widget di Hotely supporta diverse modalità di integrazione, ciascuna pensata per un caso d'uso specifico.

Modalità di integrazione

1. Embed a pagina intera (Full-page embed)

L'embed a pagina intera incorpora l'intero motore di prenotazione dentro una pagina del tuo sito tramite un iframe. L'ospite naviga, cerca disponibilità, seleziona camere e completa il checkout — tutto all'interno del tuo sito.

Questa è la modalità consigliata per la maggior parte delle strutture. Crea una pagina dedicata sul tuo sito (ad esempio /prenota o /booking) e inserisci il codice di embedding.

Codice di integrazione

<iframe
  src="https://hotely.ai/book/IL-TUO-SLUG?embed=true"
  width="100%"
  height="800"
  style="border: none; min-height: 100vh;"
  allow="payment"
  loading="lazy"
  title="Prenota il tuo soggiorno"
></iframe>

Sostituisci IL-TUO-SLUG con lo slug della tua proprietà (visibile nelle impostazioni della proprietà).

Parametri consigliati

2. Pulsante floating

Il pulsante floating è un elemento fisso posizionato nell'angolo inferiore della pagina che, al click, apre il motore di prenotazione in un pannello sovrapposto (overlay). È ideale per siti dove non si vuole dedicare un'intera pagina al booking, ma si vuole che il pulsante "Prenota ora" sia sempre accessibile durante la navigazione.

Codice di integrazione

<!-- Pulsante floating -->
<div id="hotely-booking-trigger"
  style="
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
  ">
  <button
    onclick="document.getElementById('hotely-booking-overlay').style.display='flex'"
    style="
      background-color: #1a56db;
      color: white;
      border: none;
      border-radius: 28px;
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    ">
    Prenota ora
  </button>
</div>

<!-- Overlay con booking engine -->
<div id="hotely-booking-overlay"
  style="
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 16px;
  "
  onclick="if(event.target===this)this.style.display='none'">
  <div style="
    width: 100%;
    max-width: 960px;
    height: 90vh;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  ">
    <button
      onclick="document.getElementById('hotely-booking-overlay').style.display='none'"
      style="
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;
        background: rgba(0,0,0,0.06);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        font-size: 18px;
        cursor: pointer;
      ">
      &times;
    </button>
    <iframe
      src="https://hotely.ai/book/IL-TUO-SLUG?embed=true&headerMode=minimal"
      width="100%"
      height="100%"
      style="border: none;"
      allow="payment"
      title="Prenota il tuo soggiorno"
    ></iframe>
  </div>
</div>

Il colore del pulsante (background-color: #1a56db) può essere modificato per allinearlo al branding del tuo sito. Usa lo stesso colore accento configurato nelle impostazioni della proprietà per coerenza visiva.

3. Ricerca inline

La ricerca inline inserisce solo il modulo di ricerca (date, ospiti, pulsante "Cerca") direttamente nel contenuto della pagina — tipicamente nella hero section o nella homepage. Quando l'ospite compila il form e clicca "Cerca", viene reindirizzato alla pagina di prenotazione completa con i parametri precompilati.

Codice di integrazione

<iframe
  src="https://hotely.ai/book/IL-TUO-SLUG?embed=true&headerMode=search-only"
  width="100%"
  height="120"
  style="border: none; overflow: hidden;"
  loading="lazy"
  title="Cerca disponibilità"
></iframe>

Questa modalità è perfetta per homepage e landing page dove si vuole un punto di ingresso leggero che invita l'ospite a cercare disponibilità senza mostrare subito l'intero catalogo camere.

Parametri URL del widget

L'URL di embedding supporta diversi parametri per controllare l'aspetto e il comportamento del widget:

Esempio con parametri multipli

https://hotely.ai/book/hotel-bella-vista?embed=true&headerMode=minimal&surfaceStyle=framed&locale=en&checkIn=2026-06-15&checkOut=2026-06-18&adults=2

Questo URL apre il widget in modalità embed, con intestazione minimale, stile incorniciato, lingua inglese e date precompilate per un soggiorno di 3 notti a giugno.

Personalizzazione dello stile

Stili superficie

Il parametro surfaceStyle controlla l'aspetto delle card nella pagina di prenotazione:

Adattamento ai colori del sito

Il colore accento configurato nelle impostazioni della proprietà viene applicato automaticamente a tutti gli elementi interattivi del widget: pulsanti, link, badge di selezione, indicatori di progresso. Per un risultato visivamente coerente, configura il colore accento nelle impostazioni della proprietà in modo che corrisponda al colore primario del tuo sito web.

Sfondo trasparente

In modalità embed, il widget utilizza uno sfondo semi-trasparente che si adatta al contesto della pagina ospitante. Se il tuo sito ha uno sfondo scuro, i testi e gli elementi del widget sono progettati per rimanere leggibili sia in modalità chiara che scura.

Integrazione con il Website Builder

Se utilizzi il Website Builder di Hotely per creare il sito web della tua struttura, l'integrazione con il booking engine è completamente automatica. Non è necessario copiare codice embed, configurare iframe o gestire parametri URL.

Il Website Builder:

• Inserisce automaticamente il modulo di ricerca nella hero section della homepage
• Crea una pagina dedicata /prenota con l'embed a pagina intera
• Applica automaticamente il colore accento e il branding della proprietà
• Gestisce la navigazione tra ricerca e checkout senza interruzioni
• Sincronizza le impostazioni di personalizzazione in tempo reale

Ricerca date inline nel sito

Il blocco "Widget prenotazione" nel Website Builder supporta una variante Ricerca date inline che permette agli ospiti di selezionare date di arrivo, partenza e numero di ospiti direttamente dalla pagina del sito. Al click su "Cerca disponibilità", vengono portati alla pagina di prenotazione con i parametri precompilati — senza iframe, con un'esperienza completamente nativa.

Sono disponibili due varianti:

Per aggiungere la ricerca date inline, accedi al Website Builder, seleziona il blocco "Widget prenotazione" e scegli la variante desiderata dal pannello di configurazione.

Questa integrazione nativa elimina completamente la necessità di intervento tecnico e garantisce un'esperienza coerente tra sito e motore di prenotazione. In molti altri sistemi, l'integrazione tra website builder e booking engine richiede configurazioni manuali, plugin dedicati o assistenza tecnica — con Hotely è tutto automatico dal primo momento.

Consigli per l'integrazione

Performance

• Usa sempre loading="lazy" sugli iframe per evitare che il widget rallenti il caricamento iniziale della pagina
• Se il widget è posizionato "below the fold" (non visibile senza scroll), il lazy loading lo caricherà solo quando l'utente scrolla verso quella sezione
• Per il pulsante floating, l'iframe viene caricato solo quando l'utente clicca il pulsante — nessun impatto sulle performance della pagina

Responsive

L'iframe si adatta automaticamente alla larghezza del contenitore (width="100%"). Su dispositivi mobili:

• La modalità full-page embed funziona perfettamente con min-height: 100vh
• Il pulsante floating resta ancorato nell'angolo inferiore dello schermo
• La ricerca inline si adatta a una singola colonna su schermi stretti

Sicurezza

L'attributo allow="payment" è necessario per il funzionamento del checkout Stripe embedded all'interno dell'iframe. Senza questo attributo, il pagamento con carta integrato nella pagina non funzionerà e il sistema ripiegherà automaticamente sul checkout Stripe hosted (redirect esterno).

HTTPS

L'URL di embedding utilizza HTTPS. Il tuo sito deve utilizzare anch'esso HTTPS per evitare problemi di mixed content e garantire il funzionamento corretto dell'iframe. La maggior parte dei provider di hosting moderni offre certificati SSL gratuiti.

Test dell'integrazione

Dopo aver inserito il codice di embedding nel tuo sito:

1. Verifica il caricamento — la pagina di prenotazione deve apparire correttamente all'interno dell'iframe
2. Testa la ricerca — inserisci date e ospiti, verifica che i risultati appaiano
3. Testa la selezione — seleziona una camera e una tariffa, verifica che la barra di riepilogo appaia
4. Testa il checkout — procedi fino alla pagina di checkout, verifica che il form di pagamento sia funzionante
5. Testa su mobile — ripeti i passaggi precedenti su uno smartphone per verificare la responsività
6. Verifica i parametri URL — se usi link precompilati, verifica che le date e gli ospiti vengano caricati correttamente

Per qualsiasi problema di integrazione, contatta il supporto a support@hotely.ai con l'URL del tuo sito e lo slug della proprietà.