Interface issue: website elements overlay chatbot
# 🤝help
l
Hey guys! I have successfully built and implemented my first chatbot into my website, but I have an interface issue on both my laptop and on my phone when opening the chatbot. I've used a webflow Template to create my page and don't know that much about all the webflow settings. Some elements of the hero section overlay with the botpress chat. I don't have that problem anywhere else but in the hero section of my homepage. I'll add some picture of what this looks like. On the laptop it's just one element that's overlapping but on the phone multiple elements and text that overlap. Any advice is highly appreciated!
p
it is to do with the 'weight' of the elements, the bot and the elements on your website.
You can either increase the z index (weight) of the bot, or decrease the z index (weight) of the elements in Webflow
this is Webflow's guide which may be useful
l
thank you, I already tried changing the z level for the elements that overlay but it didn't work. How can I set the z level for the bot higher? do i have to implement it in the code?
f
You can change that in the stylesheet https://styler.botpress.app
l
where exactly in the stylesheet? in the coding part?
i dont fine it in the advanced styler
f
I don't think I will be at my PC today, but you should be able to find the chat window in the advanced styler and then add a z-index value that is higher than the elements on your website. You can also try and search, here in Botpress, for the word z-index or z index, which will show every message containing that word