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.
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:
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.
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!
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?)
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.
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.
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>
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!
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?
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