Skip to main content

Rooms Widget

Loading property data …

Installation

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


<div id="Bs-RoomsWidget"></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.Rooms("#Bs-RoomsWidget", {
id: undefined,
propertyId: 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.Rooms(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.

  • propertyId
  • lang
  • utm_medium
  • utm_source
  • utm_campaign

Notice that URL parameters always overwrite widget instance settings.


API

id: string

The widget ID

info

Mandatory field

propertyId: number

ID of the property/accommodation

info

Mandatory field. The property must already have been activated for the widget.

accommodationId: number

Deprecated. Use propertyId instead.

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
  • fr: French

layout: string?

Determines the widget layout

  • layout_1
  • layout_2
  • layout_3
  • layout_4 (default)
  • layout_5
  • layout_6

maxColumns: number?

The maximum of rooms displayed in a row. If the columns don't fit in the parent container, they get automatically adjusted to a lower value. Some layouts may only support a lower number than indicated.

  • 1
  • 2
  • 3
  • 4 (Default)

displayType: string?

Choose between different display types

  • tiles (Default)
  • slides

ids: number[]?

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

Loading rooms …

showFromPrice: boolean?

Enables you to show or hide from prices.

  • true (Default)
  • false

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.

source: string?

Enables the widget to be installed on portals with multiple properties. For this functionality, please contact support directly.

onLoad: OnLoad?

Allows to automatically open and/or close the details of a specific room.

type OnLoad = (self: {
openDetails: (
roomId: number,
activeTab?: "details" | "features" | "enquiry" | "booking"
) => void;
closeDetails: () => void;
}) => void;

Events

As the user interacts with the widget, events are generated in the background for the following interactions:

Google Analytics 4

The user selects travel dates in the calendar.

ParameterDescriptionValue
search_termHardcoded search termSearch booking availability
arrivalArrival Date2022-02-04
departureDeparture Date2022-02-11
affiliationWidget typeHGV Rooms Widget

view_item

Available rooms and additional services are shown to the user.

ParameterDescriptionValue
items.item_list_idRateplan ID49143
items.list_nameRateplan titleZimmer Preise
items.item_idRoom ID25723
items.item_nameRoom titleDoppelzimmer Deluxe
items.quantitySelected items0
affiliationWidget typeHGV Rooms Widget

view_items

The user views the room list of a specific offer.

ParameterDescriptionValue
items.*See view_item event
affiliationWidget typeHGV Rooms Widget

select_item

The user opens a rateplan for a specific room.

ParameterDescriptionValue
items.*See view_item event
affiliationWidget typeHGV Rooms Widget

add_to_cart

The user adds rooms or additional services to the cart.

ParameterDescriptionValue
items.item_list_idRateplan ID49143
items.list_nameRateplan titleZimmer Preise
items.item_idRoom ID25723
items.item_nameRoom titleDoppelzimmer Deluxe
items.quantitySelected items1
items.adultsNumber of adults2
items.childrenNumber of children0
items.pricePrice without discount550
items.discountDiscount value170
items.currencyEUR
items.categoryRooms
items.item_variantBoard ID2
currencyEUR
affiliationWidget typeHGV Rooms Widget

remove_from_cart

The user removes rooms or additional services from the cart.

ParameterDescriptionValue
items.*See add_to_cart event
currencyEUR
affiliationWidget typeHGV Rooms Widget

begin_checkout

The user starts to enter his personal informations.

ParameterDescriptionValue
items.*See add_to_cart event
currencyEUR
affiliationWidget typeHGV Rooms Widget

add_payment_info

The user adds payment informations.

ParameterDescriptionValue
payment_typePayment method ID2
items.*See add_to_cart event
currencyEUR
affiliationWidget typeHGV Rooms Widget

purchase

The user completes a purchase.

ParameterDescriptionValue
valueReservation price380
transaction_idUnique reservation ID1234567
couponCoupon titleWINTER_2022
items.*See add_to_cart event
currencyEUR
affiliationWidget typeHGV Rooms Widget

generate_lead

The user completes an enquiry.

ParameterDescriptionValue
transaction_idUnique reservation ID1234567
affiliationWidget typeHGV Rooms Widget