Integrating Azure custom BOT on SharePoint home page

Question

I am planning to create a custom UI Bot using ReactJS and have it on the Home page(NOT modern) of our SharePoint site. After some research, i found out we can use it with SPFX webpart and possibly creating it using Visual Studio nodejs react app. The functionality of the bot should be something similar to the verizon bot shown in the images. When you click on the button the bot pops up.

I am using this approach, using react to customize the UI, so not using the IFRAME approach

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react

My question is which is the better approach or feasible approach out of the two to achieve something similar in the images.

Answer 1

Edit - Without Iframe option. You can also use directline to customize web chat UI. For react below is sample from MS documentation(link)

To install the production build from NPM, run 'npm install botframework-webchat'

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

Below is what you can customize with React....

Below is with Iframe option.

We have integrated Azure Bot on SharePoint via master page. Web channel was used for Azure bot. With web channel what we get is a web url which works as standalone channel.

Idea is to add html to SharePoint page and embedded web channel in iframe. Add open and close button and event handlers to show and hide bot section.

Below is screenshot how it was looking.

Be code was used to add html in seatle master page

Web url - https://webchat.botframework.com/embed/ChatBotDemo?s=vZ_CWKSKS6TZk.cwA.5mY.MI99yOSISISvVjhCsTQvqjAWFzt-W1OOSOSOdph_BgY2Y

<script type="text/javascript">
        function openForm() {
          document.getElementById("myForm").style.display = "block";  
          document.getElementById("chatbutton").style.display = "none";      
        }

        function closeForm() {
          document.getElementById("myForm").style.display = "none";
          document.getElementById("chatbutton").style.display = "block";
        }
</script>
<div id ="chatbutton" class="chat-button" style="position:fixed;bottom:0;right:0;padding-right: 20px;padding-bottom: 20px; z-index: 1;">
    <button class="open-button" id="openButton" onclick="openForm()"  type="button" name="chatbutton" style="margin-left: 300px;margin-top: 3px;cursor: pointer;width: 150px;padding: 5px 15px;background: #0078d7;color: #ffffff;text-align: center;font-weight: 300;font-family: 'Segoe UI Regular WestEuropean','Segoe UI',Tahoma,Arial,sans-serif;bottom: 20px;font-size: 12pt;">Chat</button>  
</div>
<div class="chat-popup" id="myForm" style="display: none;position:fixed;bottom:0;right:0;border-left: solid;border-left-width:1px;border-color:gray; padding-right:15px;background-color:#fff;z-index:1000;"> 
   <div style="position: fixed;"><button style="margin-left: 230px;margin-top: 3px;cursor: pointer; z-index: 1;" type="button" class="btn cancel" onclick="closeForm()">Close</button></div>
   <iframe width="853" height="480" src="https://webchat.botframework.com/embed/ChatBotDemo?s=vZ_CWKSKS6TZk.cwA.5mY.MI99yOSISISvVjhCsTQvqjAWFzt-W1OOSOSOdph_BgY2Y" style="width: 100%;z-index=10;"></iframe></div>

Now for your requirement change logic to display only on Home Page, else hide chat button.

Hope this helps..Let me know if you need any more information.

Answer 2

The Github repo that you have mentioned (https://github.com/microsoft/BotFramework-WebChat/tree/master/samples) also provides a sample to create minimizable bot-chat window if you would like to have a look: 12.customization-minimizable-web-chat