Zum Inhalt

Standard Installation

!!! info "Not a "standard" iFrame solution". By using custom HTML5 Web Components, the widget content can be better indexed and indexed by search engines. They are loaded asynchronously and only when they are used in the website. Furthermore, the widgets adapt to the design of the website: Fonts, colors and spacing are mostly adopted. The design can be customized using CSS.

!!! warning "Number of websites at charter companies". Charter companies can use the widgets two websites. If a charter company has more than two sites, extended service can be added for these sites as well. In this case please contact our support.

The installation instructions are divided into the following steps:

  1. Create access code
  2. Include javascript files and configuration
  3. Place Widget
  4. (optional) Advanced configuration

1. Create access code

In order to work with our white label solution (WLL), you first need an access code. This token ("Public Token") consists of a 32 digit number and number sequence, which you can create for your company via Your Profile.

Create access code

2. Include javascript files and configuration

Include the following code globally and before the end of the HEAD section.

<script>
window.connect = {
    token: '[PUBLIC-TOKEN]',
    locale: 'en', // "auto", "de" oder "en"
}
</script>
Before the closing BODY tag, this code is required:

<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 Solution</title>
    <script>
    window.connect = {
        token: 'demo-charter',
        locale: 'de'
    }
    </script>
</head>
<body>
    <div style="margin: 0 auto; max-width: 970px">
        <h1>Cruise search</h1>
        <wls-search query="group=auto"></wls-search>
    </div>
    <script async src="https://wls.5-anker.com/app.js"></script>
</body>
</html>

3. Place Widget

The appointment search is a complete module, which contains and automatically controls all functions from the boat search to the booking. The integration is therefore very simple which allows the use of the module within few minutes.

With the following HTML code you integrate our complete solution:

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

Here you can read more about the parameter settings.

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

4. Advanced configuration (optional)

Different widgets need advanced configurations, so that e.g. when a boat is clicked in a carousel, it is redirected to the boat page. By extending the configuration with different setting parameters like redirects and settings these redirects can be defined.

Instead of the above code for window.connect please use the following:

<script>
window.connect = {
    token: '[PUBLIC-TOKEN]',
    locale: 'en', // "auto", "de" oder "en"
    redirects: {
        boat: '/boat-show/{slug}',
        booking: '/boat-show/{slug}?date_from={date_from}&booking_query={booking_query}&date_to={date_to}&duration={duration}#availability',
        form: '/boat-show', // Module: Search Form
        marina: '/marina-show/{id}-{name}' // Module: Destination Overview
    },
    settings: {
        notepad: true, // Activates the "heart" symbol at the boats and thus enables the use of the watchlist
    }
}
</script>

You can freely choose the parameters in the redirects section. All the placeholders for the redirects are listed below:

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}

Other White Label Modules

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

Letztes Update: February 3, 2022
Zurück zum Seitenanfang