Customizing your z-index with the JavaScript API

Z-index is a term used to define where one HTML element sits numerically amongst others. The order is important as elements with higher values will be visible above those with a lower index.

The tawk.to widget defaults to a z-index of 2,000,000,000, a relatively high value, as it frequently needs to sit above other HTML elements. Using a lower index can often result in the widget operating normally but being invisible to visitors, as it would be hidden by other elements on your web page.

The maximum z-index value allowed is 2,147,483,647, so if you need a separate element to appear above the widget, you can simply specify its z-index to be 2,000,000,001 or above. Alternatively, if you prefer to alter the z-index of the widget, you can do so using the JavaScript API. 

Adding the JavaScript below to the embedded Widget Code will manually assign a new value to the z-index of the chat widget. To find your Widget Code, see this article: Where can I find the property and widget IDs?

Just add the center portion of the code below (lines 4-7) to your widget code before the end of the script as shown and replace the z-index with your desired numerical value. 

With a bit of creativity and testing, there’s no limit to the number of customizations you can make using the JavaScript API. For more ways to make changes to how the widget looks and behaves, check out our other JavaScript API articles in the tawk.to Help Center.

If you have other questions, don’t hesitate to reach out to our support team or schedule a call.