Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Orbita supports the autocomplete feature in their chatbots. You 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:

  1. Filtering the content on the client-side

  2. Filtering the content on the server-side.

Filtering on the Client-side

In the below example, we use the autocomplete 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

type

Directive type. In this case, it is ‘autocomplete’.

maxSuggestions

You can set the number of suggestions displayed in the suggestion box.

items

The suggestions array.
Note: When the url field is present, the itemsfield should be empty.

excludeList

The words listed in this array are typed by the user, these words will not appear in the suggestion box

url

The API that returns the suggestions list.
Note: When the itemsfield is present, the url field should be empty

...

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@130ff
showSpacefalse
sortmodified
typeshowSpacepagefalse
reversetrue
labelstypedirectivepage
cqllabel = "directive" and type = "page" and space = "OCS"
labelsdirective