To create a component in a specific HTML entity, you can call the "component" method.

sdk.component(component_name:String, target:String, options:Object);

The options for each component can be a configuration of a subcomponent or a configuration of the specific content.

Environment

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

config = {
    environment:'production'
};

Components Ready

A component is "ready" when the base data that it needs to function is loaded. For instance, the popular component is ready when popular content has been loaded, whereas the searchBox component does not need any data to be ready.

To know whether or not a component is ready, you must check the untilReady property. This is a promise that is resolved when the component is ready.

Example:

var popular = sdk.component('popular', '#popular');
popular.untilReady.then( function (response) {
      // Do awesome things
});

List of available Components

• Typeahead Autocomplete
• Categories
• Categories breadcrumb
• Categories dropdown
• Categories sidebar
• Contents list
• Deflection (previously known as "Instants")
• Instants results
• Last chance
• Loader
• Popular
• Push
• Push&Popular
• Results
• Search Box
• Semantic Autocomplete
• User question list

Subcomponents

You can configure subcomponents inside a component.

List of available subcomponents

• Contents
• Decision Tree
• Ratings
• Related

Open modal window

You can open a component or a build template inside a Inbenta modal window:

• Add component to a modal window
• Add build template to a modal window

Manage events inside component

Some components contain events. This is useful to do an action when this event occurs. They are easy to use:

<component>.$on(event:String, function (<event_params>) {
  // Do something awesome
});

Example:

In the example below, you create a categories element where the selected category is "1". Then, you link this categories component to a sidebar. When a user clicks on the sidebar, it updates the categories component with the new category and creates a console.log of the selected category.

//create component
var categories = sdk.component('categories', '#categories', {
  //Configuration of this component
  categoryId: 1,
  //Configuration of subcomponents
  contents: {
    settingsToShow: ['ANSWER_TEXT'],
    showRelated: true,
    showDecisionTree: false,
    ratings: {
      elements: [
        {
          id:1, 
          label: 'Yes, it\'s perfect', 
          comment: false 
        },
        {
          id:2, 
          label: 'No, it doesn\'t help', 
          comment: true 
        }
      ],
    }
  }
});

//Link components
var categoriesSidebar = sdk.component('categoriesSidebar', '#sidebar', {selectedCategory:1});
categories.linkToCategoriesSidebar(categoriesSidebar);

//Sidebar event
categoriesSidebar.$on('categoryId', function (categoryId) {
  console.log(categoryId);
})