You can configure the Rep widget to hide underneath specific elements on your website to prevent overlapping or obstructed display. This feature ensures the widget doesn't interfere with important page elements like sticky headers, modals, or pop-ups, and maintains optimal user experience across your website.
To hide the widget under certain page elements, follow these steps to identify the z-index value and configure it in the Rep Console:
- Navigate to the page on your website where you want the Rep widget to appear behind a specific element.
- Open your browser's developer tools by right-clicking anywhere on the page and selecting Inspect.
This method works for popular browsers, including Google Chrome, Mozilla Firefox, and Apple Safari. Microsoft Edge has similar development tools with slightly different navigation.
- Within the Inspect tool interface, click the element selector tool (typically located in the upper left corner of the developer panel). Then click on the specific element that should appear above the chat widget.
- Look through the highlighted code to locate the z-index CSS property associated with the selected element.
Note: Depending on how your website was built, the z-index may not be immediately visible. If you have difficulty locating this value, consult your development team to identify or add a z-index property to the element.
- Copy the numerical value associated with the z-index property.
- Log into the Rep Console at the following link: https://app.hellorep.ai/home
- In the left-hand menu, navigate to Settings > Chat Widget.
- Scroll down to locate the "Hide chat window under elements" toggle and switch it ON. Then, enter the z-index value you found in the previous steps into the corresponding input field.
- Click Save & Preview in the lower right corner to apply your changes. The widget layering adjustments should be reflected on your website immediately.
Need help or advice? Reach out to us at: support@hellorep.ai