Skip to main content

How to Fix Messages That Are Hidden or Covering Website Elements

Troubleshooting tips for resolving display issues with New Triptease Messages, whether they’re hidden behind other elements or overlapping important website content.

Updated this week

Overview

If your Triptease message is not displaying correctly, such as being hidden or overlapping key elements like checkout buttons, the issue is likely related to the z-index.

The z-index determines the layering order of elements on your site. A low value can cause the message to appear behind other content, while a high value ensures it appears on top.

This guide explains how to locate your message, check its z-index, and adjust it using the Creative Builder.

Step-by-Step Instructions

1. Locate the Message iframe on Your Website

  1. Open your website in a browser.

  2. Right-click anywhere on the page and select Inspect to open DevTools.

  3. In the Elements tab, press Cmd/Ctrl + F and search for Overlay Message.

  4. Locate the iframe element associated with the message.

  5. In the Styles panel, look for the z-index number

  6. The value controls whether the message appears above or below other elements. So if a low number is assigned like 1, then the message may appear behind site elements.

Note: If you can't find the iframe, make sure the message is active and set to display on that page.

2. Inspect the z-index in Browser DevTools

  1. Select the iframe element in DevTools.

  2. In the Styles panel, look for the z-index property.

  3. This value controls whether the message appears above or below other elements.

3. Check the z-index in the Creative Builder

  1. Open your message in the Creative Builder.

  2. On the right-hand Styles Panel, find the z-index field.

  3. Review the value:

    • A low value (e.g., 10–100) may cause the message to appear behind site elements.

    • A high value (e.g., 999999) ensures the message appears on top.

4. Adjust the z-index Value

  1. Click the z-index number in the Creative Builder.

  2. Enter a higher value, such as 999999, and save your changes.

  3. Refresh your website to check if the message now displays correctly.

  4. Adjust the value if needed to ensure it doesn't block key elements like buttons or menus.

Pro Tip: If changing the z-index doesn’t resolve the issue, try changing the message’s position in the Creative Builder (for example, move it from bottom-right to top-left).

FAQs / Troubleshooting

Why isn’t my message showing up in DevTools?

The message may not be active. Double-check targeting conditions and confirm it is set to appear on the current page.

What’s a safe z-index to use?

A value like 999999 is usually high enough to make the message visible above most site content.

Will z-index changes affect mobile views?

Yes. Always preview your message on mobile after making changes to confirm it appears correctly on all devices.

Did this answer your question?