How to Create multiple topic pickers in VA chat bot.

[SandilyaSridhar]

• This article talks about a workaround for creating multiple topic pickers that render a specific list of topics as required.
• This article also talks about removing/Hiding the topics from the main OOB topic picker so to avoid rendering duplicates in the custom topic pickers.

Firstly what is a topic picker :

• The topic Piker renders the collection of published topics which is rendered by the below API.
•  

  var greetingMessage = vaSystem.getTopicSelectionMessage();
  vaSystem.sendTopicPickerControl(greetingMessage, "<New Name>");

   
• This setup topic controls the display of the initial greetings and the Show me everything button in Virtual Agent conversations.
• As it is clear what the topic picker is, let's dive into creating a multiple topic picker that doesn't use the above API as there is no way to render the specific list of topics using the OOB method.

Creating a Button that looks like a topic picker that leverages the 'promoted topics' configuration.

• Please refer to the Configure a Virtual Agent chat experience to understand what promoted topics are.

• Procedure

  1. Navigate to Collaboration > Virtual Agent > Custom Greetings and Setup.
  2. Or simply open the 'sys_cs_context_profile' and scroll down to the related list as shown in the below image.
  3. Create a topic from the designer that renders a list of topics to be shown in the new custom topic picker as shown below.
  4. In the static choice component, Configure the list of choices that are to be rendered.
  5. To map the choices to the actual topics, we need a script action to call the respective topics.
  6. The below script explains using the supported API to call a specific topic which is documented in the Virtual Agent scripts.

(function execute() {

  vaVars.selectedTopic = vaInputs.select_topic;
  
 switch (vaVars.selectedTopic) {

  case 'Test choice':
  vaSystem.switchTopicByName('Test choice')	;
    break;

  case 'Test multi link':
  vaSystem.switchTopicByName('Test multi link')	;
    break;

    case 'Test Queues':
  vaSystem.switchTopicByName('Test Queues')	;
    break;

    case 'survey test':
  vaSystem.switchTopicByName('survey test')	;
    break;
}
})()

• Create a scripted variable EX:'selectedTopic' that stores the value of the selected topic and make use of it in the switch case.
• The variable 'vaInputs.select_topic' is the name of the static choice component defined above and its value of it is mapped to the scripted variable 'vaVars.selectedTopic'.
• As mentioned above the script leverages the OOB API called 'vaSystem.switchTopicByName('<Name of the topic>') ;'. 

Mapping the above topic created to the promoted topics.

• Once the topic is created, as mentioned above, Click on the add topic UI action in the promoted topics and select the above-created topic.
• The VA chatbot renders the Promoted topic as shown below.
• 
• On click of the 'Frequently used Topics' which is a custom topic that is been created above, The VA renders the list of topics as shown below.
• 

How to remove the topics from the OOB Topic Picker:

• Navigate to the designer > Open the topic that should be removed from the topic picker.
• Uncheck the 'Included in the list of topics ' check box as shown below.
• 

Note:

• This article demonstrates navigating to several topics using a switch case, but this can be done using the OOB way by creating several decision components and script actions.

• The script action uses the topic names that I have configured, but please add the topics as per the requirement. 

Do share your thoughts on the same.

Happy learning. 🙂

[Arpad Lonstak]

Hi @SandilyaSridhar ,

Great idea for grouping topics.
Switch case is not necessary, if input values are the actual topic names.

Just applied the same (topic launching) method with the selected input, and it works:

vaSystem.switchTopicByName(vaInputs.select_topic);

BR, Arpi

[Patrick71]

PSA to anyone trying to do this using dynamic choice instead of static: make sure you create the topic in Global scope. The query on sys_cs_topic will not work otherwise.

This was my code: 

var options = [];

    var grTopics = new GlideRecord('sys_cs_topic');
    //Active and categorized as either ITSM IT Issues, ITSM Fulfiller, ITSM Actionable Notifications, or ITSM Self Service
    grTopics.addActiveQuery();
    grTopics.addEncodedQuery('design_categoryLIKE3efd22da0b203300a1b16c2367673a10^ORdesign_categoryLIKE5ca81c5a7331201083c1e0dbc4f6a7f8^ORdesign_categoryLIKEbfdd66da0b203300a1b16c2367673a1f^ORdesign_categoryLIKE140e2eda0b203300a1b16c2367673af4');
    grTopics.query();

    while(grTopics.next()){
        var topicName = grTopics.getValue('name');
        options.push({ 'value': topicName, 'label': topicName, 'render_style': 'data'});
    }

    return options;

[Keszia]

I'd like to piggy back off the back of this one and ask a similar question.

I want to have the All topic/show me everything button only showing at the end of a VA text box. Currently it repeats the opening message & lists the topic buttons that display when you open a new chat.

Is there a script to only show the  All topic/show me everything button?

[Tommy Jensen]

@Keszia did you find a solution to this? I need the exact same thing. just want to be able to display the button "Show me everything"

[Keszia]

@Tommy Jensen unfortunately not, but there are now official documentation on showing/hiding it - perhaps you can reverse engineer that to pluck out the script that only shows the button instead of the introductory message(s)?

These official guides are on how to change the messages.