Deploying bot in fullscreen webchat
# 🤝help
e
Hello, currently using botpress cloud studio. I would like to ask is it possible to deploy my chatbot in full screen webchat? I saw the CSS code is provided in the botpress docs, but how should it be implemented into the chatbot?
a
Hi @elegant-vr-89667 , if you want the bot to be fullscreen, you'll need to host your own webpage and embed the bot in that page along with some custom CSS. Here's a step-by-step: 1. Host a webpage. If you don't already have a website that you run, I really like [Github Pages](https://pages.github.com/), though it can get a bit technical. Other easy tools for websites include [Wordpress](https://wordpress.com/) and [Squarespace](https://www.squarespace.com/). 2. Take the code [from our full screen documentation](https://botpress.com/docs/cloud/webchat-customization/full-screen-chatbot/) and paste it into your web page. Be sure to change lines 8 and 9- you can get your bot ID and client ID from the "Configurable" tab of the webchat integration (see screenshot) After refreshing the page, you should see your fullscreen bot!
e
thank you for your response😁 Well lets forget about the full screen chat bot, is there a way to customize the look of the standalone webchat? Also the CSS elements are provided, but do I still need to make it inside a web page to start playing with the stylings?
a
Yes, you would still need to embed the bot inside your own webpage before you can start chaning the stylings.
e
OK thank you very much
c
I'm also dealing with this issue. I've been able to do 2 things, but neither at the same time which is problematic. The first is, I can customize the styling of the bot to make it look exactly the way I want - it's great. Then I can use styling to make it full screen, but it won't keep the styling. I'm trying to do both. I've done all the troubleshoots, and used AI to attempt to fix it which doesn't work well because there are "back-end" pieces that I can't access. You can try it yourself on the styler, set the width to anything over 400px and it will get cut off. From hours of research and troubleshooting, and eventually inspecting the page code as it ran I identified something called --toastify-toast-width-- 320px and this --wf-designer--secondSlatePanelWidth-- set at 400PX. I'm far from an experienced web dev so I don't know what that means but I'm inferring from the pixel limitations where this might be causing the restriction. Is there anyway to fix this or work with botpress devs to correct? All I'm trying to do is just customize the styling with what's available and just have the chatbox take up 80 vw/vh so my bot users can have a more focused experience. Can anyone help with this? It has been a nightmare.
i
I am also struggling with the issue that chilly-garage-23789 mentioned
186 Views