Formerly called "Instants", this component can be called either as deflection or instants. This component shows a pop-over with contents according to a search in the input, textarea or select value. The list of suggested content is dynamic and changes as the user types their query. The query is fragmented by predefined splitters. The component is refreshed (i.e. it searches for new results) when the user stop typing for 2000 miliseconds, or when they type a special character ( . , : ; ( ) ¿ ? ¡ !).


You can link the Deflection component to multiple input elements.


The potential number of requests that this components generates may affect your API usage. Increase the debounceTime option to reduce the number of requests.


To create this component:

var deflection = sdk.component('deflection', target:String, options:Object);


By default, this component looks like a text field and reacts with user input:


This is the CSS-selector for the HTML component. For example, an "#inbenta" target would be:

<div id="inbenta"></div>


Available options to set in this component

Name Type Default Description
categoryId integer 0 Knowledge instance category Id
maxResults integer 3 Maximum number of shown results. Minimum: 1. Max: 100.
debounceTime integer 2000 The results are refreshed when the user stop typing for debounceTime time in milliseconds. Minimum: 200.
triggers array ['.',',',':',';','(',')','¿','?','¡','!'] When a user type a trigger character, the component is refreshed.

Default options object

  maxResults: 3


Methods can be used in this component.

Name Description
setQuery(query: String) Set the query parameter to show contents for that query.
linkToInput(input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) Link this component to an input element: the component listens to the input/change event of the input, and it is placed nearby. When the user types in or selects a different options, it makes a search with the input value. In the case of input or textarea, this request is throttled so that it is made after a specific period of time has passed without user input.
hide() Hide the component if it is displayed.
setLinkedToElement(element: HTMLElement) This methods allows to manually change next to which element the component is displayed.
setContentsDataInterceptor(interceptor:function) Set a contents interceptor.
setContents(contents: Array) This method allows to populate the component with any array of contents desired. Contents object passed to the method has to have the same structure that the result obtained from the Inbenta KM API contents routes
setRelatedDataInterceptor(interceptor:function) Set a related interceptor.


This component has some components inside which can be configured. This components are:

Name Description
contents Component to render each content


Events to listen on this component:

Name Params Description
click content: Content object Sent whether a content is clicked
expand content: Content object Sent whether a content is expanded
relatedClick integer: Related content id Sent whether a related content is clicked
decisionTreeClick decisionTree: Decision tree object Sent whether a decision tree content is clicked
rateContent rating: Rating object Sent whether a rating is clicked


This component calls the API to do the following:

  • every time a search is performed, it sends a /search request with the type parameter set to contact to get the result of the question and track the search as contact.
  • it sends a contact_start event using the /tracking/events endpoint.
  • it triggers the contact_click event when a user clicks on a content.


Label Default value


Here is an example of how you can use the component in different ways.

// Link Deflection directly to an input, when the input changes the component appears besides the input
var deflection = sdk.component('deflection', '#deflection');
deflection.linkToInput(document.getElementsByTagName('select')[0]); // Link to first <select> DOM element; it listens to a change in the select event, and displays the instants next to the select element.

// Set the query to update the Deflection components with new results
var deflection = sdk.component('deflection', '#deflection');
deflection.setQuery('acme'); // Instant appear with contents related to "acme" besides the "question" element.

// Obtain results by other means and set them using the setContents method
var deflection = sdk.component('deflection', '#deflection');
sdk.client.getContentsById('2,4,5').then(function(response) {

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73