https://discord.gg/botpress logo
Join Discord
Powered by
How to change bot position
# 🤝help
f
I want to move bot position to the left corner and left side when they speak, how?
Also it's not showing on the webpage at all when I use: window.botpressWebChat.init({ "composerPlaceholder": "Chat with PeepoBOT", "botConversationDescription": "BEST Peepo AI", "botId": "87ce440a-6cca-4c0a-825d-0449b2c558d9", "hostUrl": "https://cdn.botpress.cloud/webchat/v0", "messagingUrl": "https://messaging.botpress.cloud", "clientId": "87ce440a-6cca-4c0a-825d-0449b2c558d9", "botName": "PeepoBOT", "useSessionStorage": true, "showBotInfoPage": true });
h
https://styler.botpress.app/ use move horizontal setting
f
where do I paste the link in though, this is the configurable code
h
use pre-configured version instead of configured
f
okay and how do I move it then
ohhh
i got it
h
here

https://cdn.discordapp.com/attachments/1138497430862708836/1138516350428524585/Screenshot_2023-08-08_195702.png▾

f
wait you are the best
tysm
h
pre-configured and then embedded
f
yeah i found it
h
🙌 no worries man, glad to help
a
@hundreds-painter-74515 how do I change the location of the button that opens the chat bot? It's currently behind another plugin's cart button which should take priority in that location
h
You want the botpress button to move horizontally or vertically or you want your botpress to be shown over another button? (Layer change)?
f
no we want to move the floating chatbot icon
h
https://styler.botpress.app/ use move settings and then copy the settings into integrations of your bot
f
we did
h
i need more context, share ss of how it looks on your website
f
can you edit this code to change position
h
f
do I Just add this to the code
.bpw-floating-button { /* Aligns the button to the right side of the container */ float: right; /* Sets the fill color of the button icon */ fill: rgb(255, 255, 255); /* Changes the cursor to a pointer when hovering over the button */ cursor: pointer; /* Removes the outline around the button when clicked */ outline: none; /* Centers the icon inside the button element */ display: flex; align-items: center; justify-content: center; /* Sets the z-index to ensure the button is on top of other elements */ z-index: 1; /* Sets the width and height of the button */ width: 52px; height: 52px; /* Changes the cursor to a pointer when hovering over the button */ cursor: pointer; /* Rounds the corners of the button */ border-radius: 50%; /* Adds a shadow effect to the button */ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); /* Clips any content that overflows the button */ overflow: hidden; /* Removes padding and borders from the button */ padding: 0; border: none; background-clip: padding-box; /* Adds a transition effect to the button when its size changes */ transition: width 1s, height 1s; }
@hundreds-painter-74515
h
no, you play around with it, based on where you want your bot icon to be located. bottom: 10px; right: 10px; add this to your .bpw-floating-button section and play around with values
f
I cant find it
h
yeah, then add it
f
found it
h
.bpw-floating-button { bottom: 10px; right: 10px; } and so on
f
.bpw-floating-button { background: black; border-radius: 52px; bottom: 50px; right: 50px; }
it doesnt change anything in the styler, is that just not something you can preview in the styler/
?
@hundreds-painter-74515
it doesnt change the position at all
h
add position: absolute;
before bottom: x
f
ypi
you are the best
actually
wth
it worked i think
@hundreds-painter-74515 its invisible now 😭
but it changed position
so thats a start
h
can't be
How do you know it has changed position if it's invisible
f
because i can see that its there
if you go on styler
and try to move bot up a bit
theres like half which is visible
if you move it further up its fully invisible
h
Send ss and css code
f
could it be a container?
h
Maybe. Sorry man can't really help you from here, cuz I'm not good at CSS
But it's worked for me, so it's probably CSS on your website. I didn't move it to the top though
You can try it on a blank page and then see if it's CSS on your website or no
f
thing is
that its invisible in the styler too
148 Views
PreviousNext
Powered by