--- title: "SharePoint Framework (SPFx): Microsoft BOT framework integration" description: Intelligent bots are useful for interacting naturally wherever users are talking. Discover how to include Microsoft BOT Framework and use its capabilities with SharePoint using SPFx webpart. Read the blog now to learn how! image: https://www.codesigned.com/hubfs/Screen%20Shot%202019-11-18%20at%204.54.12%20PM.png --- ![Screen Shot 2019-11-18 at 4.54.12 PM](https://www.codesigned.com/hubfs/Screen%20Shot%202019-11-18%20at%204.54.12%20PM.png) ## Download / Source code SPFX web part : [https://github.com/get2pallav/BT/tree/develop ](https://github.com/get2pallav/BT/tree/develop) BOT Code : [https://github.com/get2pallav/BOT_FM ](https://github.com/get2pallav/BOT_FM) ## Introduction The Microsoft Bot Framework provides just what we need to build and connect intelligent bots that interact naturally wherever users are talking, from text/sms to Skype, Slack, Office 365 mail and other popular services. Within the Bot Framework, the Bot Connector service enables our bot to exchange messages with users on channels that are configured in the Bot Framework Portal and the Bot State service enables bot to store and retrieve state data that is related to the conversations that our bot conducts using the Bot Connector.  Here we will explore how to include Microsoft BOT Framework and use its capabilities with SharePoint using SPFx webpart. This will be a simple BOT which will using SharePoint context to fetch user information and interact with the user in natural language.   ## BOT Registration The first step is to register BOT channel with Azure. After login onto Azure portal, create a new resource of type “BOT Channel Registration” and provide all default settings. Follow steps in "[BOT Channel Registration](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0)" for channel registration. For Back channel communication between SPFx web part and BOT we will use "Direct Line". Follow the specific link on how to “[Connect a Bot to Direct Line](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-directline?view=azure-bot-service-3.0)” - App ID: Application ID - App secret: Application secret - Direct Line secret: Used by SPFX web part to communicate with BOT ## SPFx Implementation [Setup SPFx environment](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment) for development, this web part will user current user's context to perform SharePoint search.  Include "context" in BOT component properties ![SharePoint BOT integration](https://www.codesigned.com/hubfs/SharePoint%20.png)   Also include following npm libraries to use Bot framework webchat and sp-pnp-js ![SharePoint NPM libraries](https://www.codesigned.com/hubfs/SharePoint%20NPM.png) More details on botframework-webchat can be found [here](https://github.com/Microsoft/BotFramework-WebChat). BOT component code will be as follows   ![SharePoint BOT component code](https://www.codesigned.com/hubfs/SharePoint%20BOT%20component%20code.png)   Above code with registering using Direct Line to communicate with BOT and pass user basic information using “postActivity” for initial Greeting message. It also subscribes for activities raised by BOT. If activity raised by BOT is of type event and of name “search”, we will perform sp-pnp-js search to get results. These results will be then passed as a simple array to BOT which will present in Hero element format. ## Setup BOT using Node.js  Follow steps to “[Create a bot with the Bot Builder SDK for Node.js ](https://docs.microsoft.com/en-us/azure/bot-service/nodejs/bot-builder-nodejs-quickstart?view=azure-bot-service-3.0) ”. Also install [ngrok.exe ](https://ngrok.com/download) which will be used to expose localhost URL for Azure.  For more information on how to expose localhost URL to Azure BOT registration, check this [link](https://blog.botframework.com/2017/10/19/debug-channel-locally-using-ngrok/). ## BOT Implementation  Our conversation will use BOT's dialog and define conversation steps in waterfall structure. More on BOT dialog/message/activities/Back channel can be found [here](https://docs.microsoft.com/en-us/azure/bot-service/nodejs/bot-builder-nodejs-overview?view=azure-bot-service-3.0). One important concept to understand here is "session address”, it determines where to send back the reply from BOT. In our example, we are using two separate ways of communication: - Session direct message which will prompt the user on Chat window - Back channel communication with SPFx web part using events For a direct messages on Chat window, we keep the address information in “baseAddress” variable which will get populated in starting of a new conversation. ![SharePoint BOT Integration](https://www.codesigned.com/hubfs/Screen%20Shot%202019-11-18%20at%204.54.12%20PM.png) ### BOT code ![SharePoint BOT Code](https://www.codesigned.com/hubfs/SharePoint%20-%20BOT%20Codew.png) ![SharePoint BOT Code Integration](https://www.codesigned.com/hs-fs/hubfs/SharePoint%20BOT%20Code%202.png?width=670&name=SharePoint%20BOT%20Code%202.png) There are three dialog sections in the above code. Entry dialog for BOT is "mainMenu" dialog which will welcome user and 'Search a Document' options. Currently, for demo purpose it has only one option, on selection of "Search a Document" - it will launch "document" dialog. "Document" dialog will fire an event to SPFx web part which will run the search query in user's context and return results to BOT in a simple array object. BOT is also listening for any message which matches 'showresults'. As, after the search, SPFx will return results with a message text as 'showresults' and this BOT will display those results in Hero element. Check the [video](https://social.technet.microsoft.com/wiki/cfs-filesystemfile.ashx/__key/communityserver-wikis-components-files/00-00-00-00-05/8206.1.gif) for overall functionality.   Related Content Explore Resources [Intranet search 101: Getting smart about search](https://www.codesigned.com/blog/intranet-search-101) Your end-users expect a stellar search experience. They've learned to love search on sites like Google, Bing, Amazon, and Zillow. Unfortunately, ... [Jordan Weaver](https://www.codesigned.com/blog/author/jordan-weaver) Nov 19 [Your Intranet Needs a Reboot Now More Than Ever](https://www.codesigned.com/blog/your-intranet-needs-a-reboot-now-more-than-ever) A decade ago, remote working was rare. Many organizations believed that remote workers were harder to manage, less effective, and too easily ... [Jake Weaver](https://www.codesigned.com/blog/author/jake-weaver) Nov 19 [Why Organizations Are Doubling Down on Internal & Crisis Communications Right Now](https://www.codesigned.com/blog/why-organizations-are-doubling-down-on-internal-crisis-communications-right-now) Open, clear, concise communication is integral to the smooth functioning of an organization at the best of times, but never more so than during times ... [Luke Warren](https://www.codesigned.com/blog/author/luke-warren) Nov 19 [One Key Lesson From The COVID-19 Crisis](https://www.codesigned.com/blog/one-key-lesson-from-the-covid-19-crisis) A conversation between Jake Weaver, CEO of Codesigned, and Alison Davis, CEO of Davis & Company. [Codesigned](https://www.codesigned.com/blog/author/codesigned) Nov 19 [SharePoint Framework (SPFx): Microsoft BOT framework integration](https://www.codesigned.com/blog/sharepoint-framework-spfx-microsoft-bot-framework-integration) Download / Source code SPFX web part : https://github.com/get2pallav/BT/tree/develop [Pallav Mathur](https://www.codesigned.com/blog/author/pallav-mathur) Nov 19 Explore Resources ![](https://ws.zoominfo.com/pixel/613f8d72f25afa001adf105b)