Add an MS Power Virtual Agent to a Canvas App in Power Apps with PCF

In this #PowerShot, I will show you how to add an MS Power Virtual Agent to a Canvas app in Power Apps by creating a #PCF control. We will create a PCF control to support adding an "iframe" to a canvas app. Using this PCF control, we will provide the bot URL from MS Power Virtual Agents and embed the bot into the canvas app.

Currently canvas apps do not support adding iframes to the app and we will use PCF to address this issue and enable adding iframes to canvas apps by developing a control. A power virtual agent can be added as an iframe component to any external applications and we will enable that functionality for a canvas app.

Let's Get Started!

Step 1: In this step, we will look at creating the component. Follow the steps here to create a generic component structure of type field. Once the setup is complete, certain parts of the index.ts and ControlManifest.Input.xml files need to be modified. The same have been updated and present on the GitHub repository as mentioned below.

The source code for this component is on this GitHub repository here.

Note: For canvas app, only field type component is supported. Source

The next task is to configure components for canvas apps. This can be done in three easy steps and those have been listed out here.

After following the steps 2, 3, 4 follow the step below to implement the iframe component on the canvas app.

Step 5: Provide the "src" field string to display/ embed the content for this iframe component. (could be a web page section, html, twitter feed etc. )

---

Implementation

In this section let's implement the above created component on the canvas app. We will implement the iframe component on a canvas app screen and provide the url of the power virtual agent to the "src" field to embed the bot on the app screen.

1. Is the component added to the screen.

2. Is the custom property that holds the source (src) value for the iframe.

---

Setup in Action

---

In this article we saw how to embed a power virtual agent (bot) in a canvas app in Power Apps using PCF. We created an iframe PCF that basically enables a functionality to add an iframe to a canvas app. This way, we can embed almost anything that can be added as an iframe to an external application/ source.

To get started with MS Power Virtual Agents, start here.

I hope you found this interesting and it helped you!