Standard Installation¶

Keine "Standard" iFrame Lösung

Durch die Nutzung eigener HTML5 Web Components können die Inhalte der Widgets von Suchmaschinen besser indiziert und indexiert werden. Diese werden asynchron und nur dann geladen, wenn sie in der Website verwendet werden. Weiterhin passen sich die Widgets dem Design der Website an: Schriftarten, Farben und Abstände werden größtenteils übernommen. Das Design kann mittels CSS angepasst werden.

Anzahl der Websites bei Charterunternehmen

Charterunternehmen können die Widgets zwei Internetseiten verwenden. Sollte ein Charterunternehmen mehr als zwei Seiten besitzen, kann auch für diese Seiten ein erweiterter Service hinzugebucht werden. Setzen Sie sich bitte in diesem Fall mit unserem Support in Verbindung.

Die Installationsanleitung ist in folgende Schritte aufgeteilt:

Zugangscode anlegen
Javascript Dateien und Konfiguration einbinden
Widget platzieren
(optional) Erweiterte Konfiguration

1. Zugangscode anlegen¶

Um mit unserer White-Label-Lösung (WLL) arbeiten zu können, benötigen Sie zunächst einen Zugangscode. Dieser Token ("Public Token") besteht aus einer 32 stelligen Nummern und Ziffernfolge, den Sie für Ihr Unternehmen über Ihr Profil anlegen können.

Zugangscode anlegen

2. Javascript Dateien und Konfiguration einbinden¶

Binden Sie folgenden Code global und vor dem Ende des HEAD Bereichs ein.

CodeBeispiel

<script>
window.connect = {
    token: '[PUBLIC-TOKEN]',
    locale: 'de', // "auto", "de" oder "en"
}
</script>

Vor dem schließenden BODY Tag ist dieser Code erforderlich:

<script async type="text/javascript" src="https://wls.5-anker.com/app.js"></script>

<!DOCTYPE html>
<html lang=de>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>White Label Lösung</title>
    <script>
    window.connect = {
        token: 'demo-charter',
        locale: 'de'
    }
    </script>
</head>
<body>
    <div style="margin: 0 auto; max-width: 970px">
        <h1>Terminsuche</h1>
        <wls-search query="group=auto"></wls-search>
    </div>
    <script async src="https://wls.5-anker.com/app.js"></script>
</body>
</html>

Die Terminsuche ist ein Komplettmodul, welches von der Bootssuche bis zur Buchung, alle Funktionen beinhaltet und automatisch steuert. Die Einbindung ist daher sehr einfach was die Nutzung des Moduls innerhalb weniger Minuten ermöglicht.

Komplettmodulweitere Module

Mit folgendem HTML Code binden Sie unsere Komplettlösung ein:

<wls-search query="group=model"></wls-search>

Hier erfahren Sie mehr zu den Einstellungsmöglichkeiten der Parameter.

E Erweiterung der Konfiguration notwendig. Im folgenden Abschnitt erklärt.

4. Erweiterung der Konfiguration (optional)¶

Verschiedene Widgets benötigen erweiterte Konfigurationen, damit die z.B. bei Klick eines Bootes in einem Karussel zur Bootsseite weitergeleitet wird. Durch die Erweiterung der Konfiguration um verschiedene Einstellungsparameter wie z.B. redirects und settings können diese Umleitungen definiert werden.

Anstatt des oben genannten Codes für window.connect verwenden Sie bitte folgenden:

<script>
window.connect = {
    token: '[PUBLIC-TOKEN]',
    locale: 'de', // "auto", "de" oder "en"
    redirects: {
        boat: '/boot-ansehen/{slug}',
        booking: '/boot-ansehen/{slug}?date_from={date_from}&booking_query={booking_query}&date_to={date_to}&duration={duration}#availability',
        form: '/boote-suchen', // Modul: Suchformular
        marina: '/marina-ansehen/{id}-{name}' // Modul: Destinationsübersicht
    },
    settings: {
        notepad: true, // aktiviert das "Herz" Symbol bei den Booten und ermöglicht so die Nutzung der Merkliste
    }
}
</script>

Die Parameter in dem Bereich der redirects können Sie frei wählen. Im Folgenden sind alle Platzhalter für die Umleitungen aufgeführt:

Bereich	Parameter
redirects.boat	{id}
	{slug}
	{model}
	{manufacturer}
	{name}
	{title}
redirects.booking	{id}
	{slug}
	{model}
	{manufacturer}
	{name}
	{title}
	{date_from}
	{date_to}
	{duration}
	{booking_query}
redirects.marina	{id}
	{name}
	{slug}

Weitere White Label Module¶

E Erweiterung der Konfiguration notwendig. Im folgenden Abschnitt erklärt.

Letztes Update: February 3, 2022

Standard Installation¶

1. Zugangscode anlegen¶

2. Javascript Dateien und Konfiguration einbinden¶

3. Widget platzieren¶

4. Erweiterung der Konfiguration (optional)¶

Weitere White Label Module¶