Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

Panel
bgColor#E3FCEF

Um die benutzerfreundlichen Widgets zur Erlebnis-Buchung ideal auf Ihrer Webseite einzusetzen, möchten wir Ihnen mit dieser Sammlung eine Hilfestellung geben. Bei der Einbindung sollte darauf geachtet werden, dass die Hürden für den Gast so gering wie möglich zu halten sind. Dazu zählen eine technisch einwandfreie und leicht zugängliche Einbindung, sowie die Vermeidung von Fehlern in Bezug auf die Bedienbarkeit. Je weniger Klicks ein Gast braucht, um zur Buchungsmöglichkeit zu gelangen, desto besser.


Auf dieser Seite:

Table of Contents
minLevel1
maxLevel6
outlinefalse
styledisc
typelist
printabletrue

...

Einbauvarianten

Zum Einbau stehen grundsätzlich zwei Varianten zur Verfügung. Wir empfehlen den Einbau direkt in Ihre Seite, als Widget.
Alternativ besteht jedoch die Möglichkeit einen eigenständigen Link zu verwenden und z.B. von einem Button (etwa eine „online buchen!“-Schaltfläche) aus, diesen direkt in einem neuen Fenster/Tab zu öffnen. Für beide Varianten bekommen Sie den Einbaucode bzw. den Link direkt im WebClient im Bereich Zusatzmodule/Erlebnis Widgets.

...

1. Listen-Ansicht
Die Listen-Darstellung zeigt eine Übersicht aller angebotenen Leistungen des Anbieters.
Der Gast kann sich durch die gewünschten Leistungen klicken, im Detail ansehen und durchbuchen.

2. Detailseite
Die Detailansicht kann als eigenständiges Produkt auf die Website integriert werden.
Möchte man beispielweise beispielsweise bestimmte Leistungen besonders hervorheben oder verlinken.

3. Kalender-Widget
Für jede Leistung kann ein Kalender erstellt werden, welcher so in die Homepage integriert werden kann.
Dies ermöglicht bereits bestehende Detailseiten unkompliziert, um die Buchungsmöglichkeit über den Kalender zu erweitern.
Das Kalender-Wiedget Widget kann nur mittels JavaScript Java Script eingebunden werden.

Einbau als Widget

Mit der Einbauvariante als Widget wird die Buchungs-Funktionalität direkt in Ihrer Website angezeigt, und kann vom Gast direkt dort verwendet werden, ohne dass er Ihre Website verlassen muss.
Hierzu platzieren Sie den im WebClient angezeigten HTML-Code direkt an jener Stelle Ihrer Website, an welcher Sie das Such- und Buchungswidget einbinden wollen. Es handelt sich hierbei um eine Einbindung via JavascriptJava Script.

Bitte beachten Sie, dass die Einbindung mittels iFrame oder Lightbox, nicht unterstützt wird.

Das Listen-Widget und das Detailseite-Widget sollten möglichst 100% der zur Verfügung stehenden Breite Ihrer Website einnehmen, da dadurch die beste Bedienbarkeit für den Gast gegeben ist, und es andernfalls zu Darstellungsproblemen kommt.

Weiters müssen die Seiten, auf die der TOSC eingebaut wird, weiterhin funktionieren, wenn Parameter angefügt werden. Als Beispiel der "?useDetailSearch=false"-Parameter, oder der "?datatransTrxId=123"-Parameter. Es gibt noch weitere Parameter, welche vom System automatisch dem Link angefügt werden. Aus dem Grund ist es notwendig, Parameter zuzulassen.

note
Panel
bgColor
#FFFAE6

Die Website, auf welcher das Widget einbaut wird, muss "https" (SSL-Verschlüsselung) verwenden, da es ansonsten zu keinem Zahlungsabschluss des Gastes kommen kann!

Expand
titleListen Ansicht

Listen-Ansicht

Info

Die Basis

...

Ihres Widgets ist die "TagID" (im Codebeispiel unten "9e23f320-2d0b-4bc6-a92f-8d20496c4ec2").
Für weiterführende Funktionen des TOSC5 (z.B. Tracking) benötigen Sie diese.

Beispiel-Code für die Listen-Ansicht.
Der Code kann im WebClient unter “Zusatzmodule” > “Erlebnis-Widget” > “Liste Erlebnisse” > “Einbau in Website mit Java Script Code” bezogen werden.

Code Block
<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>
Expand
titleDetailseite

Detailseite

Info

Die Basis Ihres Widgets ist die "TagID" (im Codebeispiel unten "9e23f320-2d0b-4bc6-a92f-8d20496c4ec2").
Für weiterführende Funktionen des TOSC5 (z.B. Tracking) benötigen Sie diese.

FRT steht in diesem Beispiel für den Datenbank-Code der Test-Umgebung. Dieser muss mit dem korrekten Kürzel der Datenhalter-Datenbank getauscht werden.

Beispiel-Code für die Detailseite.
Der Code kann im WebClient unter “Zusatzmodule” > “Erlebnis-Widget” > “Detailseite Widget” > “Einbau in Website mit Java Script Code” bezogen werden.

Code Block
<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/9e23f320-2d0b-4bc6-a92f8d20496c4ec2/index.js"></script>
Expand
titleKalender-Widget

Kalender-Widget

Info

Die Basis

...

Ihres Widgets ist die "TagID" (im Codebeispiel unten "9e23f320-2d0b-4bc6-a92f-8d20496c4ec2" für die Liste und “79c57f66-4049-4dca-af7d-b4dce3620119” für das Kalender-Widget).
Für weiterführende Funktionen des TOSC5 (z.B. Tracking) benötigen Sie diese.

FRT steht in diesem Beispiel für den Datenbank-Code der Test-Umgebung. Dieser muss mit dem korrekten Kürzel der Datenhalter-Datenbank getauscht werden.
Das div-Element definiert die Größe des Kalender-Widgets auf Ihrer Homepage. Dies ist das einzige Widget, dass nicht auf die volle Seitenbreite eingebaut werden soll. In diesem Beispiel verwenden wir eine Breite von 325 Pixel.

Beispiel-Code für die Detailseite.
Der Code kann im WebClient unter “Zusatzmodule” > “Erlebnis-Widget” > “Buchungskalender Widget” bezogen werden.

Code Block
<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>

Sollte es Ihnen nicht möglich sein einen HMTL-Code auf Ihrer Website zu platzieren, können Sie die Suchen & Buchen-Funktionalität das Listen-Widget und die Detailseite als eigenständigen Link verwenden. Wir empfehlen im Header oder in einem ähnlich gut sichtbaren Bereich Ihrer Website einen prominenten Button oder Banner (z.B. „Preise & Buchen“, „Hier online buchen!“) zu platzieren, der bei Klick über den Link die Suchen & Buchen-Funktion als neuen Tab/neues Fenster im Webbrowser öffnet.

...

Weitere Informationen

Mobile Verwendung

Die Widgets sind für die Nutzung auf mobilen Geräten optimiert und vollständig responsive umgesetzt.
Nutzen Sie wenn möglich die volle Breite der Website bei der Einbindung (Liste und Detailseite).

Designanpassung

Sie können direkt im WebClient sowohl die Farben, als auch die Schriftgröße des Widgets anpassen.
Änderungen werden automatisch auch nach dem Einbau auf Ihrer Homepage übernommen.
Dies bedeutet Sie müssen den Einbaucode, bzw. die Links nicht abändern.

Einschränkung auf einzelne Zimmer/Produkte

Es ist möglich die Widgets auf bestimmte Leistungen/Produkte einzuschränken.
Den entsprechenden Code/Link können Sie direkt im WebClient abrufen.