Power Virtual Agent (Chatbot) Integration with Power Apps Portal

The Power Apps portal allows to integrate Power Virtual Agent Chatbot natively by adding from portal components. Chatbot to answer questions automatically posted by a visitor on your Power Apps Portal.

Background

We used to integrate chatbot in our website by getting “Copy or share the code” and using IFrame. This is the only option to integrate it as of now. But, now it’s changing the way we implemented.

And now a new portal component “Chatbot” for the portal

Public Preview (As of 6/11/2021)

  • This is a preview feature.
  • Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

Capabilities

  • Add bot to all pages
  • Add bot to specific pages (UI to select pages) 

1. Create your bot

Before you add a bot to a Power Apps portals page, you must create a bot first. Go to Power Apps to create the bot. Refer Microsoft document here.

2. Add chatbot to Page(s)

  • Edit portal using portals Studio
  • Select Components from the left navigation
  • Select Chatbot component
  • Select your bot

  

By default “Chatbot visibility” is selected to “All pages”. So, when you browse website, you will see selected chatbot appearing in all the portal pages. We can select visibility option to “specific pages” and select the pages where you want to show bot.

 

Browse website to view the bot on the portal.

Try this feature from make.preview.powerapps.com

3. Chatbot in Action

 

4. Advanced Configuration

Chatbot component is rendered using a web template called Power Virtual Agents.

You can change the values for the width, height, headertext and some style inside the “window.PvaEmbeddedWebChat.renderWebChat()” function.

ADVANCED CONFIGURATION
Parameter Value
width Uses variable “chatWidth”. To change width, update the width in pixel:
let chatWidth = "320px";
height Uses variable “chatHeight”. To change height, update the height in pixel:
let chatHeight = "480px";
headerText Title of the bot. By default, uses the bot’s name. To change, add “headerText” parameter with the bot header value:
"headerText": 'Contoso chatbot';
webChatHeaderStyleOptions Determines header style for the chatbot component, such as the color of font, and background. To change, update “webChatHeaderStyleOptions” parameter with the values for “fontColor”, and “backgroundColor” properties:
"webChatHeaderStyleOptions": {"fontColor":'black',"backgroundColor":'white',}

Leave a Reply

Your email address will not be published.