Integrate a Hotels List Widget

Here's a live example of what you will be integrating:

Step 1: Include the LiteAPI SDK

To begin, include the LiteAPI SDK in your HTML file by adding the following script tag inside the <head> section of your HTML document:

<head>
  <script src="https://components.liteapi.travel/v1.0/sdk.umd.js"></script>
</head>

This script imports the LiteAPI components SDK, which will allow you to use LiteAPI's features, including rendering hotels.

Step 2: Get your WhiteLabel URL and Encode It

Next, you’ll need to grab your WhiteLabel URL (for example: example.nuitee.link). This URL will act as your public key when initializing the SDK.

In your browser's console, use the btoa() function to encode the URL as Base64:
```
btoa('your-whitelabel-url.nuitee.link')
```
The result will be your public key. For example, encoding the URL whitelabel.nuitee.link would result in:
```
d2hpdGVsYWJlbC5udWl0ZWUubGluaw==
```

This encoded URL will be used in the SDK initialization.

Step 3: Add a Container for the Hotels List

To display the hotels list, you need to add an HTML element that will act as a container for the display. Add the following <div> element anywhere in your HTML body where you want the hotels list to appear:

<div id="hotels-list"></div>

The id attribute should be unique (e.g., id="hotels-list"), and you can customize the style attribute to adjust CSS properties.

Step 4: Initialize the SDK and Render the Hotels List

Now that you’ve included the SDK, encoded your WhiteLabel URL, and set up a container for the hotels, the next step is to initialize the SDK and render the hotels list in your application.

Here’s how you can do it in a <script> tag.

<script>
  // Initialize the SDK with your public key (the base64-encoded WhiteLabel URL)
  LiteAPI.init({
    publicKey: 'd2hpdGVsYWJlbC5udWl0ZWUubGluaw=='
  });

  // Create and display the hotels list inside the container
  LiteAPI.HotelsList.create({
    selector: '#hotels-list',  // The container where the hotels list will be rendered
    placeId: 'ChIJdd4hrwug2EcRmSrV3Vo6llI',  // The placeId to run the search (e.g. London)
    primaryColor: '#7057F0',  // Your brand color (hex code) to use for buttons
    hasSearchBar: true,
    rows: 2
  });
</script>

LiteAPI.init(): Initializes the SDK with your public key (which is the Base64-encoded WhiteLabel URL).
LiteAPI.HotelsList.create(): Creates the list and injects it into the container specified by the selector. The placeId is used to fetch hotels for a specific location (e.g., Rome or another point of interest). You can look up for a specific placeId using our Places API endpoint.
- Options that can be provided:
  - selector (required, string) - the CSS selector where the component should be displayed
  - placeId (optional, string)
  - primaryColor (optional, string)
  - hasSearchBar (optional, boolean)
  - rows (optional, number) - how many rows of hotels to display
  - currency (optional, string e.g. USD)
  - onHotelClick (optional, Function)
    - When this is provided, clicking a rate will call this function with all the relevant data instead of opening up your connected Whitelabel site. The data will contain hotel: Object, checkin: string, checkout: string, adults: number, children: Array.

Please ensure that this <script> tag is placed after the script tag from Step 1, which is responsible for loading the SDK.

Here's another example where the search bar is hidden, and only one rows of results is displayed:

Full Example

Here’s a complete example of how your HTML file might look after following these steps:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiteAPI Hotels List Example</title>
  <!-- Include LiteAPI SDK -->
  <script src="https://components.liteapi.travel/v1.0/sdk.umd.js"></script>
</head>
<body>

  <!-- Container for the hotels list -->
  <div id="hotels-list"></div>

  <script>
    // Initialize LiteAPI SDK with the public key
    LiteAPI.init({
      publicKey: 'd2hpdGVsYWJlbC5udWl0ZWUubGluaw=='
    });

    // Create the hotels list and render it inside the container
    LiteAPI.HotelsList.create({
      selector: '#hotels-list',
      placeId: 'ChIJdd4hrwug2EcRmSrV3Vo6llI', // Example Place ID for London
      primaryColor: '#7057F0',  // Your brand color (hex code) to use for buttons
      hasSearchBar: true,
      rows: 2
    });
  </script>

</body>
</html>

In this example:

The hotels list is rendered inside a <div> element with id="hotels-list".
The search bar is enabled and the system will display up to two rows of hotels.
The search is made against the provided Place ID ('ChIJ5TCOcRaYpBIRCmZHTz37sEQ'). You can look up for a specific placeId using our Places API endpoint.
The brand color for the buttons is set to #7057F0

Summary of Steps:

Include the LiteAPI SDK using a <script> tag.
Encode your WhiteLabel URL as Base64 to use as the public key.
Add a container in your HTML for the hotels list.
Initialize the SDK and render the hotels list using LiteAPI.HotelsList.create().

With these simple steps, you'll be able to display a hotels list on your web page using the LiteAPI SDK.