Authorization
API Resources
NL Interpreter
Search
Assist
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 linked to it.
The list of suggested content is dynamic and changes as the user types their query. The query is fragmented by predefined splitters.
This component automatically creates a new store for itself.
Note
You can link the Deflection component to an input, textarea or select HTML element. You can also link the Deflection component to multiple input elements.
Usage
To create this component:
sdk.component('deflection', target: HTMLElement|String, options: Object);Sample
By default, this component looks like this:
Options
The following options can be set in this component:
| Name | Type | Default | Description |
|---|---|---|---|
| results | Object | {} |
The Results component options. This is used to customize how the deflection are rendered. |
| debounceTime | Number | 2000 |
The results are refreshed when users stop typing for the specified debounceTime time (in milliseconds). |
| triggers | Array | ['.', ',', ':', ';', '(', ')', '¿', '?', '¡', '!'] |
The results are refreshed when users type one of the specified texts in triggers. |
| placement | String | right |
The popup placement. See popper.js placements docs for valid values. |
| modifiers | Object | The popup modifiers. See popper.js modifiers docs for valid values. | |
| forceFilters | Array | [] |
Filters to be sent in every request, along with the selected facet refinements. The format in explained in the /federated-search (filters option) in the Search API docs. |
| searchParams | Object | { matchHighlightTags: ['<strong class="inbenta-match">', '</strong>'], correctionHighlightTags: ['<em class="inbenta-correction">', '</em>'], expansionHighlightTags: ['<em class="inbenta-expansion">', '</em>'] } |
The API parameters to send in every request. For the format to use, see the /federated-search endpoint of Search API Routes. Note: API parameters facets and attributes cannot be modified this way. See here for additional details. |
searchParams note
You can use the component option searchParams to modify the API search queries. Nonetheless, some of the API attributes can be also handled by other linked components. This means that even if you set some searchParams, they may not applied if you are using certain components.
These are the components that may affect this option:
| Component | Affected API attributes |
|---|---|
| Results | offset, length |
| Refinement tabs | attribute, sort |
| Refinement list | attribute, sort |
| Results per page | offset, length |
| Router | filters, query, offset |
| Semantic autocomplete | query, offset, length |
| Sort by selector | sort |
Methods
The following methods can be used in this component:
| Method | Description |
|---|---|
linkToInput(input: HTMLInputElement) |
Listen to the element's input events to trigger queries. |
unlinkFromInput(input: HTMLInputElement) |
Stop listening to the element's input events to trigger queries. |
unlinkAll() |
Stop listening to the all input events to trigger queries. |
Tracking
This component calls the API to do the following:
- every time a search is performed, it sends a
/federated-searchesrequest with thetypeparameter set to contact to get the result of the question and track the search as a contact_search event. - it logs a contact_start event using the
/tracking/eventsendpoint. - it triggers the contact_click event when a user clicks (left or right-click) on a content.
Events
| Name | Description |
|---|---|
| show | Emitted when the deflection are shown |
| hide | Emitted when the deflection are hidden |
Labels
This component uses the following labels:
| Name | Default | Description |
|---|---|---|
| INSTANTS_HEADER_TEXT | Instant FAQs |
The heading text |
Examples
Automatically search on input change
<input type="text" id="query">
<div id="deflection"></div>
<script>
// The input will trigger deflection wether its value is changed.
var input = document.querySelector('#query');
var deflection = sdk.component('deflection', '#deflection');
deflection.linkToInput(input);
</script>Use refinements and trigger custom searches
<div id="deflection"></div>
<script>
const deflection = sdk.component('deflection', '#deflection');
deflection.searchStore.query = 'cars';
deflection.searchStore.addFacet('color');
deflection.searchStore.addFacetRefinement('color', 'blue');
</script>