microsoft
Use BotFramework-WebChat in a React app with customization
I have a question
Hello,
I want to build a Chat bot in a custom React application (public web site). I have a few questions:
- Can we have an interface like in https://www.intercom.com?. An icon appears in the bottom corner of the web site and if you click, you open the chatbot interface.
- Is it possible to fully customize the web chat UI?
- Is it possible to change the code of the chatbot in our application?
- Is it possible to change the code of the web chat in order to call our APIs that will receive a prompt and generate a response?
- Is it possible to change the Html and CSS?
If this is possible, can you provide links to documentation on how to to this?
Thanks
if you post this as a question in Stack Overflow, I will be more than happy to answer it.
Hello @HesselWellema,
Please respond at https://stackoverflow.com/questions/78678224/use-botframework-webchat-in-a-react-app-with-customization.
Thanks
@miguelisidoro - Please find the responses to your questions, below.
Can we have an interface like in intercom.com?. An icon appears in the bottom corner of the web site and if you click, you open the chatbot interface.
A sample demonstrating this already exists in the samples folder of this repo, titled 06.recomposing-ui/a.minimizable-web-chat. Please review this to see if it meets your needs.
Is it possible to fully customize the web chat UI?
Web Chat is not fully customizable, though it is highly customizable. If you look over the various samples you will find that you can affect Web Chat in a variety of ways including building custom components and recomposing the UI, implementing different built-in style options, and altering functionality. However, Web Chat is built using React which handles updates to the DOM. This means making UI changes outside of Web Chat is not recommended as a best practice.
Is it possible to change the code of the chatbot in our application?
Web Chat is only a client application allowing the user to communicate with the bot. Changes made to the code of your bot are separate from Web Chat. Changes made in one should have no bearing on the other outside of conversational flow.
Is it possible to change the code of the web chat in order to call our APIs that will receive a prompt and generate a response?
Web Chat runs in the browser and consists of HTML and JavaScript. Any expected functionality that exists in a normal web app can be implemented in Web Chat. For instance, suppose a bot presents the user with several options of which one option, when selected, sends data to an API. The user, selecting that option, could trigger an event in the page that then posts the data to the API via an event listener. (There is a basic sample demonstrating this concept, too!)
Is it possible to change the Html and CSS?
As mentioned above, yes, but with limitations. The samples in 02.branding-styling-and-customization demonstrate how this can be achieved in most instances.
Thank you @stevkan, I had those doubts too. My project is very similar to miguelisidoro. I ended up creating the bot inside an HTML wrapper where I define a custom header:
Render ReactWebChat with useMemo to avoid mutiple calls to api:
Componente template:
Hello @HesselWellema,
Please respond at https://stackoverflow.com/questions/78678224/use-botframework-webchat-in-a-react-app-with-customization.
Thanks Stevkans answer is correct
@miguelisidoro - Please find the responses to your questions, below.
Can we have an interface like in intercom.com?. An icon appears in the bottom corner of the web site and if you click, you open the chatbot interface.
A sample demonstrating this already exists in the samples folder of this repo, titled 06.recomposing-ui/a.minimizable-web-chat. Please review this to see if it meets your needs.
Is it possible to fully customize the web chat UI?
Web Chat is not fully customizable, though it is highly customizable. If you look over the various samples you will find that you can affect Web Chat in a variety of ways including building custom components and recomposing the UI, implementing different built-in style options, and altering functionality. However, Web Chat is built using React which handles updates to the DOM. This means making UI changes outside of Web Chat is not recommended as a best practice.
Is it possible to change the code of the chatbot in our application?
Web Chat is only a client application allowing the user to communicate with the bot. Changes made to the code of your bot are separate from Web Chat. Changes made in one should have no bearing on the other outside of conversational flow.
Is it possible to change the code of the web chat in order to call our APIs that will receive a prompt and generate a response?
Web Chat runs in the browser and consists of HTML and JavaScript. Any expected functionality that exists in a normal web app can be implemented in Web Chat. For instance, suppose a bot presents the user with several options of which one option, when selected, sends data to an API. The user, selecting that option, could trigger an event in the page that then posts the data to the API via an event listener. (There is a basic sample demonstrating this concept, too!)
Is it possible to change the Html and CSS?
As mentioned above, yes, but with limitations. The samples in 02.branding-styling-and-customization demonstrate how this can be achieved in most instances.
Hello @stevkan ,
Thanks for detailed response. I have a couple of more questions:
- Why is Web Client implemented in JavaScript and not TypeScript? Why are the React components not JSX files?
- Regarding your answer "Web Chat is only a client application allowing the user to communicate with the bot. Changes made to the code of your bot are separate from Web Chat. Changes made in one should have no bearing on the other outside of conversational flow.", what do you consider the bot? You consider Web Chat the UI. Is the bot our custom APIs? If yes, is there any documentation on how the API should be called and what the API should respond in the answer (swagger or even documentation) for Request and Response?
- If my understanding of 2) is not correct, can you please describe the roles of Web Client (I believe the UI), bot and APIs?
- Are the API calls always done as in this sample? Our goal is that the click button triggers a call to an API and then render the answer in the response area.
- How do we integrate the web chat in our application? Is there any npm package we can install? The option, could not be fork the repo and integrate the relevant code in our application...
- Regarding "Web Chat is not fully customizable, though it is highly customizable. If you look over the various samples you will find that you can affect Web Chat in a variety of ways including building custom components and recomposing the UI, implementing different built-in style options, and altering functionality. However, Web Chat is built using React which handles updates to the DOM. This means making UI changes outside of Web Chat is not recommended as a best practice.", what do you consider changes outside the WebChat? Having html and CSS of our own outside of Web Chat? I want to integrate Web Chat in a public web site and you I assume are saying that the only customization is to create custom components, styles (that according to your link are limited), correct?
Thanks
@miguelisidoro - As before, please find the responses to your questions below.
Why is Web Client implemented in JavaScript and not TypeScript? Why are the React components not JSX files?
Regarding JS vs TS, you can reference this GitHub post which attempts to answer that question. If you are needing additional clarification or have other questions around design/development decisions, such as the use of JSX files, those would best be answered by the author of Web Chat (and the aforementioned post), @compulim.
what do you consider the bot?
In short, the bot is separate code which, in this case, is written using one of the BotBuilder SDKs (dotnet, JS, or Python). This bot code contains the logic that controls and directs the conversational flow when interacting with a user via a connected client, such as Web Chat, Facebook, Slack, Teams, etc.
For more detailed information, I would suggest reading the various articles in the Bot Framework SDK documentation, starting with How bots work - Basics of the Microsoft Bot Framework.
You consider Web Chat the UI. Is the bot our custom APIs? If yes, is there any documentation on how the API should be called and what the API should respond in the answer (swagger or even documentation) for Request and Response?
No, the bot is not your custom APIs. To be clear, the Web Chat client is designed for, and meant to connect to, a bot built with one of the above SDKs. That being said...is it possible to call an API from an event triggered in the browser and inject any API responses into Web Chat's transcript window?
- Technically, yes, but not as the primary or only source for conversational responses. However, API responses generated in the browser are often sent to the bot, via Web Chat, to be processed and displayed back to the user via the conversational flow.
- Or, the API call is not handled in the browser, at all, and is instead handled by the bot in the bot's code as part of the conversation.
If your goal is to use Web Chat only with API generated responses, I would recommend you instead identify another client for this purpose. By using Web Chat in this way, certain features would be unavailable as they are specific to receiving activities (messages) from a BotBuilder bot. Additionally, future changes to Web Chat could negatively impact your setup since using Web Chat in that way would not be a factor.
If my understanding of 2) is not correct, can you please describe the roles of Web Client (I believe the UI), bot and APIs? Are the API calls always done as in this sample? Our goal is that the click button triggers a call to an API and then render the answer in the response area.
See my response posted above.
How do we integrate the web chat in our application? Is there any npm package we can install? The option, could not be fork the repo and integrate the relevant code in our application...
Please read the Web Chat Overview article, and associated articles, found in the Bot Framework SDK Documentation. There is additional information in the BotFramework-WebChat repo's README.md and docs folder.
As for forking the repo, it is an open source project. You are welcome to fork the repo and make any changes you see fit so that it serves your needs, including integrating into your application. Just be aware that the BotFramework-WebChat library has a fairly large code base that is tightly integrated with support for activities (messages) received from a BotBuilder bot. Trying to integrate only the relevant code may prove difficult. Also, support provided in this repo is only for the BotFramework-WebChat project, as it is. Support is not provided for endeavors that significantly alter Web Chat from its current design, such as redesigning it to support other bot products or integrating portions of code into other projects.
what do you consider changes outside the WebChat? Having html and CSS of our own outside of Web Chat? I want to integrate Web Chat in a public web site and you I assume are saying that the only customization is to create custom components, styles (that according to your link are limited), correct?
The "changes outside of WebChat" comment is specific to any implementation of Web Chat. In other words, if you have Web Chat integrated into your web site which also contains many other elements, it is only the Web Chat portion that you would want to refrain from making any changes to the DOM directly. How you manage the rest of the web site is not a concern of Web Chat and is completely at your discretion. In fact, whether you want to make changes directly to Web Chat's DOM is entirely up to you. The most I can say is it is not a best practice for the reasons noted in my previous post.