The enhanced JavaScript booking widget is designed to have maximum browser compatibility (including mobile browsers!). Whilst the older widget worked, there were issues on some mobile devices that were intermittent and was fairly inflexible.

Use the new Epicuri Booking Widget in your own website for your customers to book tables at your restaurant. The widget puts bookings directly into your Epicuri calendar. Email alerts are also sent out to diners and restaurant managers.

The widget also supports multiple languages and its colour scheme can be tweaked to fit into your website.

Use of the widget is **free** for Epicuri subscribers.

Embed with iframe

This is the easiest way to get the widget into your website. Simply add the following to your website:

<iframe src=""/>

Where Epicuri Support will give you the id to put into your code. You may will be required to do some CSS or adjust the height of the iframe to accommodate for the widget. See here.

Embed source code

If iframe doesn't give you the flexibility you need, or you you need to tinker with the look and feel of the default widget, follow the instructions below.


Whenever there is a new release of the widget the Epicuri site will have the latest versions of the files. It is recommended that you always link to these locations from your website HTML as that will guarantee you get the latest features with minimal effort, as explained in this tutorial.

epicuribooking.css basic CSS selectors to style the default widget. You are welcome to override the selectors in your own CSS to style the widget as you wish
jquery.js version of jquery that the widget supports
jquery-validation.js version of jquery-validation that the widget supports
epicuribooking.js actual widget

Your API Token

If you joined Epicuri before January 2018 then this is your numeric App ID that you use on your waiter app. If you joined Epicuri after this time, then it will be a 16 digit alphanumeric code. Either way, please keep this safe! If at all possible, no one should now your token.

How to Embed the Widget

The latest widget is a little harder to embed than the older one. This is because some configuration is required to make it work for your site and to give you maximum flexibility.

Please see the sample.html for an example.

Step 1. Embed Script in <head>

Put this chunk of code into the <head> section:


<html xmlns="" lang="en" xml:lang="en">

   <!-- *** START OF CHUNK OF CODE TO INSERT *** -->

    <!-- Feel free to write your own css and plug it in to make the widget fit into your website-->
    <link href="" rel="stylesheet"/>

    <!-- Required libraries -->
    <!-- Feel free to download these and host on your own site, if you like... Be sure to keep up to date with upgrades in that case! -->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <!-- This will create the plugin on the element with an ID 'restaurant-plugin' -->
        $(function () {
                <!-- This is the alphanumeric ID you use on the Waiter App. Every restaurant has a unique ID -->
                apiId: 543,

                <!-- Language setting. Use valid language codes -->
                language : "en",

                <!-- These are the colours that you can configure -->
                backgroundColor: "#000",
                backgroundColorLight: "#202020",
                highlightColor: "#6A0623",
                highlightColorLight: "#A6102B",
                textColor: "white"

   <!-- *** END OF CHUNK OF CODE TO INSERT *** -->

    <!-- main body of your page -->


NOTE: Putting code in the head tag offers some performance advantages. However if your web platform does not allow for you to insert code into the head tag, you can simply add it to the body tag instead.


Step 2 Put the Widget in the <body> Tag


<!-- the actual booking widget - put in the appropriate place on your website -->
<div id="restaurant-plugin"></div>


Colours and Styles

The Javascript widget will always inherit CSS properties from the host website, which can be overriden with the properties as shown in the above example and  the epicuribooking.css. The implementor is free to change styles as required.

Basic changes to the colours can be made in the script initialisation section:


                backgroundColor: "#000",
                backgroundColorLight: "#202020",
                highlightColor: "#6A0623",
                highlightColorLight: "#A6102B",
                textColor: "white"


Setting the Language

Currently the widget supports English and Dutch. More languages are coming! If you require another language, please let us know.

You can set the language with the *language* parameter. English is default. Valid language codes are given below. Please note that if a language code is mistyped, the widget will always default to English. 

These language codes are case sensitive.


Setting the language changes the language of the widget as well as the emails sent on a reservation confirmation.

Working with External Site Providers

Each platform has its own way of allowing the user to edit HTML. To embed this booking widget HTML editing is a requirement. If you are working on a platform that does not allow you to edit the HTML to insert the code as explained above, you will need to develop a plugin for your platform to interact with the booking API directly. Please contact support for details about the API.



It is possible to directly edit HTML code in WordPress. Detailed information can be found here.


With a developer account it is possible to edit HTML directly, however without such an account it may not be possible to do so. There is an article here that explains how to do it. Please note that you cannot add the scripts to the header in SquareSpace. However this is not necessary - all tags described above can also be placed into the body tag of HTML.


HTML editing effectively creates a custom theme. HTML editing within the context of a custom theme is described here.