English
PMS

Web Components

Host customisable, RoomBoss-powered components directly on your website.

How to Install

  • Add the following script to the <head> or <body> element of the page/pages you wish to display the component on.

<script type="module" src="https://ext.roomboss.com/elements/init.js"></script>

  • Embed the required HTML code within the page you want the component to appear on.

  • Modify the page CSS and HTML attributes per your styling and settings needs.

Styling Hints

RoomBoss web components can be styled using CSS, which can be added directly to the page you are displaying the component on or to your website's global custom styles.

To assist with customisation, there are a number of CSS variables which can be used, including:

  • rb-primary-color

  • rb-primary-font-family

  • rb-primary-font-weight

  • rb-secondary-color

  • rb-secondary-font-family

  • rb-secondary-font-weight

Availability Calendar

The Availability Calendar is used to show available dates for a single room type (typically used for standalone properties).

HTML Code

<rb-sigcal 
    cid="your-company-id" pid="your-room-type-id" 
    mt="12" lang="en">
</rb-sigcal>

Settings

  • cid - RoomBoss Company ID (required)

  • pid - RoomBoss Room Type ID (required)

  • mt - Number of months displayed (number, defaults to 3)

  • lang - Display Language (en / ja, defaults to English)

  • start - Date the calendar will begin (date string YYYYMMDD, defaults to today)

  • fill - Default style, uses green/red for availability/non-availability if true (boolean, defaults to true)

  • ref - Calendar ID, required for multiple calendars on the same page (string)

Daily Availability

The Daily Availability widget is used to display available dates for a multi-room type property.

HTML Code

<rb-daily-availability 
    vid="your-vendor-id" days="14" lang="en">
</rb-daily-availability>

This component also requires a Website Configuration, which should be added for the page you want the component to appear on.

This can be set within your RoomBoss account from the Website Configuration page.

Settings

  • vid - RoomBoss Vendor ID (required)

  • days - Number of days displayed (number)

  • lang - Display Language (en / ja, defaults to English)

  • show-name - Display the name of the vendor in the title (boolean, defaults to false)

  • start - Date the component will open on (date string YYYYMMDD, defaults to today)

  • di - Number of days shifted when clicking the "Next" / "Previous" controls (number)

PreviousConversions & AnalyticsNextOnline Self Check-in System

Last updated