For our Inline Messages and In Page Price Check, we will ask you to copy a snippet of code called the XPath. This short guide will walk you through step-by-step on how to find it.
What is the XPath?
The XPath stands for XML Path Language and is used to identify elements on a page (elements are essentially the building blocks of your website such as images, paragraphs and headers).
Why do we need the XPath?
To ensure your message is correctly positioned on your booking engine, we need a snippet of code to identify the message location. The entire process takes less than 60 seconds and although we have mentioned the word "code", it is very easy to find!
Video tutorial on how to find the XPath
Step 1 - Open the developer menu
Go to your hotel marketing website or booking engine website.
For Chrome, Firefox and Edge users: right-click anywhere on the screen and from the dropdown menu choose 'inspect'.
For Safari users: right-click anywhere from the screen and from the dropdown menu choose 'inspect element'.
Can't see it on Safari? Go into Safari Menu > Preferences > Advanced Menu > Enable Developer Tool Menu > Right-click again and choose 'inspect element'
This will now open the 'developer menu' where you can essentially see the backend of your webpage. It’s a lot of HTML, but you can ignore most of it.
Step 2: Select where you want your message to go
Now with the menu opened, you can click the 'select element tool' located in the top left of the menu.
Once you’ve done this, you’ll see that you can hover your cursor over different elements of your webpage. Any section highlighted on your webpage will then navigate to the relevant section on the developer menu.
Click to select the element of your page that is directly above where you would like your message to appear.
Once clicked, it will show where the HTML code is in the developer menu. Click on the outermost element that’s relevant. The line highlighted will read '<div>…</div>'. However, in some cases, the element selected can read <section>, <p>, <span>
Step 3 - Copy XPath and use the preview tool
Right-click the highlighted section of code in your developer menu and choose ‘Copy > Copy XPath’.
You now have your XPath! It should look similar to '://*[@id="mainContent"]/div[2]/div[3]' you can now paste that into the XPath section on Message Design page.
You can preview the message by using the preview tool. Please insert the URL you would like to view the message on.
FAQs
Why is my XPath not showing in the preview tool?
Check to see if you have selected the outer most part of the container. Most commonly the line you need to copy will start with <div class>. Make sure you do not delete any letter when pasting it in the XPath bar.
If you are displaying the message on a group page, make sure “show on group pages” is ticked under behaviour.
Make sure the section you want the message to appear is not hidden on the webpage e.g on a members only menu.
How can I preview on mobile?
Currently, you can only preview a message on mobile from your desktop. Here’s how to do it
Go into audience > device > desktop
Follow the same process in finding the XPath.
Click preview message
Minimise the screen size to match with mobile screen
Remember to switch back to mobile targeting once you are happy with the message!
Will the message appear above or below the selected element?
The message will always appear below the selected area.
I have the option to copy the ‘full XPath and XPath?’ Which one do I pick?
While both will still work, by copying the full XPath will mean if there are any changes to your website that appear above your message, will cause the XPath link to become invalid. Whereas XPath highlights that specific section. Therefore, we advise choosing ‘XPath’ over the full XPath.
Do I need to duplicate the message if I want it on multiple pages?
Typically, the design of your website will include templates that are duplicated across multiple webpages. Because of this, the XPath will remain the same and is assigned to that specific area on the webpage.
This means you do not need to duplicate multiple messages if you want the Inline message to appear on all pages.
Sometimes, you may find the XPath is different on your webpages, which will mean you will have to create separate messages and follow the same process is finding the XPath on the area you wish for the Inline message to appear.
If you do not want the Inline message to appear on certain pages, please go to behaviour and exclude the URL as you would with all other message types.
If you’re still having trouble, please do not hesitate to contact, we are more than happy to help customersuccess@triptease.com
Inline will not display on booking engines hosted in IFrames. If you think this may apply to you, contact one of our Direct Booking Coaches for further options.