CSS is it working?

Ask the Community
1

Hi:
I am trying to configure CSS to change some things but the embedded code does not change the logo or anything else. Is it me doing something bad or do I miss anything?
Thanks.

2

Hello. Same thing here. Can you share what you have been doing for that?
It would be interesting for example to be able to change the color and size of the chatbox, instead of the black color actually. is it something like that?

1 Like
3

I used the code from this website that @bassam.tantawi suggested to me.

But despite only trying to show the floating bubble on the left instead of on the right, nothing has worked so far.

I hope is some silly thing I am missing or maybe some bug… I don’t know.

4

Hi Caleb,

Did you try this? User Input Area | Botpress Documentation

5

Hi @Andres ,

Can you share your script after removing the sensitive information?

6

I am using this online test site, it should be doing fine but it does not work.

I hope you can help me, I am useless… Thanks.

Screenshot 2023-04-17 at 18-35-27 CSS Test — Button
Screenshot 2023-04-17 at 18-35-27 CSS Test — Button1835×903 30.7 KB

7

You are not passing the styleSheet property when embedding your bot.

You can check a full list of properties here: Overview | Botpress Documentation

8

Sorry, I don’t understand…

Some examples in the web could help… many of us maybe are businessmen not coders… Sorry.

9

Hi @Andres ,

No problem at all. In this script.
image

Add a property styleSheet, then point to your CSS URL

So your script would look something like:

<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
<script>
  window.botpressWebChat.init({
      "botId": "a7b5ce3a-bea0-4eca-b1ef-d61936ae14e1",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v0",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "a7b5ce3a-bea0-4eca-b1ef-d61936ae14e1",
      "botName": "mountainous-science",
      "styleSheet": "link to your style sheet (CSS)",
  });
</script>
1 Like
10

Hi @bassam.tantawi:

I pasted this link https://raw.githubusercontent.com/Enginer-2023/Na/main/style.css but it does not work as expected. (The link is public)

Entire code:

> <script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
> <script>
>   window.botpressWebChat.init({
>       "botId": "--------------------------------",
>       "hostUrl": "https://cdn.botpress.cloud/webchat/v0",
>       "messagingUrl": "https://messaging.botpress.cloud",
>       "clientId": "----------------------------------",
>       "botName": "--------- IA Chatbot",
>       "styleSheet": "https://raw.githubusercontent.com/Enginer-2023/Na/main/style.css",
>   });
> </script>

The chatbot is on a Blogger blog, so maybe is it the problem?, because I don’t get it to work the way I want, despite others chatbots or codes they do work fine. Lots of hours and no success, I am very frustrated… I am stuck here and I really appreciate you platform and I wish to continue using it, but I cannot deploy it till I am sure and confident on how to do it by myself and well.
Also I spend some more time trying it in a wordpress website and I got the same problem. Please help me.

11

Hi, where do you host your website files?

12

The CSS file is in Github:

https://raw.githubusercontent.com/Enginer-2023/Na/main/style.css

The other files are in Blogger, are self-hosted by Blogger and from Google. I cannot upload or create any of them.

13

can you try with stylesheet property?

14

Is it correct?, it does not work… I don’t understand.

Note: the above property works perfect… but I cannot get to work stylesheet

imagen

15

Here’s a workaround for the moment.
Step 1: Create a new GitHub public repository.
Step 2: Add a new CSS file. Paste your CSS here.
Step 3: Commit changes.
Step 4: Use Netlify or Vercel to deploy this repository. (Preferred: Vercel)
Step 5: use the CSS file from this Hosted URL to the stylesheet property

16

Can you please update here your steps please?
I understand this process is long and takes time, we’re working on fixing this and making the experience better.

17

I did it…but very confusing…

https://na-git-main-enginer-2023.vercel.app/

I got error and does not work… really I do not understand…

18

I discovered it after sending the message, with it i have started customizing the bot interface on web. it is working for me

2 Likes
19

you need to use https://na-git-main-enginer-2023.vercel.app/ stylesheet.css

1 Like
20

Yes now it works, well at least it connects with the github files.

As you can see, it happens two things:
1/ It is not in the left, only has moved a few points. I guess it is my problem somewhere in the Blogger html.
2/ I tried to change lo black and white logo for the one below and as you may see, it does not change completely, I believe I am missing something, perhaps some other instruction.

imagen

I used this code in the CSS file for the position:
bpw-floating-button {
float: Left;
}

And for the logo, in the CSS file:
.bpw-floating-button {
background-image: url(https://na-git-main-enginer-2023.vercel.app/enginer-1-404.png);
}

I really appreciate your help, I so happy to be able to carry on. Despite it, the more I learn, the more questions come to me, I wish I can solve them step by step. Thank You.