Documentation

Attributes

Example:

<toubiz-widget
    lang="de"
    route="/article"
    class="toubiz-widget"
    api-token="$2y$10$SUPfUlBVMIz87IdUPEmpi.cpGBvZ0dE6hyYrN90p2MmcA.Tpk4QGe"
    base-uri="https://mein.toubiz.de"
></toubiz-widget>
route The default route opened when executing the widget. The following routes are available:
  • /article
  • /article/:id
  • /event
  • /event/:id
  • /collection
lang The following languages are available:
  • en
  • de
  • es
  • cz
  • dk
  • fr
  • it
  • nl
api-token API Token of the user or channel that should be used for this widget.
base-uri (optional) URI of the toubiz instance the widget should use. Defaults to https://mein.toubiz.de

Serialized Configuration

Configuration, serialized in JSON5 format.

Example:

<toubiz-widget
    lang="de"
    route="/article"
    class="toubiz-widget"
    api-token="$2y$10$SUPfUlBVMIz87IdUPEmpi.cpGBvZ0dE6hyYrN90p2MmcA.Tpk4QGe"
    base-uri="https://mein.toubiz.de"
    serialized-configuration="{
        activeFilters: {
            cities: ['9e4d845d-65a7-435c-96df-0f0530df5ec4'],
            categories: ['KategorieID', 'KategorieID2'],
            date: {after: '2021-8-26'},
            tip: ['highlight', 'offTheTrack'],
        },

        query:{
            filter:{
                element: 'cities'
            }
        },
    }"
></toubiz-widget>
staticWidgetPath Opens the detailpage on a different page tree. Please make sure that the widget is also included on the target page:
staticWidgetPath: '/article-list.html/',
hideFilters Hides filters in list view.
hideFilters:['safety', 'digital', 'properties','cities','regions'],
activeFilters Hides filters in list view.
activeFilters: {
    cities: ['9e4d845d-65a7-435c-96df-0f0530df5ec4'],
    categories: ['KategorieID', 'KategorieID2'],
    date: {after: '2021-8-26'},
},
displayMaintainedBy Display "offizieller Inhalt von". Default is false.
displayMaintainedBy: 'true',
displayCapacityOnDetail Display capacity (Ampel aus Besucherlenkung) on detail pages. Default is true.
displayCapacityOnDetail: 'false',
displayCapacityOnTeaser Display capacity (Ampel aus Besucherlenkung) on lists and teasers. Default is false.
displayCapacityOnDetail: 'true',
displayEventLocation Show event location (location) on teasers. Default is false.
displayEventLocation: 'false',
displayEventLocationCity Show event location (city) on teasers. Default is true.
displayEventLocationCity: 'false',
displayGeolocation Show distance on teasers from a specific geo location. Default is false.
displayGeolocation: 'true',
disableSplitscreen Hide split screen. Default is false.
disableSplitscreen: 'true',
displayMapWithAllResultButton Hide button to show all articles on map. Default is false.
displayMapWithAllResultButton: 'true',
highlightSlider Show highlight slider above list. Default is false.
highlightSlider: 'true',
headerVariant Select between header variants. Default is hero.
Possible options are: 'gallery', 'hero', 'none'.
headerVariant: 'gallery',
limitTeaserTitles Limit teaser title by two lines. Default is true.
limitTeaserTitles: 'false',
displayClient Hide client information on bottom of page. Default is true.
displayClient: 'false',
displayAuthor Hide author information on bottom of page. Default is true.
displayAuthor: 'false',
displayLicense Hide license information on bottom of page. Default is true.
displayLicense: 'false',
hideClientAuthorLicense This automatically sets and overrules displayClient, displayAuthor and displayLicense.
hideClientAuthorLicense: 'true',
openInNewTabOnDetail Open links on detail page in new tab. Default is false.
openInNewTabOnDetail: 'true',
openInNewTabOnList Open links on lists page in new tab. Default is false.
openInNewTabOnList: 'true',
hideElements Hide linked lists on city and area pages.
hideElements: [ 'lodgings', 'shopping', … ],

Query

query: The default query sent to the article.index endpoint as deep object. Please refer to the API Documentation for an overview of possible filters. Please note, that query encoded keys such as filter[category]=... become a deep object such as { filter: { category: '...' } }

It specifies a configuration within the widget, like:

query:{
    filter:{
        element: 'points',
        clientIncludingManaged: 'current',
        …
    }
},
element The following #elements are available:
  • element: 'points' A-Z
  • element: 'excursion' Ausflugsziele
  • element: 'shopping' Einkaufen
  • element: 'gastronomy' Gastronomie
  • element: 'persons' Personen
  • element: 'areas' Regionen
  • element: 'cities' Städte & Orte
  • element: 'tours' Touren & Strecken
  • element: 'lodgings' Unterkünfte
  • element: 'events' Veranstaltungskalender
unlicensed It means that items are also returned for which the user has authorizations - but which do not have a CC license or mein.toubiz community license. This flag makes sense for most use cases for your own content. In conjunction with the "client" filter, all of the client's content can be played out, regardless of the license. The filter is set to true by default. If it is set to false, no data with “All rights reserved” will be displayed.
unlicensed = 'true',
client Filter on the mandant:
client = 'current',
or on the mandant with submandants:
clientIncludingManaged = 'current',

The client is filtered by default. If the content is to be drawn from a channel, the client must be set empty:
clientIncludingManaged = '',
sorting Sort by name:
sorting:{
    property: 'name',
    direction: 'asc'
},

Sorting at random:
sorting:{
    property: 'random'
},

Styling

Widgets are being rendered as web components with the actual contents being part of the shadow DOM.

This makes it resistant with colliding styles from the website they are embedded in.

In order to align the look and feel of the widget with the identity of the host website, some configuration options are are exposed as CSS Custom Properties (often also called CSS Variables). These options can be overridden by assigning new values from any CSS within the host site.

Doing so needs to be done withing the scope of .toubiz-widget, for example:

.toubiz-widget {
    --tb-w-color-primary: #16bdca;
    --tb-w-color-body: #014451;
}
--tb-w-color-primary

Used as color accent throughout the application. Lighter and darker shades are generated automatically. If needed, the lighter and darker shades can also be overridden by redefining the following variables and appending the !important keyword:

  • --tb-w-color-primary-100
  • --tb-w-color-primary-200
  • --tb-w-color-primary-300
  • --tb-w-color-primary-400
  • --tb-w-color-primary-600
  • --tb-w-color-primary-700
  • --tb-w-color-primary-800
  • --tb-w-color-primary-900

Note: --tb-w-color-primary-500 is omitted on purpose, as this middle value is already represented by --tb-w-color-primary itself.