Skip to main content

Portal Widget

Installation​

Create a widget instance by embedding the following code within your webpage inside the <body> element:


<div id="Bs-PortalWidget"></div>
<script
id="booking-suedtirol-js"
src="https://widget.bookingsuedtirol.com/v2/bundle.js"
defer
></script>
<script>
document
  .querySelector("#booking-suedtirol-js")
  .addEventListener("load", () => {
    BookingSüdtirol.Widgets.Portal("#Bs-PortalWidget", {
      id: undefined,
      lang: "de",
      privacyURL: "/path/to/privacy/page",
      termsURL: "/path/to/terms/page",
    });
  });
</script>
warning

Include the <script … src="https://example.com/v2/bundle.js" …></script> element exactly as specified. Do not self-host a copy of the script and do not include its code into a JavaScript bundle file. Otherwise the widget will not work correctly.

Configuration​

Use BookingSüdtirol.Widgets.Portal(domElement, settings) to create new widget instances.

Method arguments​

domElement: string | DOM element​

The CSS selector or DOM element where your widget will be mounted.

settings: object​

Initialization options. See API below. Each widget instance can have it's own settings.

URL parameters​

The following list of settings can also be passed over the URL.

  • lang
  • arrival
  • departure
  • locationId
  • propertyId
  • guests
  • sortId
  • classificationIds
  • classificationCodes
  • equipmentIds
  • subjectIds
  • showFavorites
  • offset
  • utm_medium
  • utm_source
  • utm_campaign

Notice that URL parameters always overwrite widget instance settings.

// Example
https://www.example.com/?lang=it&arrival=2022-02-20&departure=2022-02-23&guests=[[18,18],[18,4]]

API​

id: string​

The widget ID

info

Mandatory field

privacyURL: string​

Defines the URL to the privacy policy page of the website where the widget is embedded. The language used on the page must match the lang field.

Examples:

  • /en/privacy
  • https://example.com/en/privacy
info

Mandatory field

termsURL: string​

Defines the URL to the general terms and conditions page of the website where the widget is embedded. The language used on the page must match the lang field.

Examples:

  • /en/terms
  • https://example.com/en/terms
info

Mandatory field

lang: string?​

Language

  • de: German (default)
  • it: Italian
  • en: English

googleMaps: object?​

interface GoogleMaps {
  apiKey?: string;
  mapId?: string;
}

apiKey​

This widget optionally uses the Google Maps JavaScript API in order to visualize search results in a comprehensive map view.

For this to work, it is required to create an API Key, that authenticates requests associated with your project for usage and billing purposes.

mapId​

An optional map ID.

arrival: string?​

Defines the arrival date in ISO 8601 format (yyyy-MM-dd)

2020-02-20

departure: string?​

Defines the departure date in ISO 8601 format (yyyy-MM-dd)

2020-02-23

locationId: number?​

Searches for a specific location. Note that only locations with associated properties are displayed in the widget.

propertyId: number?​

Displays the detail page of a specific property.

accommodationId: number​

Deprecated. Use propertyId instead.

guests: number[][]?​

Determines the number of rooms and their occupancy in the form of the age of each person.

  • 18: adult
  • 0-17: child
// Examples

// room 1: 2 adults
[[18, 18]];

// room 1: 2 adults, 2 children (14 - and 5 years)
[[18, 18, 14, 5]];

// room 1: 2 adults
// room 2: 1 adult, 1 child (4 years)
[
  [18, 18],
  [18, 4],
];

// room 1: 2 adults
// room 2: 1 adult
// room 3: 2 adults, 1 child (3 years)
[[18, 18], [18], [18, 18, 3]];

// Produces error because no adults were submitted
[[12]];

// Produces error because more than three rooms were submitted
[[18], [18, 14], [18], [18]];

Default value: 2 adults [[18,18]]

info

Please note: You can add a maximum of three rooms.

sortId: number?​

Determines how search results are sorted.

  • 0: Random (default)
  • 1: Category ascending
  • 2: Category descending
  • 3: Price ascending
  • 4: Price descending
  • 5: Rating ascending
  • 6: Rating descending

classificationIds: number[]?​

Filter search results by classification.

  • 1: Hotel
  • 4: Holiday home / residence
  • 16: Bed and breakfast / apartments
  • 32: Farm holiday
  • 64: Mountain inn
  • 128: Campground
  • 256: Holiday home
  • 512: Youth hostel
  • 1024: Guest house
  • 2048: Mountain refuge
  • 4096: B&B hotel
  • 8192: Inn

classificationCodes: number[]?​

Filter search results by classification code.

  • 0: Unrated
  • 1: 1
  • 2: 2
  • 3: 3 and 3S
  • 4: 4 and 4S
  • 5: 5

featureIds: number[]?​

Filter search results by feature (equipment).

  • 1: garage
  • 2: elevator
  • 4: restaurant
  • 8: fitness
  • 16: spa
  • 256: outdoor pool
  • 512: indoor pool
  • 2048: barrier - free
  • 4096: internet
  • 8192: shuttle Service
  • 16384: child care
  • 16778240: bar
  • 33587200: pet allowed

themeIds: number[]?​

Filter search results by theme (subject).

  • 1: family
  • 2: wellness
  • 4: hiking
  • 8: bike
  • 16: cycling
  • 32: golf
  • 64: horseback riding
  • 128: romantic
  • 256: skiing
  • 512: congress possibility
  • 1024: cross country skiing
  • 2048: city / culture
  • 4096: snow shoe

showFavorites: boolean?​

Shows or hides bookmarked properties.

  • true
  • false (Default)

offset: number?​

Controls the current pagination offset.

  • 0: Displays results from 1 to 10
  • 1: Displays results from 11 to 20
  • 2: Displays results from 21 to 30
  • 3...

promotion: [string | null, string | null, string | null]?​

Enables you to customize the advertising fields medium (ResID_SourceContext), source (ResID_Source) und campaign (ResID_Value) and submit them to the PMS.

How exactly the fields are to be filled has been precisely defined in the AlpineBits Standard and can be read in the corresponding documentation in section 4.2.5 Implementation tips and best practice.

["Advertising medium", "Advertising source", "Advertising campaign"];

Default value: [null, null, null]

ASA promotion fields

The Google Analytics parameters utm_medium, utm_source, and utm_campaign offer the possibility to submit the fields individually.

For example, the URL https://www.example.com/?utm_medium=metasearch&utm_source=tripadvisor.com&utm_campaign=tripadvisor_desktop would submit ['metasearch', 'tripadvisor.com', 'tripadvisor_desktop'] to the PMS.

info

Using this feature will set a 30-day tracking cookie. In this case, add the cookie bs_widget_promotion to your Privacy Policy. If you want to prevent the cookie from being set, insert the code window.BookingSüdtirolTrackingConsent = false; before the widget is loaded.

propertyIds: number[]​

Enables you to display and order specific properties via their ID.

showSearch: boolean?​

Shows or hides search bar.

  • true (Default)
  • false

showFilters: boolean?​

Shows or hides filters bar.

  • true (Default)
  • false

Events​

This widget does not fire any events.