Authorization
API Resources
NL Interpreter
Search
Messenger
Deflection
Overview
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 ( . , : ; ( ) ¿ ? ¡ !).
Note
You can link the Deflection component to multiple input elements.
Important
The potential number of requests that this components generates may affect your API usage. Increase the debounceTime option to reduce the number of requests.
Usage
To create this component:
var deflection = sdk.component('deflection', target:String, options:Object);Sample
By default, this component looks like a text field and reacts with user input:
Target
This is the CSS-selector for the HTML component. For example, an "#inbenta" target would be:
<div id="inbenta"></div>Options
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
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. |
Subcomponents
This component has some components inside which can be configured. This components are:
| Name | Description |
|---|---|
| contents | Component to render each content |
Events
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 |
Tracking
This component calls the API to do the following:
- every time a search is performed, it sends a
/searchrequest with thetypeparameter 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/eventsendpoint. - it triggers the contact_click event when a user clicks on a content.
Labels
| Label | Default value |
|---|---|
INSTANTS_TITLE |
Instants Faqs |
Examples
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.setLinkedToElement(document.getElementById('question'));
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) {
deflection.setContents(response.data);
});