Embedding in the web

If you have your own website, it may be interesting for you and your customers to offer a reservation system integrated directly into the website. In the familiar appearance respectively at a well-known address, customers can take full advantage of the reservation system and book your dates.

While integrating a reservation system into other websites can be an interesting option when communicating with customers, we always recommend considering the advantages and disadvantages of the particular solution used. In some cases, it may be significantly more efficient to use a direct link to a reservation page to offer customers full comfort when working with the reservation system.

There are several ways to link the reservation system to an existing website. Individual variations require different levels of reach to an existing site and offer different forms of connectivity from a customer perspective.

Direct insertion into a web page

The most comprehensive way of integrating a reservation system into a website is by directly embedding it in the content of a particular page. For a visitor to your site, this means that the reservation system sees it immediately as they browse your site and can start the reservation process right away. At the same time, it is always on the given website and does not come into contact with its own web address of the reservation page on which you operate the system.

The technical solution is based on inserting specially generated HTML code, which can be found in the reenio administration. You need to copy and paste it into a specific location in the web page content. In some cases it may be very easy to interfere with the content of the site, in other cases it may be necessary to intervene with the web developer. It depends on how your website is operated and managed.

Settings - Embed into the web page - Embedding into page

When generating the embed code, you can influence the appearance and behavior using specific settings. It is possible to specify the color scheme of the reservation page (the color chosen is independent of the main color of the reservation page), the language of the page, the way information is displayed, etc. Within "Advanced settings" it is possible to insert a direct link to the event when the displayed content of the inserted reservation page will correspond to the set parameters of the link (see below).

If the customer's internet browser does not allow the correct display and functioning of the reservation system inside your website, only the button for direct access to the reservation page will be displayed.

When inserting a reservation system into another website, it should be taken into account that its appearance may be affected by the appearance and design of the host page. We recommend that you always try the website, including functionality on mobile devices.

Analytical tools

If a reservation page is embedded into another website, it is important to note that the reservation page does not become a full part of the host site, but is a separate embedded element, even though it may not be visually obvious to the visitor. So in this case, we are technically dealing with two different sites with different parameters and originating from different domains. This tends to be a problem especially when different analytics and conversion data needs to be measured, where the event generated on the reservation page does not affect the measurement on the host page.

This situation can be solved by extending the reservation page insertion code by the function call, using the "data-reservation-created" attribute. This function, run in the user's browser, can then implement any custom events or measurements that will point to the host site domain excatly at the moment of new reservation has created. For more information, see the API chapter.

<div class="reenio-iframe" data-size="auto" data-reservation-created="onReservationCreated"></div>
<script src="........." async defer></script>

Specific parameters

In some situations, when inserting a booking page into the host webpage, it may be appropriate to hide some standard elements. This can be done with special parameters used in the URL in general, or as an HTML parameter data-url in the embed code.

https://demo.reenio.cz/cs/iframe/#/terms;hideFooter=2;hideMenu=2;hideResources=2;hideCalendar=2;viewMode=day

<div class="reenio-iframe" data-size="auto" data-url="/terms;hideFooter=2;hideMenu=2;hideResources=2;hideCalendar=2"></div>
<script src="........." async defer></script>

Insert as a reservation button

The second way to integrate the reservation system into any website is to insert a so-called "reservation button". Here is procedure and technical solution very similar to direct web insertion, ie it is necessary to insert specially generated code in a specific place in the page.

Settings - Embed into the web page - Reservation button

The difference from direct insertion is that the page does not insert the entire reservation system, but only a button. After clicking this button, the visitor is automatically redirected to a full reservation page or this page is displayed in a dialog box above your website (according to your settings). When setting up the integration code, you can again take advantage of a number of customization options, including entering a special address to display only a specific event.

Common internet links

If you do not want or cannot insert special code into your pages, you can use common links in various forms. All you have to do is copy the corresponding web address and then paste it as a classic link in the text, a link in the picture, a link as a button in your website design or you can also use these addresses off-line in leaflets, etc.

Settings - Reservation page - Basic settings - Address

Main address of your reservation page can be found in the administration tab in the Settings tab or by clicking on the globe icon in the upper right corner. Using, this address will provide direct access to the initial view of your reservation page. If you want to direct customers more specifically, the ideal way is to use the generated link to a specific event.

When sharing web addresses by copying from the web browser's address bar, keep in mind that the address may be affected by whether you are signed in, etc., and may not work the same for all users. Under no circumstances do you share or copy these addresses while working in reenio administration!

Links to specific events

If you want to direct visitors to a specific offer to make a reservation, ie a specific event, you have the opportunity to generate a link (URL) that will make this easier. The tool for generating these addresses can be found when editing a specific event and will be displayed by clicking the button in the upper right corner. Within a specific address, you are also able to control how to display the calendar, guidepost, or specify a specific date. This allows you to create links that will allow you to book only one specific date, which is especially useful if you manage a signpost to offer your services through your own website.

Events - (Editing event) - Link to event

You can continue to use the link to this event as you need:

  • included code setting for web page insertion (advanced settings)
  • included code setting for reservation button (advanced settings)
  • regular internet link for placement anywhere on web pages
  • URL distributed to customers (e-mail, print promotion, etc.)

Button on Facebook page

If you also run a Facebook page for your business, it is very effective to link it to the reenio reservation page. As a result, visitors to your Facebook page will immediately know that you are also offering direct reservations and can initiate the reservation process with one click. How to make this connection is very simple.

  1. Log in to manage your Facebook page (you must have the appropriate permissions).
  2. At the top of the page you will see a Add "button already set a button from before. After clicking on it, the dialog for setting the button resp. menu, whether you want to cancel or edit an existing button.
  3. From the menu, select booking item and click "Next".
  4. Next, select Site Link and enter your reservation page address. As a link you can use not only the main address of the page, but also any link, eg to a specific event see above - the possibility of generating links.
  5. Complete the button setup wizard and from now on you already have a button on your Facebook page with a direct link to the reservation.