Table of Contents | ||
---|---|---|
|
Orbita supports the autocomplete feature in their chatbots. You (also known as type ahead, autofill, auto-suggest, auto-populate, word suggestions, and so on) that gives suggestions to the chatbot users as they type the text in the keyboard input field of the chatbot.
As an admin user, you can achieve this by using the Autocomplete directive.
...
You will get suggestions only after you type three letters.
There are two ways you can use the autocomplete directive:
Filtering the content on the client-side
Filtering the content on the server-side.
Filtering on the Client-side
In the below example, we use the autocomplete (also known as type ahead, autofill, auto-suggest, auto-populate, word suggestions, and so on) feature that will give country suggestions based on the letters typed.
...
You
...
You can enable the auto-complete feature by placing the below code in the function node in the Experience Designercan save the list of countries in the content or dynamic data or use place the list in an array in the function node and use it.
Below given is a sample code you can use in a function node in Experience Designer for the autocomplete directive.
Code Block |
---|
if(!msg.payload.orbita) { msg.payload.orbita = {}; } if(!msg.payload.orbita.directive) { msg.payload.orbita.directive = []; } var country = ['Belarus', 'Belgium', 'Belize', 'Grenada', 'Canada', 'Madagascar']; var suggestion=[]; for(var i=0;i<country.length;i++){ var obj={ "item": country[i], "value": country[i] } suggestion.push(obj) } msg.payload.orbita['directive'].push({ 'type': 'autocomplete', 'maxSuggestions': 5, 'items':suggestion, 'excludeList': ['what','for'], "url":""} ); return msg |
The ‘item’ is the indexed parameter and the 'value' is shown in the suggestions.
Filtering on the Server-side
You can use an external API to fetch the content. As the chatbot user inputs text in the keyboard input box, the chatbot will show the suggestions based on the API response data.
Given below is a sample code you can use in the function node in the Experience Designer for the autocomplete directive.
Ensure that you will get the filtered response from the API. A maximum of 5 suggestions will be an ideal user experience.
Code Block |
---|
if(!msg.payload.orbita) {
msg.payload.orbita = {};
}
if(!msg.payload.orbita.directive) {
msg.payload.orbita.directive = [];
}
msg.payload.orbita['directive'].push({
'type': 'autocomplete',
'maxSuggestions': 5,
"url":"https://api.publicapis.org/categories"
});
return msg |
In conjunction with the Autocomplete directive, use the http in node and place the API URL.
...
Connect the http in node with the http out node.
...
Appendix
Property | Description |
---|---|
| Directive type. In this case, it is ‘autocomplete’. |
| You can set the number of suggestions displayed in the suggestion box. |
| The suggestions array. |
| The words listed in this array are typed by the user, these words will not appear in the suggestion box |
| The API that returns the suggestions list. |
Related articles
Filter by label (Content by label) | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|