Adding a Power Virtual Agent to a Power Apps Portal

There were a lot of cool announcements at Microsoft Ignite this past week. Notably was the official renaming of Microsoft Flow to Power Automate, PowerApps becoming Power (wait for it) Apps (with a space) and the introduction of UI flows and Power Virtual Agents.

Power Virtual Agents are actually another Dynamics 365 feature (Dynamics 365 Customer Service Virtual Agent) that has been broken away from Dynamics 365 first party apps and being offered as part of vanilla CDS environments. If you are a regular reader of this blog you will know that Power Apps Portals (notice the space) was another feature lifted from Dynamics 365.

It’s that time for renaming Microsoft Business Applications!

When you create your virtual agent a.k.a a “Bot”, you can deploy it to a test website or you are given an embed code for your own website. So naturally, being a Power Platform professional, the first instinct is the try to get the Virtual Agent running on a Power Apps Portal.

The first thing you need to do is sign up for the Power Virtual Agent preview here:

https://powervirtualagents.microsoft.com/en-us/

You will need to have an existing Power Platform tenant with an environment in a location that will support the Power Virtual Agent preview (Not Canada?)

Once you have the Power Virtual Agent Preview running, create a new bot. I won’t go into great detail here as there is very good instructions on the Power Virtual Agent site and other places.

Create bot

When you bot is created and you have added streams of intelligent conversations, the next step is to activate and deploy the bot.

While you can check it out on a demo website, you can also deploy it on your own website, which could be a Power App Portal!

Choose custom website

Power Virtual Agent will provide an embed code. Copy the code and save it to something like NotePad (not yet renamed Power Note Pad, hmm was that NDA?)

Copy embed code

The next step will be to deploy it to a page or section on your Power Apps Portal. If you have not deployed a portal, you can easily add one to a Power Platform environment (ideally, a test or non-production). Check one of my earlier blog posts for some details on how to deploy a Power Apps Portal.

Use the Portals studio to edit one of the pages. For my example, I modified the Contoso home page.

Select a column section and clear out the existing content (an image and some text). It should then be completely blank. If you don’t want to throw anything out, then you could create a new section as well.

Clear out an existing section

We are now going to get a bit into code. Yes, I realize that Power Apps and Power Virtual Agents are supposed to be “no code” but every so often we will need to get our hands a bit dirty.

Click on the bottom right hand corner on the <> symbols to open the Web Template code editor.

Look through the code until you find the blank column <div class> where we cleaned out the content.

Locate blank section

The next step is paste in the Power Virtual Agent embed code we copied between the <div> tags.

The code will look something like this:

<div class="col-md-4 columnBlockLayout" style="display: flex; flex-direction: column;"><iframe frameborder="0" src="https://va.ai.dynamics.com/webchat/bots/xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" style="width: 100%; height: 100%;"></iframe></div>
Insert code

The final step is to save the changes to the Web template and then browse the portal. If the code is pasted correctly, you should see a running bot on your Power Apps Portal!

Power Apps Virtual Agent on Power Apps Portal!

At this point I didn’t add any specific actions or steps to my virtual agent to redirect the user to different pages or write data back to CDS… (oh, just had a few crazy ideas there).

This also did not take me a lot of time to get this working. This really is an interesting example of how the various features of the Power Platform work together and how easy it is to build solutions that even a year ago would have taken days, if not weeks of development time to get similar results.

What are some of your ideas with using Power Virtual Agents and Power Apps Portals?

Cover Photo by Elena Koycheva on Unsplash
Name tag Photo by Jon Tyson on Unsplash

Nick Doelman is a Microsoft Most Valuable Professional (MVP) in Business Applications. Nick is passionate about the Power Platform, Power Apps, Power Apps Portals and Power Lifting, and is training for a 500lb Deadlift in 2020. Follow Nick on twitter @readyxrm

One thought on “Adding a Power Virtual Agent to a Power Apps Portal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s