In this post, we’ll show you how to connect your Power Virtual Agents bot to a canvas app so that users can interact with the bot directly from within your app.  

The three ingredients needed for this recipe are: 

1. A bot 
2. A canvas app 
3. An Iframe to hold them together 

Preconfiguration Steps 

1. A bot has been created 
2. A solution with an IFrame exists
     
3. Within the canvas app, click Imports components and select IframeCPF, as shown below:
   
   
4. Iframe PCF is now displayed under components and ready to use 
   

Implementation Steps 

1. Create a canvas app with a homeScreen
   
2. Insert Iframe under Code components, as shown below:
   
   
3. Now let’s move to the bot (already created and tested). In Power Apps, select Chatbots > List. Select desired bot and click Edit.
   
4. Select Chatbots > Open chatbot
   
5. Click on Settings > Channels > Mobile app
    
6. Under Embed code, copy the ‘src’ section only (highlighted below): 
   
7. Now, let’s move back to the canvas app. Select Iframe component within the Tree View 
   • Notice the CONTROLS  frame on the right of the editor and click on Advanced Tab 
   • Under DATA > src, paste the URL from the bot copied in Step 6 above
     
8. It should look something like this (based on your design) 
   
9. Click on Preview the app and run your bot to validate functionality.  You can also publish your app and play it just like you would any other canvas app.
   

Microsoft Documentation: https://learn.microsoft.com/en-us/power-apps/maker/portals/add-iframe