If your chat widget is hiding your add-to-cart CTA or any other specific element on your webpage you can choose to hide the widget underneath the element.
This can be done by doing the following steps to identify the z-index of the desired element and inputting it into the widget design section:
1. Go to your page where the element is appearing and being hidden beneath the chat widget
2. Identify the z-index by initiating the “Inspect” tool from your browser. While on the desired page right-click anywhere on the page and select “Inspect”.
This method should be true for popular browsers like Google Chrome, Mozilla Firefox, and Apple Safari. Microsoft Edge has different but similar development tools that can be used as well.
3. You should see something like the image below displayed alongside the page you are on (Chrome Browser):
4. Within the “Inspect” tool space, select the element selector tool from the top-left.
5. Select the element that is being blocked by the chat widget.
6. Try to find within the highlighted code if there is a mention of the z-index associated with the element.
However, sometimes based on how the website was built it may not be so simple to find the z-index. If you are having trouble it would be best to consult your developers and have them identify or even add a z-index if it was missing from the element that is being hidden under the widget.
7. Once you have obtained the z-index of the relevant element copy the number associated with the z-index and navigate to the Rep console and from the Rep console side bar select Settings>>Chat Widget.
8. Once there scroll down until you see “Hide chat window under elements” toggle and turn it on.
9. Toggle it on and input the value for the z-index that you found corresponding to the element that was being hidden.
10. Hit the save button once you have finished inputting the value; the changes should be reflected on your site.