Widget Like Chat Window

Hello, currently the embedded chatbot covers the entire height of the page, and I’d rather have the entire chat window like a bubble on my page.

I went through documentation mentioned Website Embedding·| Developer’s Guide (botpress.com) here.

But I don’t have much experience with handling CSS. I was wondering if someone could provide some CSS code and help me with the steps involved to achieve a chatbot widget like the one shown here towards the bottom right.

Please let me know what can be done.

Hello @arpitkaushal,

Thanks for your interest in botpress.

Embedded website

I created a simple index.html

<head>
   <title>embebded website</title>=
</head>

<body>
   <h1>Injected Component</h1>
</body>

<script src="http://localhost:3001/assets/modules/channel-web/inject.js"></script>
<script>
  window.botpressWebChat.init({ host: 'http://localhost:3001', botId: 'talk' })
</script>

CSS

I open this file data/assets/modules/channel-web/default.css and I modified the .bpw-layout

The bpw-layout could be translated like follow (botpresswidget-layout).

.bpw-layout {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 50%;
    border-left: 1px solid #ccc;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

This makes the chat windows 50 % of the height of the screen. It’s not the bubble style like in your example.

Developer Console

You can open the developer console (right click inspect) and search for the .bpw-layout in the console. You can modify the CSS in your browser (don’t forget to copy this into data/assets/modules/channel-web/default.css when you are satisfied with the result )

Hello @Daehli

Thanks a lot for taking out the time to create the CSS for me, I’m really grateful.

As suggested by you, I’ll change the attributes in the developer console and see what works the best for my use case.

However, you say that the bubble wasn’t possible for you to craft. Can you inform me where I should look if I wish to achieve that outcome? Because I think I’m gonna stick with botpress for now, your team has created a beautiful product, and given it’s open source I can’t be thankful enough.

So, is the bubble doable? If yes, what might be some ways to do that. (You may just mention the crude steps, I’ll do the research, no issues.)

The bubble is doable for sure. I added the border-radius: 25px to round the corner of the windows-chat. I modified the position of the windows-chat with position: absolute, right: 10px and bottom: 0px.

.bpw-layout {
  position: absolute;
  right: 10px;
  height: 80%;
  bottom: 0px;
  border: 1px solid #ccc;
  border-radius: 25px;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

1 Like