Initialization

This guide walks you through creating a Booking instance on a page. Take the following steps to get a working component:

1. Include the Booking source files.
2. Create a container.
3. Initialize Booking with the constructor.

Include source files

The Booking widget ships as two files that you load on the page.

Download the package and unpack it into a folder of your project. Add the following files to your page:

• booking.js — Booking source code
• booking.css — Booking stylesheet

Set correct relative paths to the source files.

The following code snippet includes the Booking files from a dist/ folder:

index.html

<script type="text/javascript" src="./dist/booking.js"></script>
<link rel="stylesheet" href="./dist/booking.css">

Create a container

Add an HTML element that hosts the Booking widget and assign it an ID, for example root.

The following code snippet creates a container with the ID root:

index.html

<div id="root"></div>

Initialize Booking

Call the booking.Booking constructor with two parameters:

• container — the selector or ID of the HTML container that hosts the widget
• config — an object with configuration properties (see Configuration properties)

The following code snippet initializes Booking inside the #root container:

index.html

// create Booking
new booking.Booking("#root", {
    // configuration properties
});

Configuration properties

info

For the full list of properties used to configure Booking, see the Properties overview.

Example

The snippet below initializes Booking with a set of initial properties: