Primi Passi

Pubblicare il widget

Integri il widget di prenotazione nel suo sito web

3 min di lettura

Il widget di prenotazione è un componente che può inserire nel suo sito web affinché i suoi clienti prenotino direttamente. Si adatta a qualsiasi design.

Ottenere il codice di integrazione

  1. Nel menu laterale, vada su "Widget" → "Codice"
  2. Scelga la scheda Standalone (consigliata)
  3. Clicchi su "Copia codice" — il suo clientId è già incluso

Codice di esempio

<!-- Widget di Reserva de Hamacas -->
<div id="reserva-hamacas"></div>
<script src="https://cdn.reservadehamacas.com/widget/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ReservaHamacas.init({
      clientId: 'il-suo-client-id',
      container: '#reserva-hamacas'
    });
  });
</script>
Seleziona per copiare

Opzioni di integrazione

Integrazione completa (consigliata)

Inserisca il widget completo nella sua pagina con il codice Standalone qui sopra. Il widget si adatta alla larghezza del contenitore.

Iframe

Se la sua piattaforma non consente di eseguire script, usi l'iframe (ricordi allow="payment" affinché i pagamenti funzionino):

<iframe
  src="https://reservadehamacas.com/embed/il-suo-client-id"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px;"
  title="Prenoti il suo lettino"
  allow="payment"
></iframe>
Seleziona per copiare

Link diretto

Può anche collegarsi direttamente alla sua pagina di prenotazione:

https://reservadehamacas.com/la-sua-azienda
Seleziona per copiare

Se non ha ancora configurato l'URL personalizzato della sua azienda, usi https://reservadehamacas.com/embed/il-suo-client-id.

Personalizzazione

Colori

Il colore del marchio si configura da Widget → Personalizzazione. Può anche fissarlo nel codice con theme:

ReservaHamacas.init({
  clientId: 'il-suo-client-id',
  container: '#reserva-hamacas',
  theme: {
    primaryColor: '#2563eb',
    accentColor: '#f59e0b'
  }
});
Seleziona per copiare

Lingua

Il widget rileva la lingua del browser, ma può forzarne una:

ReservaHamacas.init({
  clientId: 'il-suo-client-id',
  container: '#reserva-hamacas',
  locale: 'it' // es, en, de, fr, it, pt
});
Seleziona per copiare

Zona predefinita

Se ha più zone, può preselezionarne una con zoneId:

ReservaHamacas.init({
  clientId: 'il-suo-client-id',
  container: '#reserva-hamacas',
  zoneId: 'zona-spiaggia-id'
});
Seleziona per copiare

Integrazione con WordPress

  1. Vada su Aspetto → Widget (oppure modifichi la pagina)
  2. Aggiunga un blocco "HTML personalizzato"
  3. Incolli il codice di integrazione
  4. Salvi le modifiche

Integrazione con Wix

  1. Nell'editor di Wix, aggiunga un elemento "HTML incorporato"
  2. Incolli il codice di integrazione
  3. Regoli le dimensioni del contenitore
  4. Pubblichi le modifiche

Verificare l'integrazione

Dopo aver installato il widget:

  1. Visiti il suo sito web
  2. Verifichi che il widget si carichi correttamente
  3. Effettui una prenotazione di prova
  4. Controlli che la prenotazione appaia nel suo pannello

Risoluzione dei problemi

Il widget non si carica

  • Verifichi che il codice sia stato copiato correttamente
  • Controlli che non ci siano errori nella console del browser
  • Si assicuri che il suo abbonamento sia attivo

Stili non corretti

  • Verifichi che non ci sia CSS del suo sito che influisca sul contenitore
  • Regoli le dimensioni del <div id="reserva-hamacas"> se necessario

Complimenti!

Ha completato la configurazione iniziale di Reserva de Hamacas. Il suo sistema di prenotazione è pronto a ricevere clienti.

Prossimi passi consigliati

Precedente
Attivare i pagamenti
Pubblicare il widget