How the widget works
The widget is a small Reservuj time picker inside your website. The client chooses a branch (if you have more than one), a service, a day and a free time up to 28 days ahead. Clicking a time opens a new Reservuj window where they sign in or register and confirm the booking. The widget itself writes nothing and uses no cookies.
What you need
- The business accepts bookings: it is launched and its e-mail is confirmed.
- At least one service in the price list and opening hours, so there is something to offer.
- A website on https into which you can insert a piece of HTML code.
1. Switch the widget on
In the administration, open Clients → Widget na web and tick Zapnout widget na web (switch the widget on). The company switches the widget on itself. Until you do, no website shows it.
2. Allow your website address
In the Povolené weby (allowed websites, one per line) field, enter the address of the website you will put the widget on — just the address, without a path. If the site runs both with and without www, enter both. You can allow at most 10 addresses, https only; a port is allowed. Then click Save.
https://www.vas-salon.cz
https://vas-salon.czThe widget is drawn only on allowed addresses. Otherwise anyone could put it on their site and pretend to be you.
3. Insert the code into your website
Below the settings is Kód k vložení (embed code). Choose the variant (a button with a window or a form right on the page), the button text and colour and click Copy. Insert the code where the button or form should be. The appearance is not stored, it is only in the code: after a change, insert the code again. The preview below the code shows what the client will see.
Your own website (HTML)
A button that opens a window with the time picker. Insert both lines where the button should be; the script is needed only once per page, even with several widgets.
<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="button" data-label="Rezervovat" data-color="#0e7c8c"></div>A form right in the page; its height adapts to the content.
<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="inline" data-label="Rezervovat" data-color="#0e7c8c"></div>WordPress
In the page editor, add a Custom HTML block and paste the code into it. If WordPress removes the script on saving (an account without permission to insert unfiltered HTML, or a plan that does not allow scripts), use the no-script variant or the link only.
Webnode, Wix and other site builders
Site builders usually have an element for inserting HTML code (Embed code, HTML, Embed). Some put it into their own frame on their own address: the button's window then opens only inside that frame, and if the frame's address is not among the allowed websites, only a booking link appears instead of the picker. In such a builder choose the form right on the page and make the frame at least 700 px high, or put the link from the link-only variant on the builder's own button.
Without a script and link only
If your website does not allow a foreign script, use the no-script variant (a plain iframe). It has a fixed height of 700 px and does not adapt to its content.
<iframe src="https://reservuj.cz/en/company/vas-podnik/widget" title="Rezervovat" style="width:100%;height:700px;border:0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"></iframe>If the website does not allow an iframe either, the link only leads straight to booking with your company.
<a href="https://reservuj.cz/en/company/vas-podnik/rezervovat?utm_source=web&utm_medium=booking_link&utm_campaign=vas-podnik" target="_blank" rel="noopener">Rezervovat</a>Customisation
The widget is set up by attributes of the div element from the embed code. Version 1 knows no other attributes.
| Attribute | Meaning |
|---|---|
data-reservuj-widget |
Your company's address in Reservuj, as in the link /company/vas-podnik. Required; lowercase letters without diacritics, digits and hyphens only. |
data-variant |
button = a button that opens a window (default); inline = a form right in the page. |
data-label |
The button text, default Rezervovat. Screen readers also read it as the window name. |
data-color |
The button colour as #rgb or #rrggbb, default #0e7c8c. Any other notation is not used. It does not change the look of the picker inside the window. |
- The campaign parameters utm_source, utm_medium, utm_campaign, utm_content and utm_term from your page address are passed on by the widget, all the way to the window where the client finishes the booking.
- If the page inserts the element later (for example after a click), call:
window.ReservujWidget && window.ReservujWidget.scan(); - When the window opens or the form is drawn, the element fires the reservuj:open event (detail.slug holds the company address) — useful for your own analytics.
document.addEventListener('reservuj:open', (event) => {
console.log('Reservuj widget', event.detail.slug);
});What the client sees
- A button with your text and colour. A click opens a window with the picker, full screen on a phone; it closes with the cross, the Esc key or a click outside.
- They choose a branch (only if you have more than one), a service, a day and a time. Prices in the widget are base prices; the client sees and confirms the final price when finishing.
- Clicking a time opens a new Reservuj window. A visitor who is not signed in sees Máte vybraný termín (you have a chosen time) and finishes the booking after signing in or registering. The choice is valid for 30 minutes, then the client picks a time again.
Common problems
Instead of the time picker there is only a button that opens booking in a new window
The widget did not report back within a few seconds and the code showed a fallback link. Most often the page address is not among the allowed websites: check https, the www and non-www variants and typos. The browser console then shows a frame-ancestors error. The widget behaves the same when it is switched off or the business does not accept bookings (see below).
Nothing appears on the website
The website or builder removed the code on saving, or your website's content security policy (CSP) blocks the script. If your website sends a Content-Security-Policy header, add the portal address to your rules:
Content-Security-Policy: script-src 'self' https://reservuj.cz; frame-src https://reservuj.czFor the no-script variant frame-src is enough. If you cannot change the CSP, use the link only.
The widget says online booking is not available here right now
The business is not taking bookings through the widget right now: the widget is switched off, the business e-mail is not confirmed, the business is not launched or it is suspended. Your website then shows a booking link instead of the picker; you see the message when you open the widget on its own. The administration says what is missing on the Widget na web page.
No service or no free time
No service can be booked online right now: the price list has no valid service for the default client category. There is no free time in the coming weeks: check the opening hours, the workers' shifts and how far ahead the service can be booked.
Too many requests at once right now
The widget slows down more than 60 requests per minute from one IP address (for example from one office). It goes through by itself within a minute.