Documentation

Everything needed to embed the tour planner on a customer's site.

Embedding

<script type="module" src="https://tour-planner.toubiz.de/js/current/tour-planner.js"></script>

<toubiz-tour-planner api-token="…"></toubiz-tour-planner>

type="module" is required. tour-planner.js is an ES module that loads its own chunks on demand.

The script injects its own stylesheet, resolved relative to its own URL, so there is no extra <link rel="stylesheet"> to add. What that does require is deploying the entire js/current/ directory: the chunks and the stylesheet are looked up by relative path next to tour-planner.js. The map's own stylesheets are loaded from static.maptoolkit.net; if your site sends a Content Security Policy, allow that host for styles.

The planner's styles are scoped to the <toubiz-tour-planner> element and never touch the rest of your page. In the other direction, the planner protects its own styling against your site's CSS, so to change its appearance use the CSS variables described under Colors and fonts rather than overriding its internal classes.

Element attributes

Attribute	Required	Description
`api-token`	yes	Identifies the customer's toubiz channel.
`base-uri`	no	toubiz instance, defaults to `https://mein.toubiz.de`.
`lang`	no	`de` (default), `en`, `fr`, `it`, `es`, `nl`.
`route`	no	Screen to open on load. Defaults to the planner; `/tours` opens the saved tour list instead.
`link-generators-preset`	no	`neos` or `staticPathNoRouter` — how links to the customer's own detail pages are built.
`serialized-configuration`	no	JSON5 object, see below.

The planner always fills the viewport, so it takes no size attributes.

Configuration

Passed as JSON5 through serialized-configuration. The planner-specific options have no region defaults on purpose: every customer covers a different area, so a built-in map center would be wrong for all but one of them.

Option	Description
`plannerMapDefaults`	`{ lng, lat, zoom }` — initial map view. When unset a warning is logged and a generic center is used.
`plannerSearchBounds`	`{ nw: { latitude, longitude }, se: { … } }` — restricts the waypoint search to the region. Unset means an unbounded search.
`plannerHighlightCollectionId`	toubiz collection whose records are offered as tour highlights, in the search list and as a map layer. Unset hides both.
`staticWidgetPath`	Base path on the customer's site that outgoing detail links are built against.
`imprintLink`	URL of the imprint page. Unset hides the entry.
`privacyPolicyLink`	URL of the privacy policy. Unset hides the entry.
`homeLink`	Where the logo links to.
`logoUrl`	The customer's logo in the top bar. Unset leaves the wordmark on its own.
`operatorName`	Name of the operator, named throughout the terms of use. Unset hides that entry.

Example

<toubiz-tour-planner
    api-token="…"
    lang="de"
    link-generators-preset="staticPathNoRouter"
    serialized-configuration="{
        plannerMapDefaults: { lng: 7.8212385, lat: 47.9800262, zoom: 10 },
        plannerSearchBounds: {
            nw: { latitude: 48.951281, longitude: 7.429185 },
            se: { latitude: 47.781629, longitude: 10.0844 },
        },
        imprintLink: 'https://example.com/imprint',
        privacyPolicyLink: 'https://example.com/privacy',
        operatorName: 'Example Tourism GmbH',
        homeLink: 'https://example.com',
        staticWidgetPath: 'https://example.com/path-to-my-widget',
    }"
></toubiz-tour-planner>

Colors and fonts

Colors are not set through the configuration. The planner derives its whole color scale — down to the route line on the map — from --tb-w-color-primary, which is set in CSS:

.toubiz-tour-planner {
    --tb-w-color-primary: #007faa;
    --tb-w-font-body: "Your font", sans-serif;
    --tb-w-font-heading: "Your font", sans-serif;
}

The planner's own defaults are declared through :where() and therefore weigh nothing, so a rule of your own on .toubiz-tour-planner always wins, whatever order the stylesheets end up in. Web fonts are loaded by the embedding page itself.

Screens

The planner uses a hash router, so the embedding page's own address is left alone until someone navigates.

Address	Screen
`#/`	Planner — the landing screen, with the map.
`#/tours`	Saved tours.
`#/tour/<id>`	One tour, with elevation profile, directions and GPX export.
`#/watchlist`	Saved places.
`#/information`	Information, app info, legal.

There are deliberately no detail screens for individual places: those live on the customer's own site, and the link generators point at them.