Use the new Epicuri Booking Widget on 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.



Embed with iframe

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


<iframe src="https://epicuri.co.uk/book-dynamic?id=543"/>


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



Embed source code

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


Files


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.


FileLocationPurpose
epicuribooking.csshttps://epicuri.co.uk/open/bookingwidget/epicuribooking.cssContains 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.jshttps://epicuri.co.uk/open/bookingwidget/jquery.jsThe version of jquery that the widget supports
jquery-validation.jshttps://epicuri.co.uk/open/bookingwidget/jquery-validation.jsThe version of jquery-validation that the widget supports
epicuribooking.jshttps://epicuri.co.uk/open/bookingwidget/epicuribooking.jsThe actual widget


Your API Token


If you joined Epicuri before January 2018 then this is the 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 know 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="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

   <!-- *** 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="http://epicuri.co.uk/open/bookingwidget/epicuribooking.css" 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="https://epicuri.co.uk/open/bookingwidget/jquery.js"></script>
    <script src="https://epicuri.co.uk/open/bookingwidget/jquery-validation.js"></script>
    <script src="https://epicuri.co.uk/open/bookingwidget/epicuribooking.js"></script>

    <!-- This will create the plugin on the element with an ID 'restaurant-plugin' -->
    <script>
        $(function () {
            $("#restaurant-plugin").epicuribooking({
                <!-- 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"
            });
        });
    </script>

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


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

  

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


  

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

  



Colours and Styles


The Javascript widget will always inherit CSS properties from the host website, which can be overridden 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 the 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.


LanguageCode
Englishen
Dutchnl


Setting the language changes the language of the widget as well as the emails sent on the 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.

 

WordPress


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


Squarespace


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.


Tumblr


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