Improved React Chatbot
# 📖tutorials
s
This is a modified script for using a React chatbot based on the docs here: https://botpress.com/docs/webchat-react-library Use this to implement a better looking chatbot in your React website: Features: - Handle Events: The component includes the ability to handle events from the Chatbot. Currently events are logged to console. You can even control a website through these events. - Dynamic Bot Switching: Ability to change the client ID dynamically, allowing for different bots to be used on different pages with the same component. - Customizable Bot Information: Users can easily customize the bot's avatar, name, and description, which are displayed in the chat header. - Improved Chat UI: The chat window remains in full view, including the header and the message input field, ensuring that they are always accessible. - Scroll Fix: Ensures that even with a large number of messages, the input field remains accessible, and the chat component is always scrollable without losing UI elements. - Fixed FAB Button Placement: The FAB button behavior is improved, ensuring it stays correctly positioned on the screen and closes correctly when the chat window is open or closed. Video link:

https://youtu.be/dd9pwHMezqU

Note: this is for React Websites only. https://cdn.discordapp.com/attachments/1272282316886245478/1272282317058080899/chatbotReact.jsx?ex=66bb117e&is=66b9bffe&hm=7bde3ec93800e5d1d11667c3dc98b7e3c5f5ce138c2dc7a3edab1d7d28d40848& https://cdn.discordapp.com/attachments/1272282316886245478/1272282317485903986/style.css?ex=66bb117e&is=66b9bffe&hm=217f00f9416809d8253cfc7340e7268bc681280b75ba78a893d5b97b7a53c500& https://cdn.discordapp.com/attachments/1272282316886245478/1272282317808734320/theme.ts?ex=66bb117e&is=66b9bffe&hm=6a5ac120805e6f1c97c88c2647df91cdacac030a5bd7979bbe3366269470e05a& https://cdn.discordapp.com/attachments/1272282316886245478/1272553055824379914/20240812-1347-36.4420569.mp4?ex=66bb64e3&is=66ba1363&hm=e202bceed30ed87bc5a4b6fa9202c3b468c914c987a839f4365b7e3d1746ca92&
Attached example of how your can use events from the React Chatbot to control your website
f
Great work as always🦸‍♂️ 💎 Really amazing that you created a video explaining it all🛠️
b
You are AMAZING!
f
Thank you, but this was a workaround. I would recommend you to check out this video https://discord.com/channels/1108396290624213082/1272282316886245478
3 Views