Embed your healthcare agent service instance in your application using WebChat

Статья
01/21/2025

You can connect your healthcare agent service to interact with your web application’s users through a web chat control

Sign-in to the healthcare agent service Management Portal
In the left menu blade, select Channels under Integration.
Select the View action of the Web Chat channel

"Screenshot of Webchat"

Setting up your webchat

You can setup your own webchat client with some simple HTML, Javascript and CSS code, as shown below. Or you can follow the steps demonstrated in the GitHub repository to embed the healthcare agent service in the web application as an iFrame or as a web page element (div embedding).

HTML

A simple HTML markdown with a single div with id botContainer that will be used to inject the webchat. The HTML page also injects the latest webchat from the botframework cdn and a custom site.js to trigger the Directline.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="site.css" />
</head>

<body>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <script src="site.js" asp-append-version="true"></script>

    <div id="botContainer" ></div>

    <noscript>
        Please enable Javascript to use this bot.
    </noscript>
</body>

</html>

Javascript

To create the directline token needed to trigger the Directline, you can use the following (TokenGenerator)[https://github.com/iBoonz/TokenGenerator]


(function () {

    const Http = new XMLHttpRequest();
    const url = 'https://yourAzureFunction.azurewebsites.net/api/GenereratorFunction';

    Http.open("GET", url);
    Http.setRequestHeader("Cache-Control", "no-cache");
    Http.setRequestHeader("Pragma", "no-cache");
    Http.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    Http.send();

    Http.onreadystatechange = function () {
        if (Http.readyState === XMLHttpRequest.DONE) {
            var status = Http.status;
            if (status === 0 || (200 >= status && status < 400)) {

                const tokenPayload = JSON.parse(atob(Http.responseText.split('.')[1]));
                var dl = window.WebChat.createDirectLine({ token: tokenPayload.connectorToken });
                window.WebChat.renderWebChat({
                    directLine: dl,
                    userID: tokenPayload.userId,
                    username: tokenPayload.userName,
                    locale: 'en-us',
                    botAvatarInitials: 'Contoso',
                    userAvatarInitials: tokenPayload.userName.substr(0, 3),
                    styleOptions: {
                       
                    }
                }, document.getElementById('botContainer'));

                //You can enable this to trigger a certain scenario or provide arguments
                // var user = {
                //     id: tokenPayload.userId,
                //     name: tokenPayload.userName
                // };
                // window.supported = true;
                //  dl.postActivity({
                //      type: "invoke",
                //      value: {
                //          trigger: "yourScenarioId",
                //          args: { "var1": "value1" }
                //      },
                //       locale: 'en-us',
                //      from: user,
                //      name: "TriggerScenario"
                //  }).subscribe(function (id) {

                //  });
            }
        }
    };
})();

CSS

html, body {
    height: 100%;
    margin: 0;
    background: url(background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	overflow:hidden
}


#botContainer {
  background: #ffffff;
    height: 1100px;
    width: 500px !important;
    border: 1px solid rgb(0, 99, 177);
    bottom: 20px;
    right: 20px;
    font-size: 30px !important;
    position: absolute;
}

Exchange of ad-hoc information between the host application and the healthcare agent service instance

The partner application service can send optional attributes while in chat session or as part of service side response. (See step 3 in the diagram above.)

Sending ad-hoc information in chat initiation

This GitHub code sample provides an example of how to pass unplanned location information about the user.

The following is an example of the extraction code in the healthcare agent service Scenario Editor action element:

${lat} = @{initConversationEvent}.location.lat

Sending ad-hoc information while in chat

For example, to send user location while in chat, in the Scenario Editor you'll have to write an action with this code:

var msg = new builder.Message(session);
msg.data.type = "event";
msg.data.name = "shareLocation";
msg.data.value = <your value object>;
session.send(msg);

On the client side, you'll have to write this code:

botConnection.activity$.filter(
    activity => activity.type === "event" && activity.name === "shareLocation"
).subscribe(activity => getUserLocation(activity.value));

The getUserLocation method can be implemented based on browser supported capabilities.

End user authentication

Some features are only enabled when the end user is authenticated, you can find more information here

Next steps

Healthcare agent service Channels

Поделиться через