SDK Builder

You can use this builder to create complete User Interfaces (UI) or single components.

Note: All examples shown are set in a Production environment.

Build a UI

Build

This method creates a UI that connects to the Search API. It uses its own instance of the API client when rendering the base components. The first parameter is the div where the base components will show. 

The options parameter allows you to overwrite the default configuration for the UI and for the conversation in a JSON format. This method is resolved asynchronously and returns a Search object containing the API instance used.

Insert the following div on your page:

 <div id="inbenta"></div>

Note: The div will be replaced with content retrieved from the SDK. To apply styles, add a parent level, like this:

<div id="inbentaContainer">
<div id="inbenta"></div>
</div>

Then, call the build function to build an Inbenta application:

 sdk.build('#inbenta');

Note: You must declare the HTML object that contains the component before the component creation. For more information, see the components page.

Example:

The example below creates a UI with the following default components:

For more information about available configuration parameters, such as tabs or filters, see the sections below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Getting started | Inbenta Search SDK</title>
</head>
<body>
  <div id="inbenta"></div>

  <!-- Include the Inbenta Search SDK. -->
  <script src="https://sdk.inbenta.io/search/<version>/inbenta-search-sdk.js"></script>
  <script>
    var domainKey = '<your_Domain_Key>';
    var apiKey = '<your_API_Key>';

    // Create the SDK instance using your domain key.
    var sdk = InbentaSearchSDK.createFromDomainKey(domainKey, apiKey);

    // Build a UI into #inbenta with no configuration.
    sdk.build('#inbenta');
  </script>
</body>
</html>

This will looks like this:

Simple build

Usage

Use the method signature like this:

sdk.build(target: HTMLElement|String, options: Object = {});

Note: You have to declare the Inbenta Search SDK instance first, with its configuration, before you can use the builder. For more information, see the Getting started page.

Parameter Type Description
target String, HTMLElement This is the element (or CSS selector string) that is used as a mounting point. Do not mount it to <html> or <body>.
options Object The UI options

Options

The following table shows the configuration that you can set up with the builder.

Name Type Description
forceFilters Array Filters to be sent in every request, along with the selected facet refinements. The format in explained in the /federated-search (filters option) in the Search API Routes.
pagination Object See the Pagination component options
refinementLists Object See the RefinementLists component options
refinementTabs Object See the RefinementTabs component options
results Object See the Results component options
resultsPerPageSelector Object See the Results Per Page Selector component options
router Boolean Enable or disable the Router component. (Disabled by default)
searchBox Object See the SearchBox component options
searchParams Object The API parameters to be sent in every request. The format in explained in the /federated-search (body payload) in the Search API Routes.
Note: While components may have a searchParams parameter, Inbenta recommends that you use this searchParams options instead when you use the build method.
sortBySelector Object See the Sort By Selector component options
stats Object See the Stats component options
type String Use this option to select the kind of build that you want to make, i.e. what components the build method should use.
The available options are:
- standard (default): the UI has the typeahead autocomplete
- semantic: the UI has the semantic autocomplete.
- instant-results: the instant results component replaces the regular results component in the UI, and no autocomplete is added.

Example

In the following example, we create a UI with the following default components:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Getting started | Inbenta Search SDK</title>
</head>
<body>
  <div id="inbenta"></div>

  <!-- Include the Inbenta Search SDK. -->
  <script src="https://sdk.inbenta.io/search/<version>/inbenta-search-sdk.js"></script>
  <script>
    var accessToken = '<your_access_Token>';
    var apiKey = '<your_API_key>';
    var sdk = InbentaSearchSDK.createFromAccessToken(accessToken, apiKey);

    sdk.build('#inbenta', {
      results: {
        resultsPerPage: 5,
        attributes: ['BEST_DYNABS', 'Price'],
      },
      refinementLists: {
        refinements: [
          { attributeName: 'Gender', headerText: 'Gender' },
          { attributeName: 'Age Range', headerText: 'Age Range' },
          { attributeName: 'Product Category', headerText: 'Product Category' },
          { attributeName: 'Product Size', headerText: 'Product Size' },
          { attributeName: 'Price', headerText: 'Price' },
          { attributeName: 'Product Brand', headerText: 'Product Brand' },
        ],
      },
      refinementTabs: {
        attributeName: 'Product Type'
      },
      router: true,
      type: 'semantic'
    });
  </script>
</body>
</html>

The result looks like this:

Advance build