Guides
Free SignupLogin to DashboardCustomer Support
  1. NO-CODE WIDGETS

Integrate a Hotels List Widget

In this tutorial, you will learn how to integrate and use the LiteAPI Hotels List Widget in your web application to display a dynamic, interactive list of hotels. Follow the steps below to get started.

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 Domain

Next, you'll need your WhiteLabel Domain (for example: example.nuitee.link). This domain will be used directly when initializing the SDK.

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 domain
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link'
  });

  // 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 domain (your WhiteLabel domain, e.g., example.nuitee.link).
  • 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)
      • checkin (optional, string) — check-in date in YYYY-MM-DD format. Controls the start of the searched stay. Defaults to today.
      • checkout (optional, string) — check-out date in YYYY-MM-DD format. Combined with checkin, determines the stay length shown on each hotel card (e.g. set to the day after checkin to display 1 night rates). Defaults to today + 3 days.
      • filters (optional, object) — narrows the displayed hotels server-side. Supported keys:
        • hotelTypes (array of numbers/strings, or comma-separated string) e.g. [201, 208, 216, 222] or "201,208,216,222"
        • popularFilters (string) — e.g. "apartments"
      • 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.
      • deepLinkParams (optional, string) Query string added to every White Label URL opened by the widget (e.g., lang, currency). Don’t include a leading “?”. See Deep linking to White Label.
      • labelsOverride (optional, object) customize Search Bar labels:
        • searchAction (string) Search button label. Default: “Search”
        • placePlaceholderText (string) input placeholder. Default: “Search for a destination”

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:


Dates and Filtering (optional)

Use the checkin, checkout, and filters options to control the searched stay and narrow the results returned by the widget.


<script>
  LiteAPI.HotelsList.create({
    selector: '#hotels-list',
    placeId: 'ChIJdd4hrwug2EcRmSrV3Vo6llI',
    primaryColor: '#7057F0',
    hasSearchBar: true,
    rows: 4,
    checkin: '2026-05-21',
    checkout: '2026-05-22',
    filters: {
      hotelTypes: [201, 208, 216, 222],
      popularFilters: 'apartments',
    },
  });
</script>

Notes:

  • checkin / checkout directly drive the prices shown on each hotel card. To display 1-night totals, set checkout to the day after checkin. If both are omitted, the widget defaults to today through today + 3 days.
  • hotelTypes accepts either an array ([201, 208]) or a comma-separated string ("201,208").
  • Filters are applied server-side, so the returned list is already narrowed — no additional client-side filtering is required.

Common hotelTypes IDs

hotelTypes is a list of property type IDs. The example above ([201, 208, 216, 222]`) filters to apartments, B&Bs, guest houses, and homestays. Here are some of the most commonly used IDs:

IDProperty type
201Apartments
203Hostels
204Hotels
206Resorts
208Bed and breakfasts
213Villas
216Guest houses
219Aparthotels
220Holiday homes
222Homestays
225Capsule hotels
228Chalets
250Private vacation home
257Cabin
274All-inclusive property

You can combine any of these IDs in the hotelTypes array to broaden or narrow the result set. For example, to show only apartments and apart-hotels, use [201, 219]. The full ID-to-property-type mapping is available in the LiteAPI reference.

Deep linking (optional)

  • Add your own query parameters to the White Label URL opened from hotel clicks.
  • Global via LiteAPI.init:
<script>
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link',
    deepLinkParams: 'language=fr&currency=EUR',
  });
</script>
  • Per widget (overrides global):
<script>
  LiteAPI.HotelsList.create({
    selector: '#hotels-list',
    placeId: 'ChIJdd4hrwug2EcRmSrV3Vo6llI',
    hasSearchBar: true,
    deepLinkParams: 'language=fr&currency=EUR',
  });
</script>

Notes: pass a plain query string (no leading ?); URL‑encode values if needed. If you use onHotelClick, you control navigation and must append your params yourself.


Note: deepLinkParams is appended only to the click-through booking URL it does not filter the displayed hotels or change the searched dates. Use it for tracking parameters such as utm_source, affiliate, or clientReference. To filter results or set dates, use the dedicated filters, checkin, and checkout options described in the Dates and Filtering section above.

Customize labels (optional)

  • Change the Search Bar button and placeholder text shown in the hotels list.
  • Global:
<script>
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link',
    labelsOverride: {
      searchAction: 'Search',
      placePlaceholderText: 'Search for a destination',
    },
  });
</script>
  • Per widget:
<script>
  LiteAPI.HotelsList.create({
    selector: '#hotels-list',
    placeId: 'ChIJdd4hrwug2EcRmSrV3Vo6llI',
    hasSearchBar: true,
    labelsOverride: {
      searchAction: 'Find hotels',
      placePlaceholderText: 'Where to?',
    },
  });
</script>

Supported keys: searchAction, placePlaceholderText. Scope: the embedded Search Bar in Hotels List.

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 hotel list -->
    <div id="hotels-list"></div>

    <script>
      // Initialize LiteAPI SDK with your domain
      LiteAPI.init({
        domain: 'whitelabel.nuitee.link',
        deepLinkParams: 'language=fr&currency=EUR',
        labelsOverride: {
          searchAction: 'Search',
          placePlaceholderText: 'Search for a destination',
        },
      });

      // Create the hotels list and render it inside the container
      LiteAPI.HotelsList.create({
        selector: '#hotels-list',
        placeId: 'ChIJdd4hrwug2EcRmSrV3Vo6llI',
        primaryColor: '#7057F0',
        hasSearchBar: true,
        rows: 2,
        // Optional: control dates and filter results
        checkin: '2026-05-21',
        checkout: '2026-05-22',
        filters: {
          hotelTypes: [201, 208, 216, 222],
          popularFilters: 'apartments',
        },
      });
    </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
  • The widget queries a 1 night stay (May 21 → May 22, 2026) and restricts results to apartments and apart-hotels via the filters option.

Summary of Steps:

  1. Include the LiteAPI SDK using a <script> tag.
  2. Get your WhiteLabel domain (e.g., example.nuitee.link).
  3. Add a container in your HTML for the hotels list.
  4. 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.

Updated 10 days ago