How to adjust z-index to prevent apps from overlapping?

Shopify Discussion
1

Hello!

I’m having a problem where one app is covering another on my website.

I have a chat feature for customers to talk with our support team. However, another app showing recent purchases by other customers is covering the chat.

The chat window opens when the customer taps the chat button on the bottom right of their mobile screen. It’s okay if the purchase app covers the button, but I don’t want it to cover the chat window itself.

my site: here
I’ll add pics below for context:

3.png
3.png908×620 194 KB

2.png
2.png908×620 58.5 KB

1.png
1.png908×620 31.6 KB

2

You can add the following CSS to ensure the full window remains visible:

.crisp-client .cc-tlyw[data-full-view=true] .cc-kxkl .cc-1hqb[data-visible="true"] {
    z-index: 10000000000 !important;
}

.crisp-client .cc-tlyw {
    position: static !important;
}