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 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 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.
    • Options that can be provided:
      • selector (required, string)
      • primaryColor (optional, hex string)
      • openGuestPopup (optional, boolean)

Please ensure that this <script> tag is placed after the script tag from Step 1, which is responsible for loading 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 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 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.


Did this page help you?