How do I use Auto complete feature in chatbot
Orbita supports the autocomplete feature (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 can 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.
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 msgThe ‘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.
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 msgIn 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. |