Extend Azure Health Bot with custom scenarios

Completed

Dynamics 365 Omnichannel integration allows the patient to interact with Azure Health Bot using the Dynamics 365 chat widget to access the medical knowledge and your custom scenarios. It also allows the escalation of a bot conversation to a live agent to continue the interaction. When escalating a conversation, Dynamics passes along the conversation history and the context to the agent.

In this exercise, you'll do the following:

  1. Design the below Health Bot Scenario called MCH_PatientService

    Screenshot of the Health Bot Scenario diagram.

    1. The Intro statement card triggers a welcome message to the customer.

    2. The MedOrAgent card prompts with the Medication refill or Live Agent action authored card.

    3. The IsMedRefill decision card checks the variable and submits a medication refill or starts live chat.

    4. The Submit card prompts an adaptive card message (Input text) with Name, Email, and Medication name.

    5. The Live Chat card communicates to the customer that they're being directed to a live agent.

    6. The Confirmation card repeats any information gathered from the submission and thanks the customer.

    7. The Escalate card triggers an escalate to live agent message on Dynamics 365 Omnichannel for Customer Service.

  2. Design another Health Bot Scenario called MCH_PatientServiceWelcome. This scenario holds the starting statement that will allow the user to invoke the MCH_PatientService scenario.

  3. Set the Automatic Welcome Scenario to be the MCH_PatientServiceWelcome custom scenario you create. This will begin the scenario when a user first interacts with the Health Bot.

Task 1: Create the MCH_PatientService scenario

In this task, you'll create the MCH_PatientService bot scenario using the designer canvas.

Navigate back to the Azure Health Bot instance homepage where you set the bot settings. This is the portal management link you copied from the Azure portal.

Screenshot of the Azure Health Bot welcome page again.

  1. Select to expand the side navigation bar. Navigate to Scenario > Manage.

    Screenshot of the Scenarios menu on the side navigation bar with the Manage option selected.

  2. Select the New button on the top ribbon.

    Screenshot of the Azure Health Bot homepage with the New option selected in the horizontal navigation bar.

  3. Provide the following details for the new health bot scenario:

    1. Name: MCH_PatientService

    2. Scenario ID: MCH_PatientService

    Screenshot of the New Scenario screen with the Name and Scenario ID populated with MCH PatientService.

  4. Now let's design the scenario conversation. It should navigate you directly to the designer. If not, select the MCH_PatientService scenario in Scenarios > Manage to edit.

    Screenshot of the Azure Manage design page.

Step 1: Add bot introduction statement

  1. Add a beginning statement to the scenario by selecting the Statement icon and dragging it onto the editor.

    Screenshot of the Prompt, Yes, No and Statement icons.

  2. Enter the Display Text:

    Hi there, I'm your Healthcare Assistant.

  3. Select the pencil next to Statement in the top bar and change the Title to Intro. Select OK.

    Screenshot of the Intro dialogue box with "Hi there, Im your Healthcare Assistant." populated in the Display Text box.

  4. Select OK. You'll see the Intro statement added to the designer canvas. Double-click to edit it.

    Screenshot of the designer canvas with the Intro statement added.

Step 2: Add statement for medication request or live agent

This section prompts two buttons, Medication Refill and Live Agent. When a user selects any one of the buttons, it sets the appropriate text to the variable MedicationOrAgent.

  1. Select the Prompt icon and drag it down onto the canvas.

    Screenshot of the Prompt, Yes, No and Statement icons.

  2. Enter the following details:

    1. Display Text: Would you like to request a medication refill or chat with a live agent?

    2. Variable name: MedicationOrAgent

    3. Data type: string

    4. Rename title to MedOrAgent.

  3. Select the Cards button.

    Screenshot of the Intro dialogue box retitled as Medication Request with the Cards and OK buttons highlighted.

  4. Select Add Card.

    Screenshot of the Cards screen with the Add Card and OK buttons highlighted.

  5. Set Card Type to HeroCard. Leave the title blank as we already prompted with the display text.

  6. Select the Add Action button twice to add two actions:

    1. For the first action, select the following values:

      1. Action type: imBack

      2. Action value: MedicationRefill

      3. Action title: "Medication Refill"

    2. For the second action, fill in the following values:

      1. Action type: imBack

      2. Action value: LiveAgent

      3. Action title: "Live Agent"

    Screenshot of the Card screen with Medication Refill and Live Agent actions included.

  7. Select OK three times to get back to designer.

    Screenshot of the Cards screen with vertical entered in the Layout field.

    Screenshot of the Medical Request page with OK button selected.

  8. Connect Intro and MedOrAgent boxes. Select the bottom circle on Intro and drag it to the top circle on the new prompt. An arrow automatically appears when you try to connect the Intro and MedOrAgent boxes.

    Screenshot of the Intro and Medication statements connected.

  9. Select Save.

  10. Select Run to see the output in the Web Chat on the right.

    screenshot of the horizontal navigation bar with the Run option selected.

    Screenshot of the Web Chat Bot window with Medical Refill or Live Agent options.

Step 3: Add MedicationOrAgent Decision Branch

This section checks whether the user has selected Medication Refill or Live Agent with the help of the variable MedicationOrAgent. It will redirect the message according to the selection.

  1. Add a Branch to the designer canvas.

    Screenshot of the Prompt, Yes, No, Statement and Branch options.

  2. Enter the following expression in the javascript Boolean expression box:

    scenario.MedicationOrAgent === "MedicationRefill"

  3. Rename to IsMedRefill. Select OK.

    Screenshot of the Medication or Agent JavaScript Boolean Expression populated with OK button selected.

  4. Select and drag the bottom circle of the MedOrAgent prompt to the top circle of the IsMedRefill branch decision to connect them.

    Screenshot of the Intro, Medication, and Medication decision branches connected.

Step 4: Prompt user to enter data for medication refill option

  1. Add a Prompt element. This will be used to display the Form data (using Adaptive Card) to capture Patient name, email, and phone to create an appointment.

    Screenshot of the Prompt, Yes, No and Statement options with Prompt menu selected.

  2. Add the following details:

    1. Variable name: formData

    2. Variable Data Type: Object

    3. Title: Submit

    4. Don't add display text since the adaptive card will display instead.

    Screenshot of the Prompt screen retitled as Submit.

  3. Select the Cards button > Add Card > Adaptive Card.

  4. Refer to the lab resources file AdaptiveCardForMedicationRefill.txt and copy the JSON content and paste it in the JSON section of your card.

    Note

    Visit the Adaptive Card visualizer to test your own authored card.

    Screenshot of the Adaptive Card populated with Adaptive Card for Medication refill text.

  5. Select OK three times to get back to the designer.

  6. Connect the Yes condition of the IsMedRefill branch to the Submit prompt.

    Screenshot of the Intro, Medication, Medication Decision and Submit branches connected.

  7. Save and run your current scenario. If you don't save the scenario first, it won't run with updates since the last save. If you haven't saved at all, it won't recognize any conversation.

  8. You should see the below adaptive card output in the Web Chat when running the conversation and selecting Medication Refill when prompted.

Screenshot of the Tell us about yourself Web Chat window.

Step 5: Add a confirmation statement

  1. Add a Statement element.

    Screenshot of the Prompt, Yes, No and Statement Prompt elements.

  2. Set Display text to the following:

    scenario.formData.myName + " - Thanks for providing the information, we have created a Medication Request for you regarding the following medication: " + scenario.formData.myMedReq

  3. Rename the statement to Confirmation.

    Screenshot of Confirmation Display text with the OK button selected.

  4. Connect the Submit element to the Confirmation element on the designer canvas.

    Screenshot of Intro, Medication, Medication decision, Submit and Confirmation branches.

  5. Select Save and Run to see your scenario in the web chat. Select Refill Medication in the authored card.

  6. Fill in information for the request and select Submit to see the confirmation text.

    Screenshot of the Web Chat Tell us about yourself window with Name, email and Medication Requested fields populated.

    Screenshot of the Web Chat window with Submit button selected.

Step 6: Invoke live agent action

  1. Add a Statement element to the canvas.

    Screenshot of the Live Chat dialogue box with entered Display text.

  2. Enter Display Text: Please wait, I am transferring your request to a live agent for further assistance.

  3. Rename the statement to Live Chat.

    Screenshot of the Live Chat screen with the following display text: Please wait, I am transferring your request to a live agent for further assistance.

  4. Select OK to return to the designer page.

  5. Connect the No decision of the IsMedRefill branch to the Live Chat statement.

    Screenshot of the Intro, Medication, Medication Decision, Live Chat, Submit and Confirmation branches connected.

Step 7: Add action to invoke escalation

  1. Add an Action element to the canvas, used to trigger an escalation to Omnichannel Live Agent.

    Screenshot of the Action element navigation bar.

  2. Add the following code to the action, which will trigger the live agent chat:

    session.sendChannelData('Escalating...', {
      "tags": JSON.stringify({type: "Escalate", context: {"EscalateToAgent": 1}})
    });
    
  3. Name the action Escalate. Select OK to return to the designer page.

    Screenshot of the Escalate to Agent designer page.

  4. Connect the Live Chat statement to the new Escalate action.

    Screenshot of the Escalate To branch connected to the Live Chat branch.

  5. You've completed the final connection! Here is your full scenario:

    Screenshot of the MCH Patient Service full scenario with all branches connected.

  6. Save and Run your scenario to see the full scenario output.

  7. Select Live Agent in the authored card to show the escalation action.

    Screenshot of the Web Chat Live Agent transfer bot escalation action.

  8. Exit the MCH_PatientService scenario editor. Make sure you save before confirming to exit.

    Screenshot of the navigation bar with the Exit option highlighted.

Congratulations! You created a custom scenario to allow the patient to refill a medication or escalate to a live agent.

Task 2: Create MCH_PatientServiceWelcome scenario

In this task, we'll create another bot scenario called MCH_PatientServiceWelcome to invoke the MCH_PatientService scenario.

  1. On the Azure Health Bot scenarios page, select New to create another new scenario

    Screenshot of the Scenario Management screen with the New option selected.

  2. Provide the following details for the new scenario:

    1. Name: MCH_PatientServiceWelcome

    2. Scenario ID: MCH_PatientServiceWelcome

  3. Select Create.

    Screenshot of New Scenario details including Name, Description, Scenario ID, Returning Message and Interrupting scenario fields.

  4. On the scenario editor designer, add a Statement element.

    Screenshot of the Prompt, Yes, No and Statement options again.

  5. Rename the statement Welcome. Don't add any Display text as we'll show it in the card instead.

    Screenshot of the Welcome messaging window with no display text.

  6. Select Cards.

    Screenshot of the Welcome display text window with the Cards button selected.

  7. Select Add Card.

    Screenshot of the Cards window with Add Card and OK buttons selected.

  8. Choose HeroCard

  9. Set Title to Welcome to Lamna Healthcare Patient Service Portal.

    Screenshot of the Card window with HeroCard entered as Card Type and title Welcome to Lamna Healthcare Service Portal.

  10. Select Add Action and provide the following details:

    1. Action type: imBack

    2. Action value: "begin MCH_PatientService"

    3. Action title: "Lamna Healthcare Support"

    Screenshot of the Card window with Action type, Action value and Action title fields completed.

  11. Select OK three times and view your completed scenario. This will be used to kick off the conversation and allow the other MCH_PatientService scenario to be invoked through the authored card.

    Screenshot of the Azure Health Bot design page with the Intro prompt highlighted.

  12. Save and Run to test your bot scenario MCH_PatientServiceWelcome in the Web Chat.

    Screenshot of the Welcome to Lamna Healthcare Patient Service Portal Web Chat welcome screen.

  13. Exit the scenario designer.

Congratulations! You created a welcome scenario that will kick off the MCH_PatientService scenario.

Task 3: Configure welcome scenario to be automatic

In this task, we'll set the MCH_PatientServiceWelcome to be the Automatic Welcome Scenario in settings. This will always trigger the scenario when a user starts a conversion with the Health Bot from the portal.

  1. Navigate to Configuration > Conversation.

    Screenshot of the Configuration menu with the Conversation menu option selected.

  2. In the Interactions tab, scroll down to the Automatic Welcome section.

    Screenshot of the Azure Health Bot Interactions tab details.

  3. In the Automatic welcome scenario dropdown, select the MCH_ PatientServiceWelcome scenario.

    Screenshot of the Automatic welcome scenario page welcome message field and Automatic welcome scenario dropdown option.

Congratulations! You have successfully set the MCH_PatientServiceWelcome scenario as the default scenario that kicks off when a user interacts with the Health Bot.

Task 4: Test health bot escalation from Power Apps Portal to Dynamics 365 Omnichannel

In this task, you'll test the escalation experience from Power Apps portal to a live agent in Omnichannel.

  1. Navigate to Power Apps and select to open Lamna Healthcare Patient Portal.

    Screenshot of the Power Apps Portal apps menu with Lamna Healthcare Patient Portal highlighted.

  2. You should see the Azure Health Bot Let's Chat button in the lower right-hand corner of the screen. This means the chat widget was successfully embedded into the Customer Self-service portal.

    Screenshot of the Customer Self-Service portal with the Let's Chat button in the lower right corner.

  3. When you select the chat widget, the bot will trigger the welcome scenario message we created and set as the default welcome message, MCH_PatientServiceWelcome.

    Screenshot of the chat widget welcome scenario message.

  4. Navigate back to Power Apps and open Customer Service Workspace.

    Screenshot of the Power Apps menu with the Customer Service workspace option selected.

    Note

    Escalation into the Customer Service workspace will work only when you see that the presence status is enabled. There should be a splash loading screen that goes through multiple steps and then displays the status indicator as available once it's loaded. Status is enabled when it shows a checkmark in a green circle.

    Screenshot of the Customer Service Agent Dashboard with the Presence status highlighted.

    The splash screen looks like the following screenshot. Refresh the page if you don't see the splash screen.

    Screenshot of the splash screen message connecting to Omnichannel for Customer Service.

  5. In the Health Bot dialog in the Patient Portal, select Lamna Healthcare Support button, then the Live Agent button to witness the escalation into Omnichannel to chat with a live agent (your user!)

    Screenshot of the Let's Chat dialogue window with Medication Refill and Live Agent options.

  6. Navigate back to Omnichannel for Customer Service. Your user, as the Live Agent, should receive an incoming notification with Accept and Reject options for the chat.

  7. Select Accept to connect and chat with the customer, or in this case, the patient.

    Screenshot of the Chat request window displaying the Accept and Reject buttons.(../media/134-accept.png)

  8. As soon as a Live Chat Agent accepts the incoming chat notification, Omnichannel for Customer Service opens a Live Chat Widget where the agent can see the entire bot conversation with the user and continue to chat with them.

    Screenshot of the Live Chat customer conversation in the Dynamics 365 Customer Service workspace.

Congratulations! You've successfully tested the escalation scenario from the patient using a Health Bot in the Power Apps Portal to a Live Agent in Omnichannel for Customer Service.