The Travel Agency Contact Component

Description

This 6M component is used to handle various contact requests between the user and a travel agency.

Screenshots

The input mask for appointment contact requests.

The input mask for general contact inquiries.

Meta

Maintainer	technikportalentwicklung@tui.at
Locales	en-US, de-DE, fr-CH

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/travel-agency-contact/travel-agency-contact.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-travel-agency-contact country="VALUE"></tui-travel-agency-contact>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
country	Allows setting of a country code, which will be used to determine the relevant travel agency.	AT, DE, CH		yes
brand	Allows setting a brand, which will used to style the component. Defaults to 'tui'	airtours, gulet, robinson, tui		no
locale	Allows setting of a locale, which will be used for all labels. Defaults to 'en-US'	en-US, de-DE, ch-FR		no
variants	Allows setting of the available contact variants, which can be selected by the user. Defaults to 'appointment,inquiry'			no
placeId	Allows setting of a specific travel agency. Defaults to locating the closest travel agency based on the location of the user			no
showTravelAgency	Allows setting if the name and address of the selected travel agency should be displayed. Defaults to 'false'			no

Events