The RESnWEB online booking system and its modules can be embedded into the accommodation’s website to provide a consistent, design-integrated user experience for the visitors who wants to make a reservation, seemingly running on its own URL. The interface also can be used on its external URL.
Data can be passed to the online booking system via URLs using GET parameters. However their use differs depending on whether the booking system is accessed directly or via an iframe.
Preconditions for embedding
The domain has a valid SSL certificate
The accommodation’s identifier and the embedding key are available to insert the code
May result in malfunction:
Compressing the code
Not using an SSL certificate
Use of another URL than the one agreed with the support team
(e.g.: https://example.com/booking instead of https://example.com/online-booking)Invalid embedding key
Incorrect accommodation identifier
Source code generation
In the extranet click on the Hotel information / For web developers menu item in the left menu.
In the table under the “Integration codes” tab, find the iframe key for which you want to generate the embed code.
Click on the “Edit” button highlighted in light blue.
In the pop-up window please fill in the required fields, then click on the “Generate source code” button.
Find the newly created embedding setting from the table and click on the copy icon to copy the source code to the clipboard.
1.) Summary information
2.) The RESnWEB module to be embedded
3.) CSS selector for identifying the Sticky header HTML element
4.) The position of the “Send me” pop-up button on the screen (bottom right or bottom left)
5.) Default language of the online booking system
6.) Default currency of the booking engine
The generation of the embedding code for the booking engine will be possible after the URLs of the subpages - including foreign language versions - where the interfaces will appear have been recorded in our system. For example: https://resnweb.com/en/demo-hotel-resnweb/online-booking/
In case you do not see the URLs for the interfaces in the list, please send them to info@resnweb.com email address. After the URLs have been set in the system, they will appear in the list and you will be able to generate the source code by clicking on the Edit button.
IMPORTANT! One URL per language and per interface can be recorded in the system. This means that if you want to make your interfaces accessible from several subpages of the website, you need to place a button on each of these subpages, linked the URL of the subpage where the given interface have been embedded. This way, whichever page the guests start from, they will be redirected to the same subpage.
Change the embedding settings
Click on the “Edit” button in the header highlighted in light blue.
From the drop-down list marked “Module”, select the module for which you want to change the embedding settings.
Make the changes you want, then click on “Save” button.
Embedding
In case of embedding, the code generated in RESnWEB extranet must be inserted after the opening <body> tag of the HTML document. The iframe is wedged into the DOM immediately after the inserted code, so the insertion point can be an important aspect.
The code generated in the “For web developers” menu item of the RESnWEB extranet looks like this:
Embed code sample
<script src="https://nethotelbooking.net/embed.RESnWEB.js?id=SAMPLE"></script>
Interface appearance
Desktop view: The interface should be integrated into the website in such a way, that 3 months are visible in the calendar, but not displayed in full page width.
Mobile view: The booking engine is optimised for mobile devices with a display width of at least 320 pixels. For a correct display, it is recommended to ensure that the embedded interface can be displayed in full screen width on these devices. This may require setting the padding and margin CSS properties of the HTML element containing the embed code to 0 for smaller displays.
In addition to enhancing the user experience, this setting is also important to ensure that there is no loss of functionality on mobile devices with smaller screens.
Booking button recommendations
On the button we recommend to display the term “Price calculation & Booking”.
The button should be placed on all relevant subpages so that the guests can easily find it. For example: Home, Hotel introduction, Room types, Gallery, Contact
To help you, we have collected further suggestions to increase direct bookings, which can be viewed by clicking on the button below.
Parameterising the online booking system
In some cases, a guest may be required to arrive at the booking interface using parameters that have already been set (e.g. the date picker used on the accommodation’s website). This can be achieved by constructing the URL accordingly.
Using an iFrame, the URL of the subpage where the booking system is displayed must be filled with GET parameters. The first parameter must be placed at the end of the URL of the interface after ‘?’. The parameters are listed separated by ‘&’ and prefixed with ‘rnw_’.
Example:
https://example.com/foglalas/?rnw_lang=hu&rnw_arrive=2020-09-21&rnw_departure=2020-09-26&rnw_roomrepls=2,1,3:2&rnw_curr=EUR&rnw_noredir=true
Parameters you can enter
Parameters | Description | Example |
|
rnw_arrive | date of arrival | 2020-01-01 |
|
rnw_departure | date of departure | 2020-01-02 |
|
rnw_roomrepls | number of guests * | 2,1,3:2,2,6,5 |
|
rnw_noredir | disable redirection | false |
|
rnw_code | promotional code | e.g.: returningguest |
|
rnw_curr | currency ISO code (3 characters, upper case) | HUF |
|
rnw_lang | booking interface language ISO code (2 characters) |
|
|
rnw_servicePackage | the given add-ons will be selected on the interface ** | 2547,2:5755 |
|
rnw_pinToTop | pinToTop | fixing the given room type on the top of the results list | 2117 |
* The number of guests is structured as follows:
** Additional services can be provided as follows:
The content of the parameter is the same in all cases. The identifier is mandatory, the number of items can be omitted, in which case the system counts with 1 piece.
Date picker settings
1. The guest should not be able to manually enter the date, but should be able to use the buttons
a) should be marked with Arrival and Departure, or
b) by default, the day of arrival should be the same day and the day of departure the next day or the third day.
2. Display the calendar by clicking on any area of the button
3. It is important that only future dates can be selected, so past dates must be disabled in the calendar.
Troubleshooting
Check that the accommodation ID and embed key are correct
When embedding within a content management system (CMS), it is worth using the browser's developer toolbar to make sure that the structure of the code you are pasting is compliant (the variable names are correct, the remote JavaScript file reference is correct).
Check, using the browser's development tools, that no errors occurred while the program was running.
Set automatic scroll
If the booking interface is embedded, the browser will scroll to the top of the iframe by default. However, the content of the website may justify directing the visitor to the top of the page. In the RESnWEB extranet, you can set the steps at which the browser scrolls to the top of the page. The setting can be done by following the instructions below:
Log in to the RESnWEB extranet
Click on 'Hotel information' in the main menu, then select 'For web developers' in the submenu that opens.
After this, find the 'Pages navigation' section.
Mark the steps in the booking process where you would like to direct the visitor to the top of the page.
To save the changes, click on the 'Save' button.
Use of sticky header
The sticky header on the website hides relevant information and functionality from our interfaces, so please make the following setting, which will allow the interface to take into account the height of the header and display the page content below it.
In the RESnWEB extranet, there is an option to set the fixed header in the "For Web developers" menu item.
You can use ID, class, and attributes as well.
E.g. #sticky-headers, .sticky-headers
IMPORTANT! HTML tag cannot be specified.