Skip to main content

Prices Widget

Loading property data …

Installation​

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


<div id="Bs-PricesWidget"></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.Prices("#Bs-PricesWidget", {
      id: undefined,
      propertyId: undefined,
      lang: "de",
    });
  });
</script>
warning

Include the script element with src="https://widget.bookingsuedtirol.com/v2/bundle.js" from the code above exactly as specified. Do not self-host a copy of the script and do not include its code into a self-hosted JavaScript bundle file. If you do, the widget will not work correctly.

Configuration​

Use BookingSüdtirol.Widgets.Prices(domElement, settings) to create new widget instances. It returns a widget instance, see 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 its own settings.

URL parameters​

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

  • propertyId
  • lang

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.

lang: string?​

Language

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

layout: string?​

Determines the widget layout

  • layout_1 (default)
  • layout_2
  • layout_3

grouping: string?​

Groupes prices by

  • offer (Default)
  • board

roomIds: number[]?​

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

Loading rooms …

offerIds: number[]?​

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

Loading offers …

boardIds: number[]?​

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

Loading property info …

source: string?​

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

Widget instances​

The snippet under Installation creates a widget and leaves it in place. Keep the return value instead to control the widget yourself, for example in single page applications or on pages with several widgets.

info

The script element from Installation is still required. BookingSüdtirol only exists once it has loaded.

Creating a widget returns a widget instance:

interface WidgetInstance {
  render: () => void;
  unmount: () => boolean;
}

render()​

Mounts the widget into its DOM element. Called automatically when the instance is created. Call it yourself to mount the widget again after unmount().

unmount()​

Removes the widget from its DOM element. Returns true if a mounted widget was removed, false if there was nothing to remove. Call it before the container element is removed from the page, for example when a single page application navigates away.

Multiple instances​

You can create any number of widget instances on a page. Every instance is independent and needs its own container element and settings.

const widgetA = BookingSüdtirol.Widgets.Prices("#Bs-PricesWidget-A", settingsA);
const widgetB = BookingSüdtirol.Widgets.Prices("#Bs-PricesWidget-B", settingsB);

// Later, before the containers are removed from the page
widgetA.unmount();
widgetB.unmount();
info

If domElement is a CSS selector that matches more than one element, the widget is mounted into the first match only. Give every container a unique selector.

Events​

This widget does not fire any events.