Use BotFramework-WebChat in a React app with customization

[miguelisidoro]

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

[HesselWellema]

if you post this as a question in Stack Overflow, I will be more than happy to answer it.

[miguelisidoro]

Hello @HesselWellema,

Please respond at https://stackoverflow.com/questions/78678224/use-botframework-webchat-in-a-react-app-with-customization.

Thanks

[stevkan]

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

[felipe-coelho]

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:

[HesselWellema]

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]

@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:

1. Why is Web Client implemented in JavaScript and not TypeScript?
2. 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?
3. If my understanding of 2) is not correct, can you please describe the roles of Web Client (I believe the UI), bot and APIs?
4. 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.
5. 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...

Thanks