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 form via URLs using GET parameters. However, their use differs depending on whether the module 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

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>

Mobile devices

The request for proposal form 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.

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.) Default language of the request for proposal form

5.) Default currency of the request for proposal form

The generation of the embedding code for the request for proposal form 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/request-for-rate/

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.

Parameterising the request for proposal form

In some cases, a guest may be required to arrive at the request for proposal form 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.

Embedded surface

Using an iFrame, the URL of the subpage where the request for proposal form is displayed must be filled with GET parameters. The parameters are listed separated by ‘&’ and prefixed with ‘rnw_’.

Example:

https://example.com/proposal/?rnw_lang=en&rnw_curr=EUR

Non-embedded (external) surface

Parameters are separated by “;”. It is important to note that the “;” character cannot be ignored after the last parameter value has been defined.

Example:

https://nethotelbooking.net/proposals/DEMO/lang=en;ca_currency=EUR;

Parameters you can enter

Embedded in	Without embedding	Description	Example
rnw_curr *	ca_currency	currency ISO code (3 characters, in capital letters)	HUF
rnw_lang	lang	ISO code for the language of the request for proposal form (2 characters)	hu

* The currency variable, defined in the embed code, overrides the value specified in the URL.

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.

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.

Embedding the request for proposal form into the website