https://discord.gg/botpress logo
Join Discord
Powered by
Chatbot Is under the website menu/header section
# 🤝help
c
Hi there. My bot when deployed is under the header section as it shows in the image. I've tried to change the z-index in the Theme (Avada on Wordpress) but it doesn't work. How can I ensure the chatbot is over everything? @User
f
Have you tried to add !important to the code?
c
Which part of the code?
f
the css
c
I meant to what part of the css. Here's my css sheet: https://webchat-styler-css.botpress.app/prod/code/1f1efd6c-4855-44c5-8cc4-7cd584e7ad22/v79822/style.css I've added !important to the z-index on bpw.layout and it doesn't work
f
@bright-magazine-792 can you help with this please?
b
There's a class where you can add z-index: 1 and it shows
f
thanks @bumpy-addition-21507 👍
c
I don't have that class there,I'm assuming i need to add
@bumpy-addition-21507 Can you guide me on where to add that, please?
On the bot style sheet doesn't work
b
It's a style found not within the bot but within the website itself, in the header tag
c
Yup, my bad. It is solved. Thanks a lot @bumpy-addition-21507
By the way, the image carrosell is a little bid too wide. I've tried to increase the chat bubble width but the widget size follows. How do I ensure it's all visible?
f
Good Job guys 🙂
m
What custom CSS changes have you made so far?
You could try adjusting the positioning, I changed it from the default value of 25px to: .slick-prev { left: -8px; } .slick-next { right: -8px; } You may need a parent container CSS class if the specificity of your CSS doesn't override the defaults e.g: .bpw-bubble-carousel .slick-prev { left: -8px; } .bpw-bubble-carousel .slick-next { left: -8px; } I've used 8px in this example, around 12px and above seems to cause the scrollbar issue. So aim to keep it below this, and give yourself enough of a buffer. But have a play to find a sweetspot that suits you 👍
c
Done, thank you!
@bumpy-addition-21507 Deploying another bot to another client who uses Wix and can't make it work that way. Am I doing something wrong? There's not a section for custom CSS like Wordpress. I need to add an element to the header it self.
b
Oh I don't have much experience with WIX, maybe someone else from the @User team does?
m
what does the setup look like for adding custom CSS in Wix?
c
You basically have to add elements to the page: CSS or HTML like in the images. I've tried a few things, nothing work. The last one is the actual set up, with html code in the header section. @User
@bright-magazine-792 I bet you have insights on this!
m
Can you share the css block you added
I assume you want the bot on all pages or just a specific page as per your example? Also how does it look on the front end? as I'm seeing screenshots from the editor view not the actual output.
c
@most-oil-31163 I tried this: .fusion-header-wrapper { z-index: 1; } And attached follows the front end
m
Are you able to inspect it in chrome dev tools, and look for the parent container of the bot, it will have the class .bp-widget-web The z-index is set to 20, which is actually quite a low value considering all the types of website layouts, flows, third-party apps etc. Try changing this value to something a lot higher under it eventually overlaps all the page elements that you are happy with.
Just checking also is the .fusion-header-wrapper position set to sticky or fixed?
c
I think I am having similar problem, not sure. a client have a wordpress website, and the bot does not appear in the homepage but it does come up on other pages. When on edit he goes under edit with Elementor the chatbot appears normally.
have someone experience this before?
m
Do you have a link to test
c
Hi Chushogen, thank you for your response, can I dm you?
what I am seeing now is that the bot load sometimes, but other times it does not in the home page.
in the other pages it loads fine
c
Thanks a lot for looking into this @most-oil-31163 . I've indeed inspected and by changing the z-index of .bp-widget-web, it works. However, in the botpress file there isn't a .bp-widget-web element, and adding it does nothing!
m
It maybe that class isn't included in the style because its associated with a and a critical element they don't want people tweaking.
Sure thing 🙌
c
@most-oil-31163 so that means there's no solution? I can't believe it lol
b
Hey @chilly-church-46005 were you able to fix the issue?
c
Yes! You helped me lol. Here's the fix: Hey @chilly-church-46005 "After investigating further, I have something for you to try. 1. Go to Wix Dashboard -> Settings -> Custom Code 2. In the HEAD section, click on Add Code and paste the below script. ``` #SITE_HEADER{ z-index: 1 !important; } ```"
b
perfect! on a different thread, yes! 😄
thanks for posting it here too!
g
@bright-magazine-792 How can I change the z-index value of a botpress widget button (the round chat icon), and no I can't change anything else to solve it
It's just that I am looking for a solution at the same time for HubSpot, they don't have a personalized stylesheet for us, but you can access some of the stylesheets's properties in the style editor of the website. It's just that I tried changing z-index of it, by writing code but neither of them seemed to be able to change
I need to add a button on top of the hubspot chatbot (and so do I for the botpress chatbot, but botpress' chatbot, I can simply have a number bigger than 20, which is easy), unlike HubSpot. HubSpot set their z-index to 2147483647, which is the maximum value of z-index
As of now, I'd be happy just to know how to change the z-index value of a Botpress chatbot from personalized code
nvm seems to work now with z-index : 10!important (don't ask me why it didn't work before, I'm 99% sure I had tried this before, maybe it had something different)
p
Hey guys, just found this and having the same issue. Are you making these script adjustments on the advanced webchat styler or within the bot itself? Thanks
m
have you got a demo I could test?
p
Ive just made a quick demo with carousel cards so you can see what I mean, thanks so much!
m
Based off the demo, if you use the following styles it should keep the buttons fully visible: .slick-prev { left: -8px; } .slick-next { right: -8px; }
Let me know if this helps
p
Thanks so much, where should I add this script? I'm in the webchat styler now
Never mind, added it in and it works great! Thanks so much for your help
m
Generally it should be added after the default CSS in the styler, as CSS is like a cascade as in that it’s read from top to bottom. Also good to add comments in the CSS as reference for the changes you are making, just so if you come back to it you’ll see a note of the changes
p
Thanks so much for your help! It's looking great
4 Views
PreviousNext
Powered by