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
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/sharepointWhat 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.
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.
4. Serving & testing locally on SharePoint
Head over to “config/serve.json” and change the pageUrl to your own SharePoint site url.
Run the command below to serve locally and test
gulp serve
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.
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!