Gorgias logo
Gorgias logo

All articles

Stop Chat from conflicting with other widgetsUpdated 6 months ago

If your Chat widget is conflicting or hidden behind some other elements on the page (the accessibility widget, rewards widget, etc.), changing the z-index should overlay the Chat on top of any other element. 

To do this, add this code to your site:

1<style>
2#gorgias-chat-container iframe#chat-window,
3#gorgias-chat-container iframe#chat-campaigns {
4 z-index: 2147483647 !important;
5}
6#gorgias-chat-container iframe#chat-button {
7 z-index: 2147483646 !important;
8}
9</style>

If you want to hide the Gorgias Chat behind other elements on the page, you can use the following code:

1<style>
2#gorgias-chat-container iframe#chat-window,
3#gorgias-chat-container iframe#chat-campaigns {
4 z-index: 99 !important;
5}
6#gorgias-chat-container iframe#chat-button {
7 z-index: 99 !important;
8}
9</style>
10
11

If you're using Shopify, the code needs to be added under theme.liquid files - it would be best if you add it somewhere close to the Chat code, for easier organization.

Instructions for Shopify

1. Go to your Shopify home screen.

2. Click on Online Store on the left.

3. Select Themes → Actions → Edit Code.

4. Under Layout, choose theme.liquid.

5. Copy the code above.

6. Paste it on the first line or the last line in the text code box.

7. Click Save - the Chat widget shouldn't be hidden now.

Was this article helpful?
Yes
No