Embedding the widget

With the reservation widget, guests book directly on your own website — no detour through portals and no commission. Embedding it is a one-time copy-and-paste step and takes about five minutes.

Copy the embed code

1. In the backoffice, open Settings → Widget.
2. Copy the HTML code shown (a <script> snippet).
3. Paste it wherever you want on your website — for example on a dedicated "Reserve" page. In site builders such as WordPress, Wix or Jimdo, use the HTML/embed block for this.

The color in the configurator is pre-filled with your brand color from Settings → Appearance (see Brand color). You can override it here at any time — the embed code always writes the chosen color as data-color. A snippet that is already live on your website therefore does not change when you set a different brand color later: copy the code again in that case.

Widget size

How large your widgets appear on your website is set for all of them at once under Settings → Appearance: Small, Normal or Large. Text, spacing, cards and buttons grow or shrink together. The default also applies to widgets that are already embedded — you do not need to touch your website. It can take a few minutes until the change shows there.

If one widget should differ, choose its size in the configurator: buttons freely in percent (50 to 200 %), cards, grids, lists and the calendar in the same three steps. The embed code then carries the size as data-size, for example data-size="l" or data-size="130"; without that line the default from Appearance applies. The window that opens after a click, the “Full page” form and the embedded request form keep their size.

Your widgets appear in our design on every website: your website's own CSS (fonts, colors, borders) no longer reaches into the widgets. You adapt them through the color and the size.

Whitelist your domain

For security reasons the widget only runs on domains you have approved. In the backoffice, enter your website address under Widget → Security (for example www.my-restaurant.com). The allow list applies to every widget — reservations, events, vouchers and group requests. With no entry the widget runs on any site; with an entry it shows an error message everywhere else.

Spam protection

The widget ships with multi-layer protection against automated bookings (including an invisible bot check). You do not need to configure anything — real guests never notice it.

Your own button on your website

Do you already have your own "Reserve" button or link on your website, for example in the menu or the header? Then that very button can open the reservation window. Add the line data-trigger to your embed code and enter how the widget recognises your button: a CSS selector, for example [data-reserve-table] or .book-now. A click on it opens the same as our button.

<script src="…/widget/v2.js?v=…"
        data-restaurant="your-business"
        data-trigger="[data-reserve-table]"></script>

<a href="/reservation" data-reserve-table>Book a table</a>

All other lines of your embed code stay as they are. The widget button itself may stay hidden: a container with display:none around the embed code is fine, the window still opens. Your link keeps its target — without JavaScript it still leads to your reservation page.

Accessible version

Below the widget there is a small "Accessible version" link. It opens the same booking form as a standalone page in a new window — without the embedded frame.

Guests using a screen reader or keyboard can complete their booking that way even if the embedded frame gives them trouble. There is nothing to set up; the link is there automatically.

The calendar variant is fully keyboard-operable as well: the arrow keys move between days, Page Up and Page Down switch months, Home and End jump to the start and end of a week, and Enter picks the day. Fully booked and past days are skipped.

When you pick your brand color in the configurator, the contrast against white is shown right below the color field (for example "Contrast with white: 3.8:1"). Below 4.5:1 the widget automatically switches text on colored areas to a dark tone and uses a slightly darker variant for text in your color — your brand stays recognisable and the text stays readable.

Embed one specific event

Instead of all upcoming dates you can show exactly one event on your page — for example on the subpage that is about that one course anyway. In the widget configurator, pick “One specific event” at the top, then the date and one of three forms:

• Card (data-variant="single") — a wide card with image, date, price, spots left, an excerpt of the description and a booking button.
• Button only (data-variant="button") — just the button. It opens the same booking window as the card. With data-label="Reserve a spot" you give it your own wording; without that line it reads “Book now”.
• Full page (data-variant="page") — the event's detail page appears right inside your page: image, gallery, date, location, price, description and cancellation terms, with the booking button below. Without our navigation, without a cookie banner, in your brand color.

The event itself appears in the embed code as data-event="…". If it is sold out, past or paused, the widget stays and says so — the button is then not clickable.

If the date is deleted or not yet published, it depends on the form you picked: with Card and Button only nothing is shown at all and your page stays intact. With Full page the frame shows a short notice instead — the frame itself stays visible, because it carries the page rather than waiting for data.

The domain allowlist applies to the embedded page as well: without your address on the list the frame shows an error message.

Vouchers: window or new tab

For the voucher widget you decide in the configurator where the purchase happens:

• Window (data-mode="modal") — the purchase opens in a window on top of your page, exactly like the events widget. Your visitors stay on your website.
• New tab (data-mode="redirect") — the checkout page opens in a new tab. This used to be the only option and stays in place for every existing embed.

Payment never happens inside the window. After submitting, the window shows the confirmation, and the pay button opens our payment page in the full browser window — so you and your customers can see the address bar. Payment providers require this.

A single voucher. Pick “One specific voucher” at the top and the widget shows exactly one instead of the list (data-coupon="12") — as a card (data-variant="single"), as a plain button (data-variant="button") or as the full checkout page inside a frame (data-variant="page"). The configurator fills in the number for you.

The domain whitelist applies to the window and the embedded checkout as well: without your address on the list the frame stays empty or shows an error.

Test that it works

1. Open your website and make a test reservation.
2. The booking appears immediately in the Day view and in the reservation list — which also completes the "test reservation" step of your Getting started list.
3. Afterwards, cancel the test booking from the reservation list.

Group and company requests

Larger parties, company events and closed groups use a form of their own — with occasion, preferred date, number of participants, budget and extras. You can offer it right on your website instead of only linking to your page with us.

You find the embed code in the backoffice under Widget → Group requests. It loads group-v2.js and understands these settings:

• data-variant="button" — a button on your page; the form opens on top of it. data-variant="inline" puts the form right into the page instead.
• data-mode="modal" — your visitor stays on your page. data-mode="redirect" opens our request page in a new tab instead, in the language data-lang names. Applies to the button only.
• data-label="Send a request" — your own button text. Without this line the widget default is used. With the embedded form it is the name of the frame a screen reader reads out.
• data-color and data-lang as with the other widgets.

The same domain approval applies as for the other widgets: without an approved address the form shows an error instead of opening. And the same spam protection — there is nothing to set up.

Requests arrive in the backoffice under Requests, exactly like the ones from our own page. Your plan needs to include group requests.

For event providers

For you, the widget shows your bookable events instead of a table calendar. Embedding works identically: copy the code, approve your domain, test. The menu item Settings → Widget takes you straight to the events widget; the domain allow list is in the same row of tabs under Security, where you enter it yourself.

The events widget can additionally show a period filter above the grid — two date fields and a weekday selector. You switch it on in the widget configurator; the embed code then contains the line data-filters="1". Filtering happens directly in your visitors' browser, no further data is loaded. Existing embeds are unaffected: without that line everything stays as it is. For the change to reach your website, copy the code once more and replace it.