Integrate a Search Bar Widget

In this tutorial, you will learn how to integrate and use the LiteAPI Search Bar Widget in your web application to display a dynamic, interactive search bar. 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 the search bar or the map component.


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.

  1. In your browser's console, use the btoa() function to encode the URL as Base64:

    btoa('your-whitelabel-url.nuitee.link')
    
  2. 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 Map

To display the map, you need to add an HTML element that will act as a container for the search bar. Add the following <div> element anywhere in your HTML body where you want the map 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 map’s height 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 public key (the base64-encoded WhiteLabel URL)
  LiteAPI.init({
    publicKey: 'd2hpdGVsYWJlbC5udWl0ZWUubGluaw=='
  });

  // 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 public key (which is the Base64-encoded WhiteLabel URL).
  • LiteAPI.SearchBar.create(): Creates the search bar and injects it into the container specified by the selector.

Please note that this <script> tag must be placed after the previous script tag that in step 1 that is responsible for including the SDK.


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 Map 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 the public key
    LiteAPI.init({
      publicKey: 'd2hpdGVsYWJlbC5udWl0ZWUubGluaw=='
    });

    // 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 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:

  1. Include the LiteAPI SDK using a <script> tag.
  2. Encode your WhiteLabel URL as Base64 to use as the public key.
  3. Add a container in your HTML for the search bar.
  4. 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.