Create a component

If you need a more fine-tuned experience, you can build your components separately.


This is the working environment of the SDK. It is set by default to a production environment.

config = {

The production environment is your Live site. Use the development environment for setup and testing, or you risk affecting your site statistics.


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

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-label and aria-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) {

Example with events

var lastchance = sdk.component('last-chance', '#deflection');

lastchance.on("submit", function (e) {
            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">

  <meta charset="UTF-8">
  <title>Inbenta Search SDK</title>

  <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>
  <script src="<version>/inbenta-search-sdk.js"></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