Configuration

You can customize your widget by adding attributes to the widget container div element.

Attribute list

The table below lists all available attributes:

AttributeRequiredPurposeExample value
data-whitelabel-domainYesFetch partner white label configurationyour-whitelabel-address.com
data-city-slugYes*Fetch activities in a specific destinationNew York
data-coords-latitudeYes*Fetch activities near a specific latitude45.466667
data-coords-longitudeYes*Fetch activities near a specific longitude9.183333
data-coords-distanceNoFetch activities located within the specified search radius5KM
data-date-fromNoFetch activities available from the specified date2022-01-01
data-date-toNoFetch activities available before the specified date2022-01-15
data-market-prefixNoUse a specific marketit
data-number-of-elementsNoThe maximum number of activities to display at a time10
data-pass-through-paramsNoAdd query parameters to the white label or musement.com URL{"aid":"example-id-123"}
data-cidNoTag traffic with a channel IDwidget_cid
data-utm-sourceNoTag traffic sourceyour-site.com
data-utm-mediumNoTag traffic deviceweb-widget
data-utm-campaignNoTag traffic campaignsummer-promo

* A widget must be set for a single destination, but there are multiple ways to configure it. See the Destination section for more info.

White label domain

The white label domain is required for the widget configuration. It fetches your white label configuration: activity card styles, default market, language and currency. It also handles redirections to the correct white label page when a user selects an activity in the widget.

To pass the white label domain, add the data-whitelabel-domain attribute to the widget container.Affiliate partners who do not have their own white label domain can use a value of www.musement.com, together with their affiliate ID in the data-pass-through-params attribute.

Destination

The widget configuration must contain a specific destination to show activities in the area. There are two ways to define the location. Your configuration must contain exactly one of the following:

  • City
  • Coordinates

City

If you provide the widget with the name of city via the data-city-slug attribute, it will display activities which belong to the city in our database which best matches the attribute value.

Coordinates

Using a city name can be inaccurate. Giving the widget a set of coordinates instead allows it to display activities within 100 km of the specified location. When specifying a location via coordinates, both the data-coords-latitude and data-coords-longitude attributes are required. Omitting either attribute, or using invalid decimal values, will result in an error.

Distance

When searching for activities by coordinates, results are located within a 100 km radius by default. You can override this default using the data-coords-distance attribute. The attribute must contain a positive integer value plus and of the following units of measure:
  • KM: kilometers
  • M: miles
For example, to search for activities located 5 km within the coordinates, set the data-coords-distance attribute to 5KM.

Market prefix

While the white label solution allows partners to specify translations, the market prefix determines the widget's entire market. The market determines the currency and catalog of activities to display as well as translations. You can specify the market prefix with the data-market-prefix attribute.

The market prefix is optional. Your white label's default market prefix is used whenever the attribute is absent, contains an invalid value or uses a value that has not been enabled for you.

Number of elements

The data-number-of-elements attribute affects the maximum number of activities displayed in the widget. This attribute is optional and will use a value of 3 by default when absent. It accepts values from 1 to 15.

Date range

Similar to the date filters for our white label solution, you can limit activities in the widget to those with availability between a specified date range by using the data-date-from and data-date-to attributes. These attributes must contain values in the yyyy-mm-dd format and they must be used together. It is currently not possible to use only one of the date range attributes.

Query parameters

The optional data-pass-through-params attribute allows you to add query parameters to the resulting white label URL.

The attribute value must be a serialized JSON object with key-value pairs. Parameters in the attribute which are already present in the white label configuration will be omitted in the resulting URL. Due to the nature of the serialized data, partners are encouraged to take appropriate steps to properly encode the attribute value. In the example below, the value is encased in single quotes:

Copy
Copied
data-pass-through-params=" '{"aid":"example-id-123"}' "
Affiliate partners who do not have their own white label domain must include their affiliate ID as the aid query parameter via data-pass-through-params attribute. This ID is issued at the beginning of the development process.

Tagging traffic

Just as the white label solution gives partners the option to set up deep link tracking, the widget can help you better understand its performance by tagging traffic with different tracking parameters. Currently, the widget supports the following tracking parameters:

AttributeDefault value
data-utm-sourceThe site using the widget
data-utm-mediumweb-widget
data-utm-campaignThe coordinates and position of the clicked element on the page
data-cidwidget_cid

These attributes are all optional. The widget will use the specified default values when these attributes are absent.

Copyright © TUI Musement. All rights reserved.