メインコンテンツまでスキップ

Web Components

注意

現在は英語版のページをご覧いただいております。
日本語版のページは作成出来次第更新されます。
ご迷惑をおけかして、申し訳ございません。

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).

Display availability for a single property in a calendar format.

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.

Display daily availability for a single property over a period by room type.

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)