React Bot Height
# 🤝help
d
Problem : I want to reduce the bot height Code: const NexaChat = () => { useEffect(() => { const script = document.createElement('script') script.src = 'https://cdn.botpress.cloud/webchat/v1/inject.js' script.async = true document.body.appendChild(script) script.onload = () => { window.botpressWebChat.init({ botId: '*******', hostUrl: 'https://cdn.botpress.cloud/webchat/v1', messagingUrl: 'https://messaging.botpress.cloud', clientId: '*****', showTimestamps: true, enableTranscriptDownload: true, botName: "Nexa Bot", botConversationDescription: 'Chat with us', containerWidth: "100%50", layoutWidth: "100%50", }) } }, []) return ( <> ) } export default NexaChat ------ Another problem when I put own css like that it is not wokring 'stylesheet': 'https://raw.githubusercontent.com/anasch07/GL4_TP1_ANGULAR/main/src/chatbot.css' https://cdn.discordapp.com/attachments/1220719395580543016/1220719395807166564/image.png?ex=660ff687&is=65fd8187&hm=8654d23f6ec2428ecb6b3c211ee5e48c3512f078c0c2bf9b99491b4c0e084aa2&
f
Hey there, You should use the stylesheet from Botpress to change the CSS
It can be found in the webchat integration settings
d
I want to use my own css
it is possible ?
f
You can style it to fit your needs 100% in the stylesheet
d
how ? it's a preconfigured css
f
You can change the styling in it. You could also try and design your own UI. You can use this as a reference https://discord.com/channels/1108396290624213082/1212341078565589023
d
what do you mean by changing the style in it ? the code now is : useEffect(() => { const script = document.createElement('script') script.src = 'https://cdn.botpress.cloud/webchat/v1/inject.js' script.async = true document.body.appendChild(script) script.onload = () => { window.botpressWebChat.init({ botId: '', hostUrl: 'https://cdn.botpress.cloud/webchat/v1', messagingUrl: 'https://messaging.botpress.cloud', clientId: '', showTimestamps: true, enableTranscriptDownload: true, botName: "Nexa Bot", botConversationDescription: 'Chat with us', containerWidth: "100%50", layoutWidth: "100%50", 'stylesheet': 'https://webchat-styler-css.botpress.app/prod/code/3fcd3e4e-d5bc-4bf5-8699-14b621b3ada2/v31782/style.css' }) }
what are the next steps to change the style ?
@fresh-fireman-491
f
In the stylesheet, you can check out this video

https://youtu.be/bbGd93FxxWM?si=dm4jrrfFmbYa0dWt

d
Huge thanks man
much apperciated
Why they didn't mention that in documentation I spent hours searching
f
Yeah they don't mention much about it. That's why a combination of searching in the docs and YT is always the best. They referenced it here https://botpress.com/docs/developers/webchat/controlling-webchat-using-js/#next-steps, but you are completely right, it is not enough, and doesn't explain it.
I have just let the team know that it's missing. Thank you for addressing the issue 🙂
16 Views