SDK widget

Tech that brings you to the table...Turn every reservation into revenue.

Integrate the widget into your website with powerful options to customize the widget to your needs.

Enter the ID of your restaurant

No account yet but want to have a look? Use 361425.

Embed code

Install the widget effortlessly on every page of your website:

Change the variables as desired below and copy the code to embed it on your website.
Paste it into the code of each page of your website, right before the closing </body> tag. Only apply it once per page.

Not seeing the widget?
It is probably still disabled. But you can already install the widget while it is still offline.
You can preview the installed widget by adding an isPreview parameter to the URL of your website: https://myrestaurant.com/?isPreview=true
Enable preview mode

                    Embed code

SDK configuration

You can customize the widget configuration as you wish

Language

Color

Widget position

Hide button

Automatically open widget

Open delay

Number of guests

Partner ID

Disable GTM

Disable GA4

Send page views

SDK triggers

The widget can be opened and closed by adding a data-zc-action attribute on the element This is particularly useful when the widget doesn't automatically open and the button is hidden. For example:

                        <button data-zc-action="open">Open widget</button>
<button data-zc-action="close">Close widget</button>

You can also do this by triggering a hash change.

                        <a href="#zc-action-open">Open widget</a>
<a href="#zc-action-close">Close widget</a>

Try the buttons:

Analytics & Google Tag Manager

The widget automatically tracks user interactions and sends events to Google Tag Manager (GTM) and Google Analytics 4 (GA4) if they are installed on your website.

Configuration options

You can control analytics behavior using these data attributes:

data-disable-gtm="true" - Disable Google Tag Manager tracking
data-disable-ga4="true" - Disable Google Analytics 4 tracking
data-send-page-views="false" - Disable page view tracking (enabled by default)

Events automatically tracked

Event name	Description	Data sent
choose_pax	When user selects number of guests	pax
choose_date	When user selects a date	date
choose_slot	When user selects a time slot	slot, date, pax
choose_room	When user selects a dining room	room, date, pax, slot
booking_created	When booking is successfully created	bookingId, date, pax, slot, room

JavaScript Events

The widget dispatches JavaScript CustomEvents on the window object that you can listen to in your website code. This allows you to react to user actions and booking completion.

Booking completion example

Listen for the zc-widget-booking-completed event to redirect users to a thank you page after completing a booking:

<script>
window.addEventListener('zc-widget-booking-completed', function(e) {
  // Access booking details via e.detail
  console.log('Booking ID:', e.detail.bookingId);
  console.log('Date:', e.detail.date);
  console.log('Guests:', e.detail.pax);
  console.log('Time:', e.detail.slot);

  // Close the widget using hash action
  window.location.hash = 'zc-action-close';

  // Redirect to thank you page
  window.location.href = 'https://yoursite.com/thank-you/';
});
</script>

Available events

Event name	Description	e.detail contains
zc-widget-booking-completed	Fired when a booking is successfully created	bookingId, date, pax, slot, room
zc-widget-opened	Fired when the widget is opened	-
zc-widget-closed	Fired when the widget is closed	-
zc-widget-date-selected	Fired when user selects a date	date
zc-widget-pax-selected	Fired when user selects number of guests	pax
zc-widget-slot-selected	Fired when user selects a time slot	slot, date, pax
zc-widget-room-selected	Fired when user selects a dining room	room, date, pax, slot

Programmatic Control (ZenchefWidget API)

Control the widget programmatically using the global ZenchefWidget JavaScript API. This is similar to Formitable's FT.widgets API.

Available methods

Method	Description
`ZenchefWidget.open()`	Opens the booking widget
`ZenchefWidget.close()`	Closes the booking widget
`ZenchefWidget.toggle()`	Toggles the widget open/closed state
`ZenchefWidget.isOpened()`	Returns `true` if the widget is currently open
`ZenchefWidget.openWith(params)`	Opens the widget pre-configured with one or more parameters. Accepts `{ offerId?, day?, pax?, roomId? }`. Combine criteria in a single call, e.g. open on a date with a specific offer.
`ZenchefWidget.openOffer(offerId)`	Shortcut for `openWith({ offerId })`. Find the offer ID in your Zenchef settings.
`ZenchefWidget.on(event, callback)`	Subscribe to widget events. Returns an unsubscribe function.
`ZenchefWidget.off(event, callback)`	Unsubscribe from widget events

Basic usage example

<script>
// Open the widget programmatically
document.getElementById('my-reserve-button').addEventListener('click', function() {
  ZenchefWidget.open();
});

// Close the widget
document.getElementById('my-close-button').addEventListener('click', function() {
  ZenchefWidget.close();
});

// Toggle the widget (open if closed, close if open)
document.getElementById('my-toggle-button').addEventListener('click', function() {
  ZenchefWidget.toggle();
});

// Open widget with a specific offer/experience
document.getElementById('valentines-offer').addEventListener('click', function() {
  ZenchefWidget.openOffer('12345'); // Replace with your offer ID
});

// Open widget pre-configured (combine any of: offerId, day, pax, roomId)
document.getElementById('book-next-week').addEventListener('click', function() {
  ZenchefWidget.openWith({ day: '2026-06-10', pax: 4 });
});

// Check if widget is open before taking an action
if (ZenchefWidget.isOpened()) {
  console.log('Widget is currently open');
}
</script>

Booking completion with redirect (migration from Formitable)

If you're migrating from Formitable and used ft-widget-ordered, use this equivalent:

<script>
// Formitable equivalent: window.addEventListener('ft-widget-ordered', ...)
ZenchefWidget.on('booking-completed', function(e) {
  // Access booking details via e.detail
  console.log('Booking ID:', e.detail.bookingId);
  console.log('Date:', e.detail.date);
  console.log('Guests:', e.detail.pax);
  console.log('Time:', e.detail.slot);

  // Close the widget (equivalent to FT.widgets.get().close())
  ZenchefWidget.close();

  // Redirect to thank you page
  window.location.href = 'https://yoursite.com/thank-you/';
});
</script>

Event types for ZenchefWidget.on()

'booking-completed' - Booking successfully created
'opened' - Widget opened
'closed' - Widget closed
'date-selected' - User selected a date
'pax-selected' - User selected number of guests
'slot-selected' - User selected a time slot
'room-selected' - User selected a room

Pssst! Curious what it will look like on your website? Press ctrl + p on your keyboard and find out! 👀

Custom link

Want to create your own button or link that opens the widget? Use the following url.

                  https://bookings.zenchef.com/results?rid={restaurantId}

You can use the following additional query parameters:

To add parameters to your link, append them after the URL using &name=value. For example: https://bookings.zenchef.com/results?rid=12345&pax=4&day=2025-03-15

Parameter	Example value	Description
Booking Search & Filters
pax	4	Number of guests for the reservation
day	2025-03-15	Reservation date in YYYY-MM-DD format
slot	19:30	Time slot for the reservation (HH:MM format)
room_id	123	Specific room/area ID to book
waiting_list	true	Enable waiting list mode (boolean as string)
shxpid	456	Show a specific experience/offer (find the ID in your Zenchef settings)
Restaurant & Identification
rid	12345	Restaurant ID to load
UI Appearance & Theming
primaryColor	FF5733	Override primary color (hex without #)
hidelang	1	Hide language selector
User Pre-fill Data
firstname	John	Pre-fill first name in booking form
lastname	Doe	Pre-fill last name in booking form
email	john.doe@example.com	Pre-fill email address
phone	+33612345678	Pre-fill phone number
custom_field.*	custom_field.company=Acme	Pre-fill custom field values
Localization
lang	fr	Set interface language (en, fr, de, es, etc.)