Zenchef SDK Widgets

Embed code

Install the Zenchef 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

                    Zenchef Embed code

SDK configuration

You can customize the widget configuration as you wish

Language

Color

Widget position

Hide button

Automatically open widget

Open delay

Iframe integration

We advise you to use the SDK embed code to install the widget on your website for the best experience.
However if this is not possible, you can also use the following iframe to add the widget to a page. Or link to the standalone booking page.

                            iframe code

You can use the following additional query parameters in the src of the iframe:

Parameter	Example value	Description
rid	361425	The id of the restaurant
lang	en	The language that the widget should be displayed in
primary-color	D129B5	Hex value of the primary color that the widget should be displayed with. Without the #.
pax	2	The number of people
day	2021-06-01	The date of the reservation

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:

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:

Parameter	Example value	Description
rid	361425	The id of the restaurant
lang	en	The language that the widget should be displayed in
primary-color	D129B5	Hex value of the primary color that the widget should be displayed with. Without the #.
pax	2	The number of people
day	2021-06-01	The date of the reservation

WordPress Integration

Install the Zenchef WordPress plugin effortlessly on your website. Click on the WordPress plugin button in order to install the reservation widget on your website.

Zenchef SDK widget