You can choose to hide the widget underneath any element in your website. 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. Within the “Inspect” tool space, select the element selector tool from the top-left.
4. Click on the element that is being blocked by the chat widget.
5. Try to find within the highlighted code if there is a mention of the z-index associated with the element.
Note: 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.
6. 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 sidebar, select Settings > Chat Widget.
7. Once there scroll down until you see “Hide chat window under elements” toggle and turn it on.
8. Input the value for the z-index that you found corresponding to the element that was being hidden.
9. Hit the Save button. The changes should be reflected on your site.