SDK Components

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'
};

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

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

Subcomponents

You can configure subcomponents inside a component.

List of available subcomponents

Open modal window

You can open a component or a build template inside a Inbenta 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);
})