Customer Onboarding Manager Nicole Teunissen.
E-mail: nicole.teunissen@zenchef.com.
Phone: +31) 085 799 0157

1. Zenchef e-mails a link like https://sdk.zenchef.com/configure.html?restaurant=123456 where 123456 is the restaurant ID.
2. This opens the page with the embed script, example below
3. Change the ‘Automatically open widget’ setting to false so it doesn’t open with each page load.
4. You may need to select the language if you add the widget to a multilingual website
5. The copy & paste the script in the Divi Theme Options » Integrations » body.
6. More installation info available at: https://help.zenchef.com/hc/en-gb/articles/16059778163869-How-to-Install-the-ZenchefOS-SDK-Widget

Example script:

<!-- START Zenchef Widget SDK -->
<script>
  ;(function (d, s, id) {
    const el = d.getElementsByTagName(s)[0]
    if (d.getElementById(id) || el.parentNode == null) return
    var js = d.createElement(s)
    js.id = id
    js.src = 'https://sdk.zenchef.com/v1/sdk.min.js'
    el.parentNode.insertBefore(js, el)
  })(document, 'script', 'zenchef-sdk')
</script>
<div class="zc-widget-config"
   data-restaurant="123456"
   data-lang=""
   data-open="">
</div>
<!-- END Zenchef Widget SDK -->Code language: HTML, XML (xml)

Open widget anchor links

Use the following anchors to open or close the widget. Add them in the WordPress navigation, inline in text, Divi buttons etc.

• Open widget: #zc-action-open
• Close widget: #zc-action-close

BUG 28-04-2025: the anchor only works once if you open the widget with the #zc-action-open anchor and then close the widget with the close ‘X’ in the upper right corner of the widget.

Open/close button

You can create a html html button to open/close the widget. Style it like default Divi customizer button by adding the class=”et_pb_button”.

<button class="et_pb_button" data-zc-action="open">Open
widget</button>
<button class="et_pb_button" data-zc-action="close">Close
widget</button>Code language: HTML, XML (xml)

Direct links

• Reservations: https://bookings.zenchef.com/results?rid=123456
• Giftvoucher: https://bookings.zenchef.com/shop?rid=123456
• Menu: https://menuwidget.zenchef.com/v4.php?rid=123456

Parameters

• rid=RestaurantID
• lang=en
• primaryColor=d129b5
• pax=2
• day=2021-06-01

Iframe

Embedding the widget with an iframe is not ideal, but can be done as follows:

<iframe src='
https://bookings.zenchef.com/results?rid=123456&pid=1001&lang=en'
frameborder='0' scrolling='yes' width='100%' height='630'
style='display: block; margin: 0 auto; max-width: 600px;
height:630px;'></iframe>Code language: HTML, XML (xml)

WordPress plugin

This WordPress plugin is not needed if you integrate with the script from above.

Open widget with any anchor link

If a restaurant switched from reservation system, you can either replace all existing anchor links with the ZenChef Anchor, or you can make existing anchor links to open the ZenChef widget.

For example if a restaurant uses Formitable with the #ft-open anchor link, and they switch to ZenChef, you can add the following jquery script to dynamically adds the ZwenChef action open attribute to #ft-open anchor links. Add this script in the Divi theme options, in addition to the standard ZenChef script.

<script>
jQuery(document).ready(function($) {
$('a[href="#ft-open"]').attr('data-zc-action', 'open');
});
</script>Code language: HTML, XML (xml)