Skip to content
Kunal Kankariya
  • Home
  • About
Search

Home » How To Publish Power Virtual Agent Bot to a custom website

power virtual agent

How To Publish Power Virtual Agent Bot to a custom website

1 Comment / Power Virtual Agent / August 13, 2020 September 15, 2020

This is the third part of the three-part series of my blog where I detail the steps to build a Power Virtual Agent bot and use a Power Automate flow to extend the abilities of the bot. In this part we will look at the details about how to publish Power Virtual Agent bot to a custom website.

  • Part 1 : Build a simple Power Virtual Agent bot
  • Part 2 : Integrate Power Automate with the Power Virtual Agent bot
  • Part 3 : Publish Power Virtual Agent bot to a custom website

We will publish the bot was developed as a part of our exercise in part 1 and part 2 of this series to a custom WordPress website.

There are two options present :  

Publish power virtual agent bot to a custom website using the iFrame option present in the publish to custom website option. This doesn’t give you the flexibility to customize the chat canvas.

Second option is to use JavaScript (based on Bot Famework Webchat) to embed the bot to your website. This method uses the Bot Framework Direct Line Channel to connect the bot the website. We will use this option here to publish our bot to a custom WordPress website.

Regardless of which option you use, You will have to first Publish your bot.

Go to the Publish section of the portal and click on the Publish button.

publish power virtual agent bot

In your WordPress website, you can either edit the theme file or use a plugin to insert scripts to all pages of your website. I have used a plugin to add the following script / html to the website.

 <div id="webchat" role="main"></div> 

The div ‘webchat’ is the placeholder for the canvas that will be rendered by the following JS

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT ID below 
        var BOT_ID = "<ENTER YOUR BOT ID>"; 
        var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script> 

Replace the ‘Bot ID’ with your bot’s Id that you can obtain from the Power Virtual Agent portal. Navigate to Channels. Select a channel like “Skype”. Copy the Bot ID that was displayed.

The code above uses the bot id to get a direct line token for the conversation. 

Note : In a production setup, this token should ideally be obtained in a secure manner by implementing web channel security.

You can use the JavaScript styleOptions options in the code above to configure a number of pre-defined styles. (Most of them are self-explanatory)

Some settings that you can consider are :

        { 
          botAvatarImage:"<url to the image for your bot's avatar",
          userAvatarInitials: "ME",
          userAvatarBackgroundColor: "Grey",
          bubbleBackground: "#BFFBCF",
          bubbleFromUserBackground: "#FEF8D4",
          bubbleBorderRadius: 15,
          bubbleFromUserBorderRadius: 15,
          bubbleFromUserBorderColor: "#FEF8D4",
          bubbleBorderColor: "#BFFBCF",
          bubbleNubSize: 10,
          bubbleFromUserNubSize: 10,
          bubbleFromUserNubOffset: "top",
          bubbleNubOffset: "top",
          suggestedActionLayout: "stacked",
          suggestedActionBorderRadius: 10
        } 

The defaultStyleOptions.js file contains the full list of all settings that you can modify.

The bot that I have published on this site is a Power Virtual agent bot published using the same option as explained in this blog post. Feel free to play around with this until my PVA trial version gets expired 😉

close

Oh hi there! 👋
It’s nice to meet you.

Subscribe to receive awesome content in your inbox, every week.

I don’t spam! Read my privacy policy for more info.

Thank you! Check your inbox or spam folder to confirm your subscription.

Spread the love

Related Posts:

  • Power Virtual Agent - Build and publish bot to your website
    Power Virtual Agent - Build and publish bot to your website
  • How to trigger a Power Automate flow from a Power Virtual Agent bot
    How to trigger a Power Automate flow from a Power Virtual…
  • Connect to a Secure Web API Using Power Apps Custom Connector - Part 1
    Connect to a Secure Web API Using Power Apps Custom…
  • Connect To A Secure Web API Using Power Apps Custom Connector – Part 2
    Connect To A Secure Web API Using Power Apps Custom…
  • Community plan - Power Apps
    Community plan - Power Apps
  • Power Apps - Group vs Container Control
    Power Apps - Group vs Container Control

Post navigation

← Previous Post
Next Post →

1 thought on “How To Publish Power Virtual Agent Bot to a custom website”

  1. Mustafa
    February 25, 2022 at 5:02 pm

    How do you get it to stick to the bottom corner of the page and in front of the other website elements like we see most chatbots are placed on websites.

    Reply

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Connect

Categories

  • .Net (2)
  • Authentication (2)
  • Azure Logic Apps (1)
  • Information Governance (1)
  • Information Protection (3)
  • Microsoft Teams (1)
  • msal (2)
  • Power Apps (6)
  • Power Automate (1)
  • Power Virtual Agent (3)
  • SharePoint (5)

Tag Cloud

AAD ALM Azure Azure App Azure DevOps Azure Logic Apps Bot browserautherror Build Tools canvas app CDS Computer Vision container controls Custom Connector Excel group Information governance Information protection Lists m365 microsoft 365 Microsoft Information Protection MIP msal msal-broswer MS Teams oAuth Office 365 Plans Power Apps PowerApps Power Automate Power Platform Power Virtual Agent Pricing PVA Secure security & compliance Sensitivity Labels SharePoint Spfx Web API webinar webparts
Copyright © 2023 Kunal Kankariya
  • Privacy Policy
  • Home
  • About