Bot Framework v4 SPFX Web Part Released
The Background
So I had this idea already a couple of months to release or better open-source a SharePoint Framework WebPart which is capable of bringing your Bot Framework conversations (= your bot) to SharePoint (Online). Now I finally had the chance of publishing my webpart to the official SPFx samples GitHub repo to make it available for everyone. So if you want to try it out and integrate it into your SharePoint tenant, just clone the repo, and follow the instructions mentioned here and you should be able to get it up and running in a couple of minutes.
The WebPart
So as this is a SPFx webpart, you can integrate it quite easily on every modern page. After you’ve added it you need to configure the webpart using it’s property pane:
Properties
So the following properties are available to alter the look and feel of your BF4 webchat webpart:
| Name | Description |
|---|---|
| Direct Line Secret | The direct line secret of your bot which you can get from the Azure Portal |
| Background color of webchat | This is the background color of the complete webchat window as a Hex value |
| Bot messages background color | Hex value for the bot messages background color |
| Bot messages foreground color | Hex value for the bot messages foreground color |
| User messages background color | Hex value for the user messages background color |
| User messages foreground color | Hex value for the user messages foreground color |
| Sendbox background color | Hex value for the sendbox background color |
| Sendbox text color | Hex value for the sendbox text color |
| Avatar image used for bot | This is the image which you can use as an icon next to each message coming from the bot |
| Avatar initials used for bot | Instead of using an icon you can also use initials to be displayed next to the bot’s messages |
| Avatar image used for user | This is the image which you can use as an icon next to each message coming from the user (you could also enhance this and get the image from the Microsoft Graph) |
| Avatar initials used for user | nstead of using an icon you can also use initials to be displayed next to the user’s messages |
| Disable upload button | If you like you can enable/disable to upload button to prevent users from uploading documents to the conversation |
So if you add/modify all those values to fit your needs you should be able to have a custom webchat component according to your CI/CD guidelines right in your SharePoint environment. The most crucial part of that is the Direct Line Secret, as this is used to establish the connection between your webpart and your bot - so make sure you use the right one.
And I also have an idea for the enhancement of that, to show this on every page in a sitecollection or even hub site, so stay tuned for more to come:
Finally, if you wanto to enhance the webpart, it’s open source, so just fork the repo and adapt it and the make a PR from this repo here … Happy using!