Bot Framework Composer Backchannel event for welcome card | Bot Framework welcome card on event from webchat | Capture event from webchat client Bot Framework Composer

{tocify} $title={Table of Contents}

In Bot framework chatbot development using Bot framework composer there is option to trigger welcome event on user added event, but in situation we need a backchannel event from client webchat, for example if you develop a chatbot for different localization in different languages then you need this event.

Because what happens is, the welcome event will be triggered on user added then the locale won't be passed at that time, so we can't provide welcome card on user added event. We need a custom event for that from client webchat.

We can do this by following this blog.

Code Sample

This is my code; I'm utilizing the Web Chat control:

var dl = window.WebChat.createDirectLine({
        token: '[token]'
    });
   
    window.WebChat.renderWebChat(
        {
            directLine: dl,
            userID: 'YOUR_USER_ID',
            username: 'Web Chat User',
            locale: 'en-US',
            botAvatarInitials: 'WC',
            userAvatarInitials: 'WW'
        },
        document.getElementById('webchat')
    );

    window.setTimeout(function () {
        dl.postActivity({ type: "event", value: "hello", from: { id: "me" }, name: "PageLoaded" })
            .subscribe(id => console.log("success"));
    }, 5000);

The composer then receives it with an "Activity Event" trigger using the screenshots below.

Reference:

https://github.com/microsoft/BotFramework-Composer/issues/4451