Integrate a Search Bar 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 the search bar (or the map component).

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 Search Bar

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

<div id="search-bar" style="width: 100%;"></div>

The id attribute should be unique (e.g., id="search-bar"), and you can customize the style attribute to adjust the search bar's width or other CSS properties.

Step 4: Initialize the SDK and Render the Search Bar

Now that you’ve included the SDK, encoded your WhiteLabel URL, and set up a container for the search bar, the next step is to initialize the SDK and render the search bar 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 the search bar and render it inside the container
  LiteAPI.SearchBar.create({
    selector: '#search-bar', // The container where the search bar will be rendered
    primaryColor: '#7057F0' // Your brand color (hex code) to use for buttons
  });
</script>

LiteAPI.init(): Initializes the SDK with your domain (your WhiteLabel domain, e.g., example.nuitee.link).
LiteAPI.SearchBar.create(): Creates the search bar and injects it into the container specified by the selector.
- Options that can be provided:
  - selector (required, string)
  - primaryColor (optional, hex string)
  - openGuestPopup (optional, boolean)
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.

Deep linking (optional)

Add your own query parameters to the White Label URL opened from the search bar.
Global via LiteAPI.init:

<script>
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link',
    deepLinkParams: 'language=fr&currency=EUR',
  });
</script>

Per widget (overrides global):

<script>
  LiteAPI.SearchBar.create({
    selector: '#search-bar',
    primaryColor: '#7057F0',
    deepLinkParams: 'language=fr&currency=EUR',
  });
</script>

Notes: pass a plain query string (no leading ?). If you implement onSearch, you control navigation and should append your params yourself.

Customize labels (optional)

Change the Search button text and the input placeholder.
Global:

<script>
  LiteAPI.init({
    domain: 'whitelabel.nuitee.link',
    labelsOverride: {
      searchAction: 'Search',
      placePlaceholderText: 'Search for a destination',
    },
  });
</script>

Per widget:

<script>
  LiteAPI.SearchBar.create({
    selector: '#search-bar',
    primaryColor: '#7057F0',
    labelsOverride: {
      searchAction: 'Find hotels',
      placePlaceholderText: 'Where to?',
    },
  });
</script>

Supported keys: searchAction, placePlaceholderText.

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 Search Bar Example</title>
    <!-- Include LiteAPI SDK -->
    <script src="https://components.liteapi.travel/v1.0/sdk.umd.js"></script>
  </head>
  <body>
    <!-- Container for the search bar -->
    <div id="search-bar" style="width: 100%"></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 search bar and render it inside the container
      LiteAPI.SearchBar.create({
        selector: '#search-bar', // The container where the search bar will be rendered
        primaryColor: '#7057F0', // Your brand color (hex code) for the button
      });
    </script>
  </body>
</html>

In this example:

The search bar is rendered inside a <div> element with id="search-bar".
Clicking the search button will open up your LiteAPI Whitelabel website.
The brand color for the button is set to #7057F0

Summary of Steps:

Include the LiteAPI SDK using a <script> tag.
Get your WhiteLabel domain (e.g., example.nuitee.link).
Add a container in your HTML for the search bar.
Initialize the SDK and render the search bar using LiteAPI.SearchBar.create().

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