Bot Framework v4 SPFX Web Part Released

Table of Contents

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:

Bot Framework SPFx WebPart property pane 1

Bot Framework SPFx WebPart property pane 2

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.

Bot Framework SPFx WebPart

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: Bot Framework SPFx WebPart next gen

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!

Author's picture

Stephan Bisser


AI MVP

AT
All about Conversational AI

Ask my bot anything: