Build Chatbots for SharePoint using Power Virtual Agents & SPFx

advertisement

PVA is a new service from Microsoft that just came out of public preview in mid 2020. It allows users to easily build powerful and complex chatbots using a no-code user interface. If used together with SharePoint, it empowers companies to easily build chatbots for their company intranets that can answer employees’ frequently asked questions, find people or documents and more.

This post is a step by step guide on how you can build a chatbot using PVA and host it on SharePoint using SPFx extensions.

1. Creating a bot on PVA & obtain bot ID

Head over to the PVA Portal and follow the on-screen step-by-step instructions to create your PVA bot. In here, you will be able to choose what language you want your bot to understand. Currently, you can only have 1 language per bot.

1. How Chatbots and Email Marketing Integration Can Help Your Business

2. Why Chatbots could be the next big thing for SMEs

3. My Journey into Conversation Design

4. Practical NLP for language learning

Create new bot popup on PVA

From the left panel, select “Manage > Channels” and then select “Custom Website”. Copy the Bot ID and paste it somewhere, we will need it later.

2. Create SPFx extension

We will need to create a SPFx extension in order to host our PVA bot on SharePoint. SPFx extension allows us to deploy our bot to all pages in a single site. If you just want to create a bot in a single page, you can use SPFx web parts instead.

To create a SPFx extension, open your command line and in the folder that you want to create your SPFx extension, run the command below and key in the following values. Feel free to change the name and description to something to your liking.

yo @microsoft/sharepoint

What is your solution name? pva-chatbot
Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
Where do you want to place the files? Use the current folder
Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
Which type of client-side component to create? Extension
Which type of client-side extension to create? Application Customizer
What is your Application Customizer name? PVAChatbot
What is your Application Customizer description? PVAChatbot description

Make sure you are on Node.js v10.x, see the SPFx Extension Getting Started Guide if you are stuck.

3. Modify SPFx Extension to host PVA Bot

Install Bot Framework Web Chat using the command below:

npm install botframework-webchat

Create a “Chatbot.tsx” file in “src/extensions/<project_name>” and paste the following code into the file. Make sure you change the BOT_ID variable on line 25.

Chatbot.tsx file

Head over to “<project_name>ApplicationCustomizer.ts” file, and paste the code below. This will create a Bottom Placeholder across all your pages in the SharePoint site and within the placeholder, it will render the Chatbot Component that we just created.

PvaChatbotApplicationCustomizer.ts configurations

4. Serving & testing locally on SharePoint

Head over to “config/serve.json” and change the pageUrl to your own SharePoint site url.

serve.json configurations

Run the command below to serve locally and test

gulp serve

Screenshot of PVA Chatbot in Demo SharePoint site

If you see “Unable to connect” error message in the popup window, it means your BOT_ID is incorrect. Double check your BOT_ID on line 25 of the Chatbot.tsx file.

5. Deploy to SharePoint

Run the following commands to build your SPFx extension

gulp bundle --ship
gulp package-solution --ship

You should see a “.sppkg” file being generated in your “sharepoint/solution” folder. Upload this file to your tenant’s SharePoint App Catalog.

Head over to your SharePoint site that you want to add this Chatbot to. Click on “+ New > App” and then select the newly uploaded extension file and you should see “Open Chatbot” button at bottom of your SharePoint page.

Adding SPFx extension App to SharePoint site

Refer to the official SPFx extension deployment guide if you are stuck.

This is only the first step, from there you can extend more functionality to your PVA chatbot. Link it up to Power Automate and you achieve some pretty complex features, such as searching for documents, finding people in Azure AD or even link up to external API via Power Automate connectors.

Want to customise your bot UI on the extension? Want to build more topics on PVA but not sure how? Have more complex use cases but not sure how to build it? Feel free to reach out!

This content was originally published HERE

advertisement

Be the first to comment on "Build Chatbots for SharePoint using Power Virtual Agents & SPFx"

Leave a comment

Your email address will not be published.


*