https://discord.gg/botpress logo
Join Discord
Powered by
Use default style for Webchat and only change size
# 🤝help
a
Hi - why does the botpress online styler start with a black coloured bot thats completely different to the default webchat style? I just want to change the bot size as its not responsive and the border radius BUT thats not possible as you have to restyle every part of the bot with the online tool (colours etc) Why dont you just start with the default style in the tool? Whats the easiest/fastest way to only change a couple of options? Is there a copy of the default CSS somewhere to work from? Can you make the webchat mobile responsive? Thanks
b
a
I know but thats a total PITA and overkill in terms of CSS stylesheet loading- It means we have to create an entire CSS sheet to change a couple of parameters! the default style is fine so I dont understand why your app doesnt start with the default styles? Its impossible to recreate the default style as it has borders etc. All i want to do is have a mobile reponsive bot and the only way to trick it for now is to set max height to 50%. Do you have an easier solution - I dont want to have to create a massive amount of CSS sheets for 2 changes? I cant see how you can just change a few CSS parameters as they all look like they load externally?? Thanks
b
yeah I take your point - that's useful feedback, thanks! I'm gonna tag @bright-magazine-792 who's more familiar with our styling options than I am 🙂
a
ok great but that doesnt help me now! I have an urgent proof of concept to demo and it looks pants as its not mobile responsive - I have to reinvent the entire styling to set the window size to 50% in your styler app as its all CSS bloat loaded externally. Unless of course you have a far simpler solution I can just use today thanks
b
unfortunately f I had a simpler solution to give to you I'd have given it to you already!
a
actually there is an advanced styler but it doesnt seem to make the changes? I just want to reverse the colours from black to white and set a size parameter
b
have you watched this?

https://www.youtube.com/watch?v=bbGd93FxxWM▾

I'm not sure if the stylesheet you generate with the advanced styler can change just the options you'd like, though
worth testing?
a
Yes I tried that but as mentioned the app starts off with a completely different styled bot to the default webchat! All I want to do is change the size and I cant do that with the styler as you would have to rebuild the entire CSS for the bot!
i
In support of what @adventurous-glass-22349 is saying. Right now I'm having to set up entire instagram accounts to have good demos on mobile. Simply unusable on anything other than desktop and 99% of my users will be mobile ONLY.
a
ok a workaround is to set the bot to full screen and then wrap that code in CSS to be mobile responsive!! I have this working on my wordpress site as the standard webchat is not useable or prdduction ready as its not mobile responsive at all. Steps. 1. Go here and use this code https://botpress.com/docs/cloud/webchat-customization/full-screen-bot/ 2. You can then add in your configuration variables from your webchat area 3. Wrap the final code as you need it - heres my example style before the botpress full screen code is called. I am using this directly on a Wordpress page in an HTML block 4. BONUS - the full screen code automatically opens the chatbot for you lol so you dont need to join the beta! NOTE - THIS DOES NOT STYLE THE BOT AT ALL - its just to get it displaying as mobile friendly Its not at all ideal but theres no way I can demo anybot on any mobile device out of the box. This is only a workaround for proof of concept. Come on Botpress its 2023 ALL design needs to be mobile first...every other chatbot on the planet is mobile responsive Ive just lost 6 hours of my life getting to this stage!! Had I known its not mobile friendly I would have picked another bot #bp-widget-root { position: fixed; bottom: 10px; /* change this value to increase/decrease the distance from the bottom edge */ right: 10px; /* change this value to increase/decrease the distance from the right edge */ } @media only screen and (max-width: 600px) { #bp-widget-root { /* Adjust the position and/or size of the widget for small screens here */ right: 5px; bottom: 5px; width: 90%; /* Adjust width */ height: 60%; /* Adjust height */ } }
i
ty for your efforts!!!!
Let me tip you ser
For those who eventually search "mobile support" and use webflow, paste this into your html block:
Copy code
js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello, world!</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
    <link rel="icon" href="favicon.png" />

    <!-- CSS to style the Botpress chat widget -->
    <style>
      #bp-widget-root {
        position: fixed;
        bottom: 10px; /* change this value to increase/decrease the distance from the bottom edge /
      right: 10px; / change this value to increase/decrease the distance from the right edge /
    }
  
    @media only screen and (max-width: 600px) {
      #bp-widget-root {
        / Adjust the position and/or size of the widget for small screens here /
        right: 5px;
        bottom: 5px;
        width: 90%; / Adjust width /
        height: 60%; / Adjust height 
    }
        */
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
    <script>
      window.botpressWebChat.init({
        composerPlaceholder: "Hi!",
        botConversationDescription:
          botConversationDescription,
        botId: botId,
        hostUrl: "https://cdn.botpress.cloud/webchat/v0",
        messagingUrl: "https://messaging.botpress.cloud",
        clientId: clientId,
        avatarUrl: avatarUrl,
        website: Site,
        // Set the name of the bot that will be displayed in the WebChat interface
        botName: Name,
        showBotInfoPage: true,

        // 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>
  </body>
</html>
Any idea if styling is possible in emu mode?
b
No styling is not possible in the Emulator
5 Views
PreviousNext
Powered by