How to use Chatbots inside SharePoint pages (no-code) - Power Virtual Agents

[renatoromao]

Hi Community,

In this article, you will able to add Power Virtual Agents chatbots to SharePoint pages without writing any codes.

I developed a component to do a better integration with SharePoint Modern Pages using SharePoint Framework (SPFx).

Description

Component developed to do a better experience for SharePoint users with chatbots inside modern pages.

Technologies

• SharePoint Framework
• FluentUI
• Power Virtual Agents
• React/Typescript

Deploy

1. Download the package - click here
2. Deploy the package to App Catalog - click here
3. Add the web part to your Site collection - click here
4. Add the web part to your Modern page - click here 
5. Edit the web part properties (you will find 4 properties below) - click here
   1. BOT ID: internal parameter provide by Microsoft - click here
   2. BOT Name: name that you want to show inside your Modern page
   3. BOT Logo: an icon that you want to use in the header when you chatbot is open
      
   4. BOT Image: an image that you want to use in the Modern page to user clicks to open the chatbot
      You can see this image that I followed the height and width (max height= 150):
      1. Site -  COVID19 Volunteer - Self4Society (mygov.in)
      2. Image - myGov_Prerna3.png (208×188)
         
         
6. Done!

The demonstration below is just a sample using fake data with Power Virtual Agents and SharePoint.

Video demonstration 

[nmk]

Awesome @renatoromao  - This is going to be useful for many people. Well done!

[lahddah]

Thanks, again, @renatoromao! I've just added it to my pages and all seems good!

Great job!

~ lah

[renatoromao]

Thanks, @lahddah  and @nmk ! 🙂

[neeraja]

Hi,

This is so beautiful and it comes as expected.

I wanted to know how do we achieve Single sign on authentication If we add bot using the above solution.

[ENjoroge]

@renatoromao Great article and easy to follow.

A question: Does the bot get the content from SharePoint? If so,how do you make that happen?

[Teresa24486]

Hi,

My page is a classic sharepoint site and I already have build my bot using PVA. All i need to do is place this bot as a mascot on the footer of the homepage.

[Vijayd6363]

Hello Renato Can you please upload the Source Code for the above solution in the git for reference

[c_v_bargen]

Hi @renatoromao I got this error message "Invalid SharePoint App package. Error: File contains corrupted data." .

Do you have any ideas why?

[Anonymous]

Thankyou so much sir,

@renatoromao 

[PowerUser84]

 it says unable to connect. please make it clear how to get BO

T ID?

[Teresa24486]

Hi @PowerUser84 ,

Go to your PVA creation panel >> Channels >> Manage >> edit the name of your bot >> go to publish tab >> publish your chatbot,

Now, go to Apps (on the left menu in the Teams) >> Built for your organization >> Find and open your chatbot, the ID will be there.

Let me know how it goes.

[PowerUser84]

Thanks. After providing the BOT app ID, it is still saying unable to connect.

[shatha98]

Hi @renatoromao thanks for the solution, but I get an Unable to connect message; do you know how I can solve this issue? 

[PowerUser84]

Did anyone find solution to unable to connect error. Please reply

[PowerUser84]

@renatoromao A little update if it helps you in solving 

I have developed a custom extension using spfx and getting same error. On f12 i found the below response on calling this URL

[PowerUser84]

Receive same error response if loads the above webpart shared by you.

[PowerUser84]

Why i cant see anyone reply here 😞

[shatha98]

@PowerUser84  Unfortunately I was Unable to solve this issue. 

[PowerUser84]

@renatoromao : Hi, do u have any update for us? need your help to fix please

[renatoromao]

Hi @PowerUser84 ,

Found the resolution for that.

I will deploy the solution today and keep you posted.

Sorry for that!

[PowerUser84]

@renatoromao : waiting for your kind response.

[sujithmthom]

Waiting for your update and if you could solve this and update here, its  really appreciate.

[Anonymous]

Change end point to this: 

 "https://1620e375c827e8bdbca689e32a74f5.f4.environment.api.powerplatform.com/powervirtualagents/botsb...";

 the endpoint can be found in the PVA parameters, go to channels=>Mobile Apps and copy the token end point

you'll now be able to retrieve the token in the code.

[shatha98]

Thank you @Anonymous for the reply, 

I have basic coding knowledge, so I am not sure where to add the endpoint in the code. can you help with that?

[Estanislao]

Hi! This SPFx worked for the classic version of Power virtual agents. For the new version the ID is not recognized. Any solution?
Thank you

[ALP2]

Hi,

So it works for me after few hours.

Here is a workaround. (sorry screenshot are in french)

1. Copy this link form mobile application

2. Onpen edge and F12 or ctlr + shift + I

3. Click on network then fetch/xhr

4. It opens the webchat at the left and at your right you have the devtools

5. Click on webchatsettings

6. Select Response (Answer ?)

7. Now we have the bot ID

8. Open the spfx and paste the bot ID

9. Voilà it's working now

[TAK_Noir]

Awesome package! Thanks for sharing!

[khhaj]

Can I get the current upn or user id from the current user in this integration of Virtual Chatbot in SharePoint? Or does it only works anonymous?