Integrazione e varianti - Widget Esperienze
Varianti di integrazione
Opzioni di integrazione
Sono disponibili fondamentalmente due varianti di integrazione:
Integrazione nella pagina del sito come widget
Integrazione tramite link esterno, che apre una nuova pagina/finestra
È possibile ottenere il codice di integrazione o il link direttamente nel WebClient nell'area Moduli aggiuntivi → Widget esperienze.
Sono disponibili 3 widget tra cui scegliere (potete integrare uno dei widget o anche tutti e tre):
1. Lista esperienze
La visualizzazione in elenco mostra una panoramica di tutti i servizi offerti dal fornitore. Gli ospiti possono navigare tra i servizi desiderati, visualizzarne i dettagli e finalizzare la prenotazione.
2. Pagina di dettaglio
La vista dettagliata può essere integrata come prodotto indipendente nel sito web. È utile se si desidera evidenziare specifici servizi in modo particolare.
3. Widget del calendario prenotazione
Per ogni servizio può essere creato un calendario, che può essere integrato nel sito web. Questo permette di ampliare facilmente la possibilità di prenotazione tramite il calendario su pagine di dettaglio già esistenti. Il widget calendario può essere integrato solo tramite JavaScript.
Integrazione come Widget
Integrando il widget, la funzionalità di prenotazione viene visualizzata direttamente sul vostro sito web, consentendo agli ospiti di utilizzarla senza dover lasciare la pagina. Per fare questo, basta inserire il codice HTML visualizzato nel WebClient nel punto esatto della pagina in cui si desidera integrare il widget di ricerca e prenotazione. Si tratta di un'integrazione tramite JavaScript.
Nota: Non è supportata l'integrazione tramite iFrame o Lightbox.
Il widget in formato elenco (lista esperienze) e il widget della pagina di dettaglio dovrebbero occupare il 100% della larghezza disponibile del vostro sito per garantire la migliore esperienza all'utente e prevenire eventuali problemi di visualizzazione.
Inoltre, le pagine in cui viene integrato il TOSC devono essere in grado di funzionare correttamente anche quando vengono aggiunti dei parametri. Ad esempio, parametri come "?useDetailSearch=false" o "?datatransTrxId=123" potrebbero essere automaticamente inseriti nel link dal sistema. È quindi necessario consentire l'uso di parametri.
Il sito web in cui viene integrato il widget deve utilizzare "https" (con crittografia SSL), altrimenti gli ospiti non potranno completare i pagamenti.
Lista esperienze
La base del vostro widget è rappresentata dal "TagID" (nell'esempio di codice sotto: "9e23f320-2d0b-4bc6-a92f-8d20496c4ec2").
Questo TagID è essenziale per funzioni avanzate del TOSC5 (es. tracking).
Esempio di codice per lista esperienze:
Il codice può essere ottenuto nel WebClient sotto Moduli aggiuntivi → Widget esperienze → Lista esperienze → Implementazione standard con integrazione del widget in una pagina del tuo sito web tramite codice javascript
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments); };
dw("settings", "9e23f320-2d0b-4bc6-a92f-8d20496c4ec2", {
lang: "de",
profileOverrides: ["teaser=false"],
context: {}
});
</script>
<script async src="https://web5.deskline.net/start/ACCOWEB/9e23f320-2d0b-4bc6-a92f8d20496c4ec2/index.js"></script>
Pagina di dettaglio
La base del vostro widget è rappresentata dal "TagID" (nell'esempio di codice sotto: "32747417-dacd-4af0-88b5-deb964f0726a").
Questo TagID è essenziale per funzioni avanzate del TOSC5 (es. tracking).
FRT, in questo esempio, rappresenta il codice del database dell'ambiente di test. Questo codice deve essere sostituito con l'abbreviazione corretta del database reale.
Esempio di codice per la pagina di dettaglio:
Il codice può essere ottenuto nel WebClient sotto Moduli aggiuntivi → Widget esperienze → Pagina di dettaglio del Widget → Implementazione standard con integrazione del widget in una pagina del tuo sito web tramite codice javascript
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments); };
dw("settings", "32747417-dacd-4af0-88b5-deb964f0726a", {
lang: "de",
profileOverrides: ["teaser=false"],
context: {
targetRoute: ["/experiences/FRT/32564ea8-060b-4158-b5e7-299d60c74921", "/erlebnisse/FRT/32564ea8-060b-4158-b5e7-299d60c74921", "/esperienze/FRT/32564ea8-060b-4158-b5e7-299d60c74921"]
}
});
</script>
<script async src="https://web5.deskline.net/start/ACCOWEB/32747417-dacd-4af0-88b5-deb964f0726a/index.js"></script>
Widget del calendario prenotazione
La base del vostro widget è rappresentata dal "TagID" (nell'esempio: "9e23f320-2d0b-4bc6-a92f-8d20496c4ec2" per la lista esperienze e "79c57f66-4049-4dca-af7d-b4dce3620119" per il widget del calendario). Questo TagID è necessario per le funzioni avanzate del TOSC5 (es. tracking).
FRT rappresenta il codice del database dell'ambiente di test. Deve essere sostituito con il corretto codice del database reale.
L'elemento div definisce la dimensione del widget del calendario sul vostro sito. Questo è l'unico widget che non dovrebbe essere inserito a piena larghezza nella pagina. In questo esempio, utilizziamo una larghezza di 325 pixel.
Esempio di codice per il calendario:
Il codice può essere ottenuto nel WebClient sotto Moduli aggiuntivi → Widget esperienze → Widget del calendario esperienze
<div id="ElementID" style="max-width: 325px"></div>
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments); };
dw("settings", "79c57f66-4049-4dca-af7d-b4dce3620119", {
target: "ElementID",
lang: "de",
profileOverrides: [],
context: { serviceId: "42564ea8-060b-4158-b5e7-299d60c74921", dbCode: "FRT" },
});
dw("onCheckout", "79c57f66-4049-4dca-af7d-b4dce3620119", function (e) {
window .open( "https://web5.deskline.net/desklineweb/9e23f320-2d0b-4bc6-a92f-8d20496c4ec2?lang=de&shoppingListId=" + e.shoppingListId, "_blank" ) .focus();
});
</script>
<script async src="https://web5.deskline.net/start/ACCOWEB/79c57f66-4049-4dca-af7d-b4dce3620119/index.js"></script></div>
Integrazione come Link
Se non vi è possibile inserire un codice HTML nel vostro sito web, potete utilizzare il widget dell'elenco e la pagina di dettaglio come link esterno. Si consiglia di inserire un pulsante o un banner (ad esempio "Prenota qui") nel menu principale o in un'area ben visibile del sito, che apra la funzione di ricerca e prenotazione in una nuova scheda o nuova finestra del browser.
Ulteriori informazioni
Uso da mobile
I widget sono ottimizzati per l'uso su dispositivi mobili e sono completamente responsive. Se possibile, consigliamo di utilizzare l'intera larghezza del sito web per l'integrazione dei widget (sia per la lista che per la pagina di dettaglio).
Personalizzazione del design
Nel WebClient è possibile modificare direttamente sia i colori che la dimensione dei caratteri del widget. Qualsiasi modifica viene applicata automaticamente anche dopo l'integrazione nel vostro sito web, senza la necessità di cambiare il codice di integrazione o i link.
Limitazione a singoli servizi/prodotti
È possibile limitare i widget a determinati servizi o prodotti. Il codice o il link corrispondente può essere ottenuto direttamente nel WebClient.