https://discord.gg/botpress logo
#🤝help
How do I change CSS of my chatbot in my own websit
# 🤝help
g

green-vr-73388

07/20/2023, 3:52 AM
So I've played with the source code of the shareable URL and now I want my chatbot on my website to look like this(the picture) How can I put it as an integration?

https://cdn.discordapp.com/attachments/1131433414218764308/1131433414382321864/image.png

Also if possible my chatbot to be open every time (not to click on the black little icon on the bottom right of the screen)
I've found how to change it now but how can I center it and make it full screen with this css? https://rayanemeldz.github.io/FarahAICSS/CSS/Stylesheet.css
every time I change the width and height nothing change.
Looks like I've found how to do it , thank you!
I didi it with this code , is it possible to change the color of the bot in here: // Import the Botpress WebChat JavaScript file // Initialize the Botpress WebChat with the required parameters window.botpressWebChat.init({ // Replace and with your actual bot and client IDs "botId": "", "clientId": "", // Set the URL for the Botpress WebChat JavaScript file and the messaging server "hostUrl": "https://cdn.botpress.cloud/webchat/v0", "messagingUrl": "https://messaging.botpress.cloud", // Set the name of the bot that will be displayed in the WebChat interface "botName": "Test", // Set the width of the WebChat container and layout to 100% (Full Screen) "containerWidth": "100%25", "layoutWidth": "100%25", // Hide the widget and disable animations "hideWidget": true, "disableAnimations": true, }); // Opens up the Chatbot by default // This lets users start chatting with the Chatbot without needing to click any buttons or menus. window.botpressWebChat.onEvent( function () { window.botpressWebChat.sendEvent({ type: "show" }); }, ["LIFECYCLE.LOADED"] );
b

bright-magazine-792

07/20/2023, 4:52 PM
You need to add
"stylesheet": "https://webchat-styler-css.botpress.app/prod/3fcd3e4e-d5bc-4bf5-8699-14b621b3ada2/v91582/style.css"
in the init
this stylesheet URL is generated by https://styler.botpress.app/
g

green-vr-73388

07/20/2023, 4:54 PM
When I do this , the fullscreen is gone
I want to keep the same color as my generated link but keep it full screen like i did with the code i putted in the chat
I've found it , i copied the CSS generated text from the styler , kept only the colors and host this file to github.
2 Views