https://discord.gg/botpress logo
Join Discord
Powered by
Embedding web chat full screen
# 🤝help
s
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
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
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
give it a try in a div, yeah
s
yeah and it look like in the image i sent
a
is your CSS affecting the container size at all?
s
does this effect it
a
it might, if your CSS is restricting the container size
s
i just try delete it and re run and it still to the left like a widget not fullscreen
a
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
yeah i try the " script " version first already and the result is in the first image in the post
a
that's strange, the script is usually 100% consistant. Are you sure you're editing the same page you're viewing?
s
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
and if you remove the stylesheet/css param does it fullscreen?
s
nope it go to the left
i have double check to see if any css was affecting it but nope
a
huh. Mind sharing the whole code that you're using?
can DM me if you want
s
👌🏻
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
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
.
right now with the brute-force way
i need to change it more to be more beautiful
but time for bed
h
@salmon-kite-31708 did you figure it out using v1? can you share the css you used so it's centered full screen
s
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
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
PreviousNext
Powered by