Moving the position of the chat bot

Ask the Community
1

Hi team, im only new to botpress just finding my way around. My question is with the cloud version

  1. can we do custom css for the chatbot form?

  2. can we move the position of the chat window to the center of page?

1 Like
2

Hi @brian.l.atkins.wr ,

You can refer to this documentation: Web Chat | Botpress Documentation

There is stylesheet property that can help you with that.

3

Did that cover your question?

4

funny that, I was looking at the same thing last week? Couldn’t figure out where you can edit the css in the cloud version or how to edit the script assuming you self host the css file.

Botpress Documentation isn’t very helpful

I got as far as ```

5

Hi @pantsman28 ,

We are working on enhancing and adding new stuff. Can you tell me what did you look for/google in order for we can enhance our documentation?

6

working as a complete newbie and learning how botpress could be used. The document you mentioned
https://botpress.com/docs/cloud/channels/webchat/
For your previous reply about custom css makes no reference to the process.

The cloud system doesn’t show any css, not that I can find it or how to implement the customzation in the script.

If there was a video or more detailed guide us newbies could follow, especially with the cloud solution , it might help use to understand how it works.

8

Hi, sorry for the inconvenience. I know it’s super hard for configuring custom styling to your webchat at the moment. We’re building documentation and making this process easy. Give us some time.
Also, what do you want to see in the new documentation for custom webchat styling?

9

In the stylesheet, I would love to have control over what is shown and what colors it is shown and the ability to change out the images of both the main chat and the bots profile image…

Most of this is probably already in there but the classifications are needed and a simple example of the styles added into custom embed code would be helpful for…

also not sure if this is style or more bot controls but it would be great to get the little animation of the bot thinking to pop up immediately once a question is sent in by a user…at least on my demo it appears that this animation only briefly pops up before the response is shown.

Thanks again!

10

Hi @MyRDT ,

Did you check our documentation here: Web Chat | Botpress Documentation
We are also working on documentation that will address the main parts of the styles.

The bot profile can be changed using the property avatarUrl

But I didn’t understand this part “also not sure if this is style or more bot controls but it would be great to get the little animation of the bot thinking to pop up immediately once a question is sent in by a user”

Can you elaborate more?

11

In simple terms in the cloud system how can we edit or pull up the css?
Editing the CSS is the easy part.

I can see in the stand alone version botpress-v12_28_1-linux-x64> data>assets>modules>hitlnext>webchat-theme.css but no idea how this can be edited in cloud?

12

Hi @pantsman28 ,

In v12 and in the cloud, the best way is to pass a value that is containing the stylesheet path.

In the cloud the property is named stylesheet, and you can pass it with the embedding code. For other rest of the properties, you can check them here:
https://botpress.com/docs/cloud/channels/webchat/

13

I have setup the style sheet on my hosting server
I have referenced the url location in the webchat.

The chat window does not inherit any of the style sheet.
I then added the style sheet directly in the of the webpage that didnt work either.

Im using this as a guide for each class

https://botpress.com/docs/cloud/webchat-customization/overview/

Where to from here?

14

Hi @brian.l.atkins.wr ,

Can you send us your embedding code after removing the sensitive information?