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

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 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.