In this blog, we will learn to embed a Power Virtual Agents bot in Canvas App.

Requirement:

Adding Power Virtual Agents chatbot into Canvas App, Power Virtual Agents bot can handle multiple conversations simultaneously, which means it can scale up to meet increased demand without requiring additional resources.

Implementation:

Firstly, we need a bot, to create a bot follow these steps.

• Go to https://make.powerapps.com.
• Sign into power apps.
• Click on the “Power Platform” from the left navigation panel.
• Select “Power Virtual Agents.”
• You can use the old chatbot also.

• Click on “Create“, then select “Try the unified canvas (preview).”

• Give a title to your chatbot.
• Click on “Create” button.

After creating a bot, we need to enable the Power Apps component framework feature.

• Go to the Power Apps portal.
• Click on the gear icon on top right corner and select “Admin Center.”

• On the left pane, select “Environments”, select the environment where you want to enable this feature, and then select “Settings.”

• Expand “Product” and select “Features.”

• Turn on “Power Apps component framework for canvas apps,” then select “Save.”

Now we need a solution that consists of “IFrame” exists.

• IFrame will hold Canvas App and bot together.

• If you don’t have an IFrame solution, refer to the link below for downloading the solution.{https://github.com/yashag2255/iframePCF/blob/master/IFrameSolution_1_0_0_1_managed.zip}

Now create a Canvas App or open the existing one.

• Click on the “Tree view” from the left pane.
• Now go to the “Components” and click on three dots.
• Select “Import components.”

• Click on “Code.”
• Select “IFramePCF” component.
• Click on “Import.”

• IFramePCF is now displayed under components.

Now add a new screen where you want to put a Chat bot.

• Click on “insert.”
• Select “IframePCF” from the code components.

Now, Go to the “Chatbots” in Power Apps portal.

• Select your Chatbot.
• And select “Edit.”

• Go to the “Setting” in the left pane.
• Select “Channels”
• Now select “Mobile App.”

• Under Embed code, copy the ‘src’ section only (highlighted below): 

• Now, Go back to the Canvas App.
• Select “IFramePCF” component from tree view.
• And click on “Advance.”
• Paste the URL from the bot copied in the “src.”

• Save and publish.

Output: Chatbot is now uploaded on Canvas apps.

Hope it helps! 

Power 365ing as usual! 

Any requirements, implementation or consulting work in Power Platform or Dynamics 365 – end user, Microsoft partner or an individual? 

Problem Area – Technical, Functional, Training, Development or consulting? 

Me and my team are here to assist, please fill the following form for your business needs: Click here