Embed Azure AI Health Bot in the Power Apps portal

  • 4 minutes

In this exercise, you embed the Omnichannel Chat Widget into the Power Apps Customer self-service portal by using the Portal Management configuration. In your environment, you created a Lamna Healthcare Company portal by using the Customer self-service portal template before deploying Microsoft Cloud for Healthcare. Now, you set up the chat widget to show on the customer website.

  • Customer self-service portal - Enables customers to access self-service knowledge and support resources, view the progress of their cases, and provide feedback.

  • Portal Management - Application to help you get started with the advanced portal configuration. In this exercise, you learn how to set up the chat widget in the Portal Management app.

To complete the exercise, follow these steps:

  1. In Power Apps, open the Portal Management app by selecting the play button.

  2. In the left navigation pane, select Content Snippets. Enter chat in the search box and then press the Enter key. Two Chat Widget Code records are visible in the list as highlighted in this screenshot.

    Screenshot of the Content Snippets section on the left navigation menu and chat entered in the search box.

  3. Select and edit each Chat Widget Code record, one at a time, to modify the Value contents with the chat widget code snippet that you previously saved. You can find the snippet in the Chat Workstream in the Customer Service admin center again if needed.

    Screenshot of the Customer Service admin center workstream with the content snippet code to copy.

  4. In each Chat Widget Code record, select Value (HTML) > HTML and then paste the chat widget code snippet that you previously copied and saved. The Health Bot that you created is embedded in the Customer self-service portal and the Healthcare Patient Portal templates, whichever your portal website is currently set to show. Select Save & Close.

    Screenshot of the Chat Widget HTML code snippet on the General tab for the Customer self-service website.

  5. Repeat the same step for both chat widgets so that it shows on both website templates: the Healthcare Patient Portal and the one that's associated with your current Customer self-service template.

    Screenshot of the Chat Widget HTML code snippet on the General tab for the Healthcare Patient Portal.

  6. Test to ensure that the chat widgets are properly embedded. Go to Power Pages in a new tab and select and open the Lamna Healthcare company environment. Then select Preview > Desktop to open Lamna Healthcare Patient portal.

  7. The Azure AI Health Bot displays the Let's Chat button in the lower-right corner of the screen. The chat widgets are 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.

  8. Test that the bot is properly connected. Go to your Health Bot management portal that you created from Azure portal. Select Configuration > Conversation on the navigation pane. Scroll down to the Automatic welcome section and enter a greeting for the portal user: Hello! This is a test. Select Save on the command bar.

    Screenshot of the Automatic welcome message text box in the Conversation Configuration section of the Health Bot menu.

  9. Return to the Lamna Healthcare Patient Portal with the Customer self-service template. Refresh the page and select the Let's Chat widget, and the welcome message greets you in the chat.

    Screenshot of the Customer self-service portal with the Health Bot welcome message displaying in the Let's Chat widget.

In this exercise, you successfully updated the chat widget in the Power Apps portal content snippets. With this configuration, the Health Bot is visible on the Power Apps portal for the Customer self-service template and the Healthcare Patient Portal template.