For our In Page Price Check Messages, we will ask you to copy a snippet of code called the XPath. This short guide will walk you through step-by-step how to find it.
What is the XPath?
The XPath stands for XML Path Language and is used to identify elements on a page.
Why do we need the XPath?
To ensure your In Page Price Check 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 booking engine and run a search (any random search will do), you will then end up on your Rooms and Rates page.
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 In Page Price Check to go
Now with the menu opened, you can select 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 In Page Price Check to appear. In our example, we’ve selected the filters toolbar.
Once clicked, it will show where the HTML code is in the developer menu. The line highlighted will read '<div>…</div>' with a drop down cursor.
Not sure where to put your In Page Price Check? Hotels we work with place their message below the filter.
Step 3 - Copy XPath
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/div' you can now paste that into the XPath section on Message Design page.
If you can’t see In Page Price Check on your site after completing these steps, it might be that you have selected an element that changes during page load or after changing your booking criteria.
To find out what’s going on, navigate to your Rooms and Rates page and run a search for which you would expect Price Check to appear. Open up your developer tools panel, but this time, select the Console tab at the top of the panel.
If we cannot use your Xpath to identify where the In Page Price Check should go, a message will appear saying 'unable to locate placement selector for In Page message'.
Check again that you have selected the right element and copied the Xpath correctly (without deleting any letters, for example). Please also check that the element you've chosen doesn't change in any way when you run a search or reload the page, as this will prevent us from finding it.
If you’re still having trouble, don’t hesitate to contact email@example.com
In Page Price Check 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.