Display 2 TWC components at the same time

Deployment Teneo Web Chat
1

Hi,
I would like to display more than 2 UI components at the same time. For example, 1 button and 1 table. But twc only allowed 1 twcwebclient output parameter exists before the user give a userinput, otherwise it will be overwritten.

Is there a way to achieve this goal?

Kind regards

2

Hi.
The output parameter you are mentioning is actually “teneowebclient”, not “twcwebclient”. And you are right, it is not possible to add multiple messages to it. To handle multiple messages, you can create your own additional output parameter, call it for instance “additionalMessages”, and put all the additional messages into it. Then you would have to create a TWC extension to output the content of this parameter. Note, however, that if a message contains CTAs sending requests to Teneo (buttons, forms etc), they become disabled when a next message is added. If you want to change this behavior, you will have to modify the TWC source code.

3

Hi Alexander,
Thanks for the answer. Yes, I typed wrongly for “teneowebclient” in the post. Can you guide me how to create a TWC extension?

Kind regards

4

A simplified version of the extension is question can look something like this (I’ve improvised it but haven’t tested it for eventual bugs, typos etc):

TeneoWebChat.on('engine_response', payload => {
    var x = payload.responseDetails.output.parameters;
    if (x == null) return;
    x = x.additionalMessages;
    if (x == null || (x = x.trim()).length === 0) return;
    x = JSON.parse(x);
    if (!Array.isArray(x)) {
        console.error('The value of the additionalMessages output parameter is not an array', x);
        return;
    }
    if (x.length === 0) return;
    const f = () => {
        const msg = x.shift();
        try {
            TeneoWebChat.call('add_message', msg);
        } catch (err) {
            console.error('Error adding message', err, msg);
        }
        if (x.length !== 0) setTimeout(f, 250);
    };
    setTimeout(f, 500);
});

Ideally you should also handle situations where the user refreshes his/her page while the messages are being displayed so the remaining ones are continued after the page refresh, as well as situations where the user inputs something before all the messages have been displayed. This simple illustration extension doesn’t handle all that.

The format of the messages you add via “add_message” is slightly different from what you would add via the “teneowebclient” output parameter (note the “data” object in ‘add_message’).

Output parameter “teneowebclient”:

{
  "type": "quickreply",
  "quick_replies": [...]
}

Calling ‘add_message’:

{
  "type": "quickreply",
  "data": {
    "quick_replies": [...]
  }
}

The value of the “additionalMessages” output parameter should be an array, something like this:

[
  {
    "type": "buttons",
    "data": {
      ...
    }
  }, {
   "type": "table",
    "data": {
      ...
    }
  }
]