Authorization
API Resources
NL Interpreter
Search
Messenger
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 in the following example:
<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:
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 |
| expandableResults | Object | See the Expandable Results component options. If there are options for this component, the results component will be disabled and the expandable-results used instead |
| 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:
