Zendesk Web Widget (Classic) comes with many settings and customization options. Sometimes you will need to specify the stack order of the Web Widget (Classic) in relation to the other content on your webpage. You can do this by setting the z-index value in the Web Widget (Classic) settings. This article highlights some basic cases of z-index to change how your widget is arranged with other elements on your website.
) in the upper-right hand corner of the Web Widget to open this article in a new browser tab.What is z-index ?
Explanation and definition of z-index
Z-index is a CSS property that is used to set the visibility and the positioning of overlapping content. When two elements overlap, the z-index will determine which element appears on top of the other. The z-index value can be assigned with an integer or global values such as inherit, initial and unset.
When using integers, the element’s z-index assigned to the highest index will appear in front of other elements. For example, if container A is assigned a z-index of 2 and container B is assigned a z-index of 1, container A will be positioned in front of container B. When using global values, the element will take the assigned position in relation to its parent’s value.
How does z-index relate to the Web Widget (Classic)?
Setting z-index for your own widget
There may be times when you want your content displayed in front of the Web Widget (Classic), or you’ll want to hide the Web Widget (Classic) behind other content entirely. This is where setting the z-index of the Web Widget (Classic) comes in handy.
How do I set the z-index for my Web Widget (Classic)?
Two options for setting z-index
You can set the z-index for your web widget in two ways:
- Use the
window.zESettingsobject. This will set thez-indexwhen the widget is first loaded. For more info on using thewindow.zESettingsobject, view our Developer documentation here. - Use the updateSettings API. This will allow the
z-indexto be updated at run-time. For more info on using the updateSettings API, view our Developer documentation here.
z-index setting defaults to an index of 999998 which means the widget will appear at the front of the screen unless another object’s z-index exceeds that number.Example using the window.zESettings object
The window.zESettings object lets you set the z-index on page load
In this example, we’ll set the z-index using the window.zESettings object. As a reminder, the window.zESettings object is loaded only when the widget boots. To update the z-index value at run-time using the updateSettings API, see the examples further below.
Here is how the page will look prior to any changes to the z-index value of the Web Widget (Classic). As expected, the Web Widget (Classic) appears on top of our other content:
In this example above, the z-index of our container element has not been explicitly set. That means the z-index of the container element will default to auto, which corresponds to 0. To hide the Web Widget (Classic), set the z-index value lower than 0 as shown here:
Now, when the page is loaded the Web Widget (Classic) will appear behind the container element. This is because the z-index value of the container element is higher than the z-index value of the Web Widget (Classic).
The new z-index value causes the Web Widget (Classic) to appear behind the other elements of the webpage.
Examples using the updateSettings API
The updateSettings API gives you flexibility to make changes in real time
In these examples you'll see the modal was given a z-index of 2. We will only change the z-index of the widget to either hide or bring it to the front of the screen.
Example 1: Hiding the Web Widget (Classic) behind the modal
In our first example, in order to hide the Web Widget (Classic) behind the modal we set the widget's z-index to 1 as seen below.
See it in action:
Example 2: Bring the Web Widget (Classic) to the front of the modal
With this example, we want the Web Widget (Classic) to show in front of the modal so that it is still accessible on the page. We will once again use zE webWidget to updateSettings and set the z-index to 3. This will effectively move the position of the Web Widget (Classic).
See it in action:
Summary and additional resources
See these links for more information
As a web developer you can choose the best method to set the z-index value of your Web Widget (Classic). The window.zESettings object gives you the ability to set the z-index on page load, whereas the updateSettings API gives you the flexibility to make changes in real time. For more information on customizing your widget, see the following:
Advanced customization of the Web Widget (Classic)
Our developer community
1 Comments
Big thank you to both @... and @... for creating the examples and content in this article!
Please sign in to leave a comment.