Incorporare la pagina di prenotazione nel tuo sito web

In Univents la tua pagina di prenotazione funziona come pagina pubblica autonoma. Ma puoi anche incorporarla direttamente nel tuo sito web esistente, ad esempio in una sottopagina dedicata a catering, eventi o degustazioni. Il codice iFrame necessario viene generato da Univents già pronto, non devi scrivere nulla da solo.

Cosa ti serve prima

Per poter incorporare la pagina ti serve una pagina di prenotazione già pronta. Se non ne hai ancora una, creala prima. Apri la panoramica delle tue pagine di prenotazione e clicca in alto a destra su Nuova pagina di prenotazione. Qui assegni un nome, scegli un design (Webshop, Richiesta o Stepper), i prodotti e le location prenotabili e stabilisci a quali domande devono rispondere i tuoi clienti.

Perché la pagina incorporata sia visibile ai tuoi clienti, deve essere attiva. Nella panoramica lo vedi dal badge di stato accanto al nome: Live significa pubblicata, Bozza significa non ancora visibile. Clicca sul badge per passare da uno stato all'altro. Una pagina in bozza non viene mostrata nell'iFrame.

Recuperare il codice embed

Trovi il codice di incorporamento direttamente nella panoramica delle pagine di prenotazione. Ogni pagina ha lì, sul lato destro, una serie di icone di azione.

1. Apri la panoramica delle tue pagine di prenotazione.
2. Cerca la riga della pagina di prenotazione che ti interessa.
3. Clicca a destra sull'icona del codice con il tooltip Copia snippet embed.
4. Univents copia negli appunti il codice iFrame già pronto e conferma con il messaggio Codice embed copiato.

Il codice copiato ha più o meno questo aspetto:

<iframe
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Se ti serve solo il link diretto invece del codice iFrame, usa invece l'icona con il tooltip Copia link di prenotazione.

Inserire il codice nel tuo sito web

Ora inserisci il codice copiato nel punto del tuo sito in cui deve comparire la pagina di prenotazione.

1. Nel tuo website builder apri la pagina in cui deve comparire la prenotazione.
2. Aggiungi un elemento per codice HTML personalizzato. In WordPress questo blocco si chiama spesso «HTML personalizzato», in altri sistemi «Codice», «Incorpora» o «HTML».
3. Incolla in questo elemento il codice iFrame copiato.
4. Salva e pubblica la pagina.

Nel codice la larghezza è impostata su width="100%", quindi la pagina di prenotazione si adatta automaticamente all'area dei contenuti. min-height:700px stabilisce l'altezza minima. Se la tua pagina di prenotazione è lunga e sembra tagliata in basso, aumenta questo valore.

Per sviluppatori: adattare l'altezza automaticamente invece che in modo fisso

Il valore fisso min-height:700px nel codice embed è solo un'altezza minima: se lo spazio non basta, la pagina di prenotazione viene tagliata in basso. Se hai accesso al codice del tuo sito web (o lo ha chi lo sviluppa per te), puoi invece far crescere l'altezza in automatico: la pagina incorporata invia da sola un messaggio alla finestra principale a ogni cambio di dimensione.

Un piccolo script sul tuo sito intercetta questo messaggio e adatta l'altezza dell'iFrame in tempo reale:

<iframe
  id="univents-booking-iframe"
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'univents-embed-resize') {
      var iframe = document.getElementById('univents-booking-iframe');
      if (iframe) iframe.style.height = event.data.height + 'px';
    }
  });
</script>

Senza questo script tutto resta utilizzabile come prima: dovrai solo aumentare a mano, se serve, il valore fisso di min-height (vedi le domande frequenti qui sotto).

Cookie nell'area incorporata

La pagina di prenotazione incorporata non mostra un banner cookie proprio e non imposta cookie. È voluto: due banner sovrapposti, il tuo sul sito web e un altro nell'iFrame, creerebbero solo confusione per i tuoi visitatori. Il consenso resta quindi interamente gestito dal tuo sito web; per la pagina di prenotazione incorporata non devi raccogliere nulla di aggiuntivo.

Se invece qualcuno apre la pagina di prenotazione al suo indirizzo, quindi non incorporata, succede il contrario: lì Univents mostra il proprio banner cookie.

Testare e verificare

Prima di rendere disponibile la pagina incorporata ai clienti, controlla il risultato.

1. Apri la pagina del tuo sito web in cui hai inserito il codice.
2. Verifica che la pagina di prenotazione venga mostrata per intero e senza tagli.
3. Se vuoi verificare prima il comportamento in Univents, clicca nella panoramica sull'icona con il tooltip Apri anteprima live per vedere la pagina in una nuova scheda.
4. Invia una richiesta di prova, così sei sicuro che la prenotazione ti arrivi correttamente.

Se poi vuoi modificare qualcosa nei contenuti, nel design o nelle domande, clicca su Configura nella riga della pagina di prenotazione. Le modifiche compaiono automaticamente anche nella versione già incorporata, non devi copiare di nuovo il codice iFrame.

Domande frequenti

Devo copiare di nuovo il codice dopo ogni modifica? No. L'iFrame mostra sempre lo stato attuale della tua pagina di prenotazione. Le modifiche ai contenuti fatte tramite Configura sono visibili subito anche nella versione incorporata.

La pagina viene tagliata in basso, cosa posso fare? Aumenta nel codice inserito il valore di min-height:700px, ad esempio a 1000px. In questo modo la pagina di prenotazione ha più spazio. Chi ha accesso al codice del sito web può invece far crescere l'altezza in automatico: vedi la sezione «Per sviluppatori» qui sopra.

I miei clienti non vedono nulla nell'iFrame. Controlla se la pagina di prenotazione ha lo stato Live. Se è su Bozza, non viene mostrata pubblicamente. Clicca sul badge di stato per attivarla.

Dove ritrovo la guida? Nella panoramica, per ogni pagina c'è un'icona a forma di libro con il tooltip Apri guida all'embed, che ti porta direttamente qui.