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 KM App 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.

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 clicked Click on Content
expand content: content object expanded Click on expand Content
rateContent data:Object with rating data Click on content ratings

Tracking

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.

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.