The Musement Offers Component

Description

The Musement Offers component shows 3 cards of the most relevant activities and a card linked to all activities found in this specific area. Activities are all kinds of activities, tours, museums, shows, and art events. The component uses the Musement API behind the scenes.

Screenshots

This is the Musement Offers component in a 3 column layout.

This is the Musement Offers component with area offers only.

This is the Musement Offers component with destination offers only.

Maintainer	devgruppe@lists.tui.de
Locales	`de-DE`, `en-GB`, `fr-FR`

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://cloud.tui.com/cdn/musement-offers/current/tui-musement-offers.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<tui-musement-offers
	geo-lat="VALUE"
	geo-lng="VALUE"
	currency="VALUE">
</tui-musement-offers>

Examples

The component the with the most important parameters. While only `geo-lat`, `geo-lng`, teaser, area and currency are required.

<tui-musement-offers
	geo-lat="28.7126"
	geo-lng="-13.8376"
	from-date="2021-08-01"
	to-date="2021-08-08"
	teaser="true"
	area="true"
	locale="de-DE"
	currency="EUR"
	utm_medium="my-medium"
	utm_source="my-source">
</tui-musement-offers>

Instead of using the geo locations, you can use the musement owned cmd-id (or both). In case you use both, the cmd-id parameter would be used first. At least one of the two options is required: geo locations, teaser, area, cmd-id and currency. area isn't shown
```
<tui-musement-offers
	cmd-id="AC8007574"
	from-date="2021-08-01"
	to-date="2021-08-08"
	teaser="true"
	area="false"
	currency="CHF"
	locale="de-DE">
</tui-musement-offers>
```

This is the component with all parameters. The geo parameters are only used in case if the cmd-id isn't working. All other additional data is only passed through only and could be used on the page.

<tui-musement-offers
	cmd-id="AC8007574"
	geo-lat="28.7126"
	geo-lng="-13.8376"
	adult="2"
	children="0"
	from-date="2021-08-01"
	to-date="2021-08-08"
	teaser="true"
	area="false"
	locale="de-DE"
	currency="EUR"
	booking-id="ATCOMRES/82026318"
	customer-id="0249072935"
	customer-email="hygiene@meinetui.de"
	customer-name="Peter"
	customer-surname="Lustig"
	hotel-name="Hotel Riu Palace Tres Islas">
</tui-musement-offers>

Embedding the with encoded parameters

<tui-musement-offers
	locale="de-DE"
	teaser="true"
	area="false"
	data="W3siY21kSWQiOiJBQzEwNDU0MTA5IiwiZGVlcExpbmtEYXRhIjp7ImFkdWx0IjoyLCJjaGlsZHJlbiI6MCwiYm9va2luZ19pZCI6IkFUQ09NUkVTLzc2NDEwOTYxIiwiY3VzdG9tZXJfZW1haWwiOiJydWRpQG1laW5ldHVpLmRlIiwiY3VzdG9tZXJfaWQiOiIwMjQ5MDcwMjg1IiwiY3VzdG9tZXJfbmFtZSI6IlJ1ZGkiLCJjdXN0b21lcl9zdXJuYW1lIjoiUmVnZW5ib2dlbiIsImZyb21fZGF0ZSI6IjIwMjAtMDctMDMiLCJ0b19kYXRlIjoiMjAyMC0wNy0xMSIsImhvdGVsX25hbWUiOiJUVUkgU0VOU0lNQVIgTWFrYWRpIEhvdGVsIiwibGFuZ3VhZ2UiOiJkZSIsInNvdXJjZSI6Im15LXpvbmUiLCJtZWRpdW0iOiJtZWluZXR1aSJ9fV0=">
</tui-musement-offers>

Attributes

This component can be configured with the following attributes: