https://discord.gg/botpress logo
#🤝help
Embedding web chat full screen
# 🤝help
s

salmon-kite-31708

12/14/2023, 2:55 PM
So yeah , i mess around with the code on the docs page and it isnt exactly full screen for me. Any help would be great !
a

acceptable-kangaroo-64719

12/14/2023, 3:28 PM
Hey @salmon-kite-31708 you'll need to add these values in the
init()
function:
Copy code
js
"containerWidth": "100%25",
"layoutWidth": "100%25",
and

https://youtu.be/y5a9tfZAZGM?si=OOCllj7x5WdV6fYW

s

salmon-kite-31708

12/14/2023, 3:31 PM
yes , i do have those values in and it still look like this
i've try switch to in a div but still like that
a

acceptable-kangaroo-64719

12/14/2023, 3:31 PM
give it a try in a div, yeah
s

salmon-kite-31708

12/14/2023, 3:31 PM
yeah and it look like in the image i sent
a

acceptable-kangaroo-64719

12/14/2023, 3:31 PM
is your CSS affecting the container size at all?
s

salmon-kite-31708

12/14/2023, 3:32 PM
does this effect it
a

acceptable-kangaroo-64719

12/14/2023, 3:32 PM
it might, if your CSS is restricting the container size
s

salmon-kite-31708

12/14/2023, 3:33 PM
i just try delete it and re run and it still to the left like a widget not fullscreen
a

acceptable-kangaroo-64719

12/14/2023, 3:35 PM
I've used this code before to show fullscreen bot, maybe you can swap your botID and see if it works?
Copy code
html
<script>
    window.botpressWebChat.init({
        // Replace <your-bot-id> and <your-client-id> with your actual bot and client IDs
        "botId": "3a400c1e-2296-407a-ac82-fceb8989fac1",
        "clientId": "3a400c1e-2296-407a-ac82-fceb8989fac1",
 
        // 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": "Helpful Bot",
 
        // 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"]
    );
</script>
s

salmon-kite-31708

12/14/2023, 3:38 PM
yeah i try the " script " version first already and the result is in the first image in the post
a

acceptable-kangaroo-64719

12/14/2023, 3:40 PM
that's strange, the script is usually 100% consistant. Are you sure you're editing the same page you're viewing?
s

salmon-kite-31708

12/14/2023, 3:42 PM
here's what happend when i config the width and height in the styler
i might brute force it
since the script isnt working for me
a

acceptable-kangaroo-64719

12/14/2023, 3:47 PM
and if you remove the stylesheet/css param does it fullscreen?
s

salmon-kite-31708

12/14/2023, 3:47 PM
nope it go to the left
i have double check to see if any css was affecting it but nope
a

acceptable-kangaroo-64719

12/14/2023, 3:48 PM
huh. Mind sharing the whole code that you're using?
can DM me if you want
s

salmon-kite-31708

12/14/2023, 3:54 PM
👌🏻
the problem was the webchat , v0 would make it fullscreen but the UI would be mess up and ugly
my solution when using v1 right now is to edit width and height in a brute-force way using styler of botpress and add it into the script using "stylesheet: "styler-url""
t

thousands-nest-91570

12/14/2023, 4:23 PM
can you show what it looks like now?
i tried to do the iframe and it worked ok but having issues with editing the style it doesnt pull any chat bot setting from bot press like stylesheet etc. Maybe this way is better
s

salmon-kite-31708

12/14/2023, 4:55 PM
.
right now with the brute-force way
i need to change it more to be more beautiful
but time for bed
h

helpful-electrician-82712

01/11/2024, 9:19 PM
@salmon-kite-31708 did you figure it out using v1? can you share the css you used so it's centered full screen
s

salmon-kite-31708

01/12/2024, 1:31 AM
i really don't check if the botpress team updated v1 so it can customize fullscreen , my project for me im still using the brute-forced way is to adjust height width manually
u can check the docs script and try if it updated yet or not
b

blue-planet-55922

03/22/2024, 3:15 PM
Hey, i was wondering how to create the fullscreen web chat on 50% screen width. Wanted use the full screen script from the docs and edit: "containerWidth": "50%", "layoutWidth": "50%", But its not working for me, it also doesnt show the bot at all, not even in full screen. (I'm using a html embed in my webflow page with the code snippet from the docs) Don't know how to solve it 😄 Maybe someone can help me