Bot Framework Composer Backchannel event for welcome card

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

Bot Framework Composer Backchannel event for welcome card

Table of contents

No heading

No headings in the article.

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.

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 below screenshots.

image.png

image.png

Reference: