Developers
Authorization
API Resources
NL Interpreter
Search
Assist
Search
Search JS SDK
SDK Components
SDK Components
Create a component
If you need a more fine-tuned experience, you can build your components separately.
Environment
This is the working environment of the SDK. It is set by default to a production environment.
config = {
environment:'production'
};Caution
The production environment is your Live site. Use the development environment for setup and testing, or you risk affecting your site statistics.
Usage
sdk.component(component: String, target: HTMLElement|String, options: Object = {});| Parameter | Type | Description |
|---|---|---|
| component | String | The component name. You can write it in kebab-case or CamelCase. See below for a list of available components. |
| target | String, HTMLElement | The element (or CSS selector string) that is used as a mounting point. Do not mount the component to <html> or <body>. |
| options | Object | The component options. See the options available for each component. |
Available components
- Deflection (previously known as "Instants")
- Expandable results
- Filter components
- Instant Results
- Last Chance
- Loader
- No Results
- Pagination
- Refinement Lists
- Refinement Tabs
- Results
- Results per Page Selector
- Router
- Search Box
- Semantic Autocomplete
- Sort By Selector
- Stats
- Typeahead Autocomplete
- Generative AI
Accessibility support
Some components implement several features to improve accessibility, according to WCAG standard:
- Improved tab navigation (including repeated links not being focusable).
- Added labels (
aria-labelandaria-describedby) for all required elements. - Added elements and sections roles.
- Added metadata for specific component elements (like pagination, for the current page, etc.).
Example of component creation with options.
var instants = sdk.component('instants', '#deflection', {
"debounceTime": 1000,
"results": {
"templates": {
"item": '<a href="{{ __url }}" {{{ __clickable }}} target="_self">'
+ '{{ title }}'
+ '</a>'
}
}
});Manage events inside component
Some components can contain events. This is useful when you want to launch an action when this event is triggered. To use them, simply add them like this:
component.on('event-name', function (event) {
console.log(event);
});Example with events
var lastchance = sdk.component('last-chance', '#deflection');
lastchance.on("submit", function (e) {
console.log("submitted")
sdk.client.trackEvent("contact_ticket", { value: "This is the final ticket question" });
});Simple example:
var searchBox = sdk.component('search-box', '#search-box', {
autofocus: true,
});Advanced example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inbenta Search SDK</title>
</head>
<body>
<div id="app">
<div id="searchBox"></div>
<div class="container">
<div id="stats"></div>
<div id="filters"></div>
<div id="tabs"></div>
<div id="results"></div>
<div id="pagination"></div>
<div id="loader"></div>
</div>
</div>
<script src="https://sdk.inbenta.io/search/<version>/inbenta-search-sdk.js"></script>
<script>
var domainKey = 'domain_key';
var apiKey = 'api_key';
// Creates the SDK instance using your access token.
var sdk = InbentaSearchSDK.createFromDomainKey(domainKey, apiKey);
// Creates a results component and change the limit to 5 results with the attributes BEST_DYNABS and Price
var results = sdk.component('results', '#results', {
resultsPerPage: 5,
attributes: ['BEST_DYNABS', 'Price']
});
// Creates a searchBox component with the default options
var searchBox = sdk.component('search-box', '#searchBox');
// Creates a stats component with the default options
var stats = sdk.component('stats', '#stats');
// Creates a refinement lists component with the setting Price
var priceRefinement = sdk.filterComponent('facet', { attributeName: 'Price'});
var filters = sdk.component('refinement-lists', '#filters', {
refinements: [
{
component: priceRefinement,
headerText: 'Price'
}
]
});
// Creates a refinement tabs component using the setting Product Type
var tabs = sdk.component('refinement-tabs', '#tabs', {
attributeName: 'Product Type'
});
// Creates a pagination component with the default options
var pagination = sdk.component('pagination', '#pagination')
// Creates a loader
var loader = sdk.component('loader', '#loader');
// Links each creates component to the results in order to work properly
results.linkTo(searchBox);
results.linkTo(stats);
results.linkTo(filters);
results.linkTo(tabs);
results.linkTo(pagination);
results.linkTo(loader);
</script>
</body>
</html>