3

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.

enter image description here

enter image description here

2
+25

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....

enter image description here

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.

enter image description here

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.

2
  • Hi Siddarth - Thank you for the response, I am already aware of this approach which takes the iframe, I want to use it without iframe, soi can use the reactjs to customize the UI more, I have updated it in my question, apologies for not mentioning beforehand – spStacker Jun 17 '19 at 14:47
  • Thank you Sid for the response... i checked the code here github.com/microsoft/BotFramework-WebChat/blob/master/samples/… ... in the file they have mentioned that "// You should never put the Direct Line secret in the browser or client app" so using this appraoch in production seems to be not desirable, do you have any suggestions on it, – spStacker Jun 19 '19 at 1:36
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.