https://discord.gg/botpress logo
Join Discord
Powered by
how to change properties of .bp-widget-widget
# 🤝help
b
i want to move my bubble little bit to the top. i found the class but i cant edit it in my css.
p
You can move it up slightly, but the container that the widget sits in is not that large, if you give the script to ChatGPT and ask it to move the widget up it will do it for you, this worked for me to move it up slightly
b
and if i want to move it beyond the container?
is there a option
f
Have you tried editing it in the stylesheet?
g
@better-xylophone-69163 add !important after the 52px
b
Yes on the chrome devtool, but when you add it in the stylesheet there is no effect, because the value is coming from inject.js. The embed script
g
But why arent you doing it directly into your html code ?
b
I tried but it doesn’t work, maybe because the css file is coming from the inject.js directly from botpress
Did you manage to do it
g
On the code and not in the stylesheet yes
I don't think you can directly integrate it into the stylesheet
b
can you tell me how?
g
Do you know a bit of css and html code ?
b
yes, but where on my website or should i make my own inject.js file and change it there?
g
You just have to make this: .bp-widget-web { bottom: 150px!important; }
b
or on my websites html
g
On your website's html
I think the webchat styler really is only made to modify the content (appearance) of the chatbot
b
Damn, it really worked, I must have typed it wrong edit: i targeted the wrong class
thanks man
can i also change the z index
so its on top of everything
g
.bp-widget-web { bottom: 150px!important; z-index : 1000!important; }
b
last question, where did you find .bp-widget-web class, I thought it was .bp-widget-widget
f
I think you find it yourself
Its what its called in the screenshot you sent
b
yes, but this code worked .bp-widget-web { bottom: 150px!important; z-index : 1000!important; }
g
I think both do the same bp-widget-web and bp-web-widget
b
mine didnt
with .bp-widget-widget
g
Ngl I think it was on a thread on the discord when I was looking to modify the z-index value and I think that's where I found it
@better-xylophone-69163 I've tried directly on my website and it seems to work with the .bp-widget-widget
.bp-widget-widget { bottom:24px; height:76px!important; left:auto; right:36px; top:auto; width:76px!important don't forget to add ; here otherwise it won't work bottom: 1000px!important; }
b
got it, thanks man
g
@better-xylophone-69163 thanks to you too because you made me realize that bp-widget-widget exists and I think that bp-widget-widget only affects the chatbot icon, unlike bp-widget-web may
b
Glad i could help
f
@nutritious-tent-95441
42 Views
PreviousNext
Powered by