Overview

UserGuiding utilizes the z-index CSS property to overlay hotspot beacons on your web platform. This property controls the vertical stack order of UI elements: When a beacon’s stack order is higher than any other overlaid element, it becomes the topmost element on the page.

At UserGuiding, the default hotspot beacon’s z-index value is “9999”. Sometimes, this high value might conflict with an existing element in your web platform. In this article, we’ll explain how to modify the beacon z-index to overcome this conflict and display the page as it should.

You can change the default beacon z-index value inside our Chrome Extension. Go to the UserGuiding Panel, navigate to Hotspots under the Content section and select the one you want to adjust. Then, click on “Open in Extension.”

Alternatively, you can go directly to your web platform and click on the UserGuiding icon from your browser toolbar to access the Chrome extension. When it opens, click on “Hotspots,” select the desired group and then edit an individual Hotspot within the group.

When you open the hotspot, navigate to the “Beacon” tab. You can increase or decrease this number according to your specifications.

To avoid conflicts between a Beacon and an existing UI element and to make your page look as it should, you can adjust the Beacon z-index value to be higher or lower than the current z-index value of the existing UI elements.

If you are unsure of the z-index value for your UI elements, you can share this article with your development team.

Once you finish, click on Save and Publish Changes. This way, the existing UI elements will appear behind or in front of the beacon.