There are two ways of placing the Booking Engine Button on a Wordpress website: Using a WordPress widget or by placing the button with HTML only (this page).
This page gives you instructions on placing the button with HTML only.
About widgets
Widgets are tiny blocks that you can place in your WordPress sidebars, also known as widget-ready-areas. There are some important note about the use of widgets:
We recommend using an existing WordPress widget, which allows you to place our HTML into your website.
These widgets are not made by Hoteliers.com, therefore we do not support questions on updates and changes to any WordPress widget.
This article is just a suggestion how you can easily insert our HTML in a WordPress website.
If the widget which we recommended in this article stops to function, we will update this article with a new suggested widget. However it is up to you to make any updates to your WordPress website.
Installing a widget
...
To install a widget to your WordPress websiteIf you want to place the Booking Engine Button on a page without the “widget-ready-areas”, you can place the button between your regular page text using HTML only.
Placing HTML
To place HTML on a page:
Go to the Wordpress Dashboard
Go to “Plugins”
Search for "Insert Html Snippet" (by xyzscripts.com)
Click on “Install now”Pages” in the dashboard menu.
Click on “Activate”
Go to “XYZ Html”
Click on "Add new HTML Snippet".
Fill in:
"Tracking Name" for example "Hoteliers-com-booking button"
"HTML code" (see code below)
| Code Block |
|---|
<form method="post" action="https://scripts.hoteliers.com/api/v1/book-form" target="_blank" class="hoteliers-book-form">
<input type="hidden" name="hotel" value="{hotel}">
<input type="hidden" name="lang" value="{language}">
<button type="submit" class="hoteliers-book-form__button">Book now</button>
</form> |
For more possibilities see Booking Engine Button
Go to “View” -> “widgets”
Click on dropdown icon of "Insert Html Snippet" and choose a widget-ready-area
Enter a title, e.g. "Hoteliers Booking Button" or leave blank
Click on dropdown icon at “Choose Snippet” and choose "Hoteliers-com-booking button".
Click on "Save"
For more information, check https://developer.wordpress.org/themes/functionality/widgets/
Placing the booking Engine Button as HTML in a page text
Go to the Wordpress Dashboard
Go to “Pages”
Click on "Edit”
Click on the three dots on the right above "More tools & options".
Click on "Code editor"
Put the HTML code below on the desired spot in the text
...
"Edit” below the page name you wish to edit.
At the top right of the page, click on the three menu dots to open the "Code editor".
(This step can be different, depending on your WordPress setup. Find the “Code editor”.)Put the HTML code mentioned in the next paragraph, on the desired spot in the text.
Click on "Update" at the top right.
Click on "View page" at the bottom left.
| Note |
|---|
The layout and steps in the WordPress admin can be different depending on your WordPress theme and settings. Therefore, we cannot write an exact explanation on how to enter HTML code into your website. Most important is to find the place where you can enter HTML code. Ask your website creator for assistance if needed. |
HTML code
Replace {hotel} with your hotel ID and replace {language} with the correctlanguage code.
| Code Block | ||
|---|---|---|
| ||
<form method="post" action="https://scripts.hoteliers.com/api/v1/book-form" target="_blank" class="hoteliers-book-form">
<input type="hidden" name="hotel" value="{hotel}">
<input type="hidden" name="lang" value="{language}">
<button type="submit" class="hoteliers-book-form__button">Book now</button>
</form> |
| Info |
|---|
For more possibilities see Booking Engine Button |
...
Click on "Update" at the top right
...
. |
...
For more information, check https://wordpress.org/support/article/pages/
...