It's really important that your personalized messaging works with the layout of your website, and doesn't hide other important content that customers need to see. With Triptease On-site Messages you can change the position of all Nudge, Price Check, Email Capture and Undercut Messages on your desktop website. For Nudge and Price Check Messages (which are both available as mobile messages) it is also possible to customize their position on mobile, independently from desktop. Inline Messages require a slightly different setup, which you can read about here.
While it's great that you can customize exactly where a message appears, this can make it more likely that you:
Might create a message that overlaps an important piece of content on your website
Could have multiple Triptease Messages set up to appear in the same place on the same page of your website
Using the z-index to stop Triptease Messages overlapping with other website content
The 'z-index' is an input that's useful when multiple pieces of content sit on top of each other on the same page. Triptease Messages controls how a message will 'layer' on the screen in relation to other messages that might appear on your customer's device at the same time. This is really important when you want your personalized content to appear above your main website but beneath something like your cookie consent banner.
To edit the z-index of your message, scroll down to the 'Message Position' section of the design tab and switch off the 'Default z-index' toggle. This will allow you to input your own custom z-index for your message. So, if you have three content elements on your page and you would like your cookie banner to appear first, followed by your Targeted Message, you'll need to give your cookie banner a z-index of '1', the Message should be set to '2', and your other website content set to '3'. This will ensure that your content layers up on your website in the right way.
Please note that you can only control the z-index of your Triptease Messages from the Triptease platform - your other content z-indices will need to be controlled from their respective content management systems, or by your engineering team.
How Triptease Messages are prioritized in relation to each other
When customizing the position of your messages, it's possible that you may set up multiple messages to appear in the same place on the same page.
We've created some prioritization rules to ensure that you don't end up clashing Triptease Messages on your website, as this provides a bad user experience for your customers.
If the customer is on a rooms and rates page, Price Check will appear in place of any other message. This is because when the visitors run a search, price comparison information is the most compelling content they could see at that point in their journey.
On any other page, there is a priority order for all messages so that customers will never see multiple overlapping messages:
Price Check
Email Capture
Nudge
Notifications
Undercut
For the time being, Notifications still only appear in the top right of the page and their positioning is not customizable. For all other messages, they will appear according to the prioritization rules above.