Zum Inhalt

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:

  1. Zugangscode anlegen
  2. Javascript Dateien und Konfiguration einbinden
  3. Widget platzieren
  4. (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.

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

3. Widget platzieren

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.

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: 3. Februar 2022
Zurück zum Seitenanfang