cancel
Showing results for 
Search instead for 
Did you mean: 
renatoromao

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

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
      bot-header.png
    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 

 

Comments
Resolver I

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

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

 

Great job!

~ lah

Thanks, @lahddah  and @nmk ! 🙂

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.

@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?

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.

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

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

 

Do you have any ideas why?

Thankyou so much sir,

@renatoromao 

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

boterror.jpgT ID?

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.

botid.png

Let me know how it goes.

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

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

Screenshot 2023-04-11 120919.png

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

@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

apierror.png

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

Why i cant see anyone reply here 😞

@PowerUser84  Unfortunately I was Unable to solve this issue. 

 

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

Hi @PowerUser84 ,

 

Found the resolution for that.

I will deploy the solution today and keep you posted.

 

Sorry for that!

 

@renatoromao : waiting for your kind response.

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

Change end point to this: 

 
 
 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.

Thank you @SalahEddine42 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?

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