https://discord.gg/botpress logo
Join Discord
Powered by
bot looks terrible on websites!
# 🤝help
f
Hello, any help would be appreciated! I have a customer demo on Wednesday and I hope the chat will look good by then! Some of the html elements are showing through the bot and I don’t know why. I even tried to wrap the script in a div in the html and change the css properties but it did not work.
i also tried it in chrome, and mozilla, still can see this element through the chat
this is the css modification i did to the script
Hello, I went through the docs and even hosted my own stylesheet on dropbox, changed the z index to 10000 and linked it to my bot. it still has the same problem. I am assuming this is an issue with the iframe itself.. would appreciate any help!
also used the "className" feature in the editable script, and added styling to that to style the iframe. To no avail:/ looks exactly the same
g
Without anything else to go on, I see that your CSS snippet shows an id selector # not a Class Name selector which uses the period. If you are using className="buzzbot" then you need to format CSS like this 👇🏼
Copy code
.buzzbot {
z-index: 1000;
position: relative;
opacity: 1;
background-color: black;
}
f
Thank you, I had tried both last night. The # was from where I had added an Id to a wrapper div
w
@full-helmet-73535 @gentle-engine-13076 hi folks. How do you serve your CSS stylesheet? When I try to use Github Gist, it doesn't work
f
I uploaded it to Dropbox.
@rich-battery-69172 @bumpy-butcher-41910 please help 🙏🏻 I have a product demo tomorrow and it looks like this is out of my hands. I’m sure this is a small fix with some iframe css or something. I am happy to dm you the link to the website I hosted the bot on, to be inspected by a front end dev with more experience than me
b
hey @full-helmet-73535 - any chance you can share the website this is on so we can test it out ourselves?
f
Just dmed it to you 🙏🏻
Thank you thank you thank you
In order to see what I am talking about on desktop, zoom in and you will see when some elements are “behind” the bot, they show through. It is easier to see on mobile
b
I was able to reproduce this bug on mobile but not on desktop (chrome), still taking a look to see what could be causing this!
f
Thank you so much. When I zoom on chrome, this is what I see
In desktop ^
I think it’s because of something with the Wordpress plugin “Uber menu”
All of those elements in the menu have the Uber menu class in the html. But the mobile screenshot is just “feature-text” class so they must have a trait in common
b
b
Rohan to the rescue
b
Hey! can you add these properties to your CSS?
Copy code
element {
  z-index: 0;
  position: relative;
}
f
Are you guys hiring. I’m qualified based in ny
@bright-magazine-792 a king among men I fuckjng love you
God bless
b
hahah thank you @full-helmet-73535 Great Bot btw, Loved it!
f
Ty ser 🙏🏻🙏🏻🙏🏻
@nice-fountain-96783
80 Views
PreviousNext
Powered by