Getting Started

Introduction

This guide contains everything you need to either easily implement our reservation widget into your website, or create your own designed reservation experience. We believe that a beautiful reservation tool on your website will result in more online reservations. So your website deserves the best reservation experience, in order to turn visitors into guests.

Our widget has an iconic design and is fully customizable. It leans towards a minimalistic and neutral style. Our widget is completely white label, hence we do not show "powered by"-labels, links or logos.

Read more about how to use our widget - from straight and simple implementations to sophisticated and complicated reservation schemes with rules, options, selections, deposits, payments and more.


The reservation widget

Copy + Paste

Paste this in the BODY of your page:


<script type="text/javascript" src="https://www.etender-connect.com/widget/js/widget.js?accessKey=ENTER-YOUR-ACCESS-KEY-HERE&locale="></script>

<div id="etender-calendar-widget"></div>
	  

JavaScript



Language / Locale:


Paste this in the BODY of your page:


<script type="text/javascript" src="https://www.etender-connect.com/widget/js/widget.js?accessKey=ENTER-YOUR-ACCESS-KEY-HERE&locale="></script>

<div id="etender-calendar-widget"></div>
	  

Iframe


Language / Locale:
Font family:
Font color:
Background color:
Border color:
Base color:
Base text color:
Font color inactive/closed:
Link color:
Field color:
Hide company field:
Hide newsletter subscription:
Hide group reservation by email:
Hide group reservation by phone:

Reset to default

Paste this in the BODY of your page:

<iframe src="https://www.etender-connect.com/widget/?accessKey=56e3182eb928607406e2ed643b0ccba4844cff4b" width="500" height="500" frameborder="0" marginheight="0" marginwidth="0" allowtransparency="true" style="max-width:100%"></iframe>

Page Link

Click here

https://www.etender-connect.com/widget/?accessKey=ENTER-YOUR-ACCESS-KEY-HERE

Facebook

Book Now Button

Get more reservations from Facebook. Read here how to add a call-to-action button to your Page

Go to Facebook and add a button to Your Page. Choose BOOK SERVICES. Choose BOOK NOW. Enter the website below:

https://www.etender-connect.com/widget/?accessKey=ENTER-YOUR-ACCESS-KEY-HERE&ref=facebook&i

Tip: use the reservation page of your website instead


Styling

CSS 3

<style>
/* theme background color */
.etender-calendar-widget-theme {background-color:#0066cc;}
.etender-link,.etender-link:hover {color: #0066CC;}

/* show your email and/or phone to contact your bisuness for larger group sizes */
#etender-max-partysize-page-email {display:none;}
#etender-max-partysize-page-phone {display:none;}

/* show option to subscription to your newsletter */
#etender-reservation-newslettersubscription-control-group {display:none;}
</style>
	  

Language

Supported languages and locales

We support 19 languages and locales. If your language is not listed here, please contact us.


Text and Translations

Have the last word

All text and translations can be changed. We support 19 languages to change.

eTenderWidget.addLanguage("en", {
    "etender-label-change": "Change",
    "etender-label-restaurants-select": "Choose a restaurant:",
    "etender-label-partysize-select": "Select the party size",
    "etender-choose-partysize": "Make a choice",
    "etender-max-partysize-question": "More persons?",
    "etender-label-time-select": "Select the time",
    "etender-label-make-reservation": "Contact information",
    "etender-label-reservation-title": "Title",
    "etender-label-reservation-fullname": "Name",
    "etender-label-reservation-phone": "Phone",
    "etender-label-reservation-email": "Email",
    "etender-label-reservation-newslettersubscription": "Subscribe to newsletter?",
    "etender-label-reservation-company": "Company",
    "etender-label-reservation-address": "Address",
    "etender-label-reservation-postalcode": "Postal code",
    "etender-label-reservation-city": "City",
    "etender-label-reservation-country": "Country",
    "etender-label-reservation-birthdate": "Birthdate",
    "etender-reservation-creditcard-header": "Credit card",
    "etender-label-reservation-creditcard-number": "Credit card",
    "etender-label-reservation-creditcard-expiration": "Expiration",
    "etender-label-reservation-creditcard-expiration-month": "MM",
    "etender-label-reservation-creditcard-expiration-year": "YYYY",
    "etender-label-reservation-creditcard-cvv": "CVV",
    "etender-label-reservation-remarks": "Message",
    "etender-placeholder-reservation-remarks": "Message",
    "etender-button-post-reservation": "Make reservation",
    "etender-message-reservation-error": "There was an error creating your reservation. Please contact the restaurant or try again later.",
    "etender-message-reservation-success": "You will receive a confirmation email. Did you not receive anything? Then contact us.",
    "etender-tab-partysize-long": "Party size",
    "etender-tab-partysize-short": "Party size",
    "etender-label-persons-long": "persons",
    "etender-label-persons-short": "pers.",
    "etender-label-person-long": "person",
    "etender-tab-time": "Time",
    "etender-tab-date": "Date",
    "etender-titles": "Mr.,Mrs.",
    "etender-countries": "Netherlands,Belgium,Germany,France,Great Britain,United States",
    "etender-label-confirmation-page": "Thank you for your reservation",
    "etender-label-confirmation-page-error": "Something went wrong",
    "etender-label-max-partysize-page": "Contact us",
    "etender-label-max-partysize-page-infomessage": "For large groups please contact {0}.",
    "etender-label-prev": "Back",
    "etender-label-next": "Next",
    "etender-title-fixed-endtime": "Fixed end time",
    "etender-text-fixed-endtime": "Please note that your table is required to be returned by {0}.",
    "etender-title-cancellation": "Cancel reservation",
    "etender-text-cancellation": "Do you want to cancel your reservation?",
    "etender-btn-confirm-cancellation": "Cancel reservation",
    "etender-label-cancellation-page": "Cancellation processed",
    "etender-message-cancellation-success": "Your cancellation has been processed.",
    "etender-label-error": "Something went wrong",
    "etender-message-cancellation-error": "It is not possible to process your cancellation. Please contact us.",
    "etender-label-no-table-allocated-page-error": "No place available",
    "etender-message-no-table-allocated-error": "Unfortunately, there is no place for your party size. Please contact us.",
    "etender-label-reservation-not-found": "Not found",
    "etender-message-reservation-not-found": "The reservation is not found.",
    "etender-errormessage-reservation-fullname": "This name is invalid.",
    "etender-errormessage-reservation-phone": "This phone number is invalid.",
    "etender-errormessage-reservation-email": "This email address is invalid."
});
	  

Replace a text string

<div id='etender-widget-texts'>
	<div data-language='en' data-key='etender-choose-partysize' data-value='Select your party size'></div>
	<div data-language='nl' data-key='etender-choose-partysize' data-value='Selecteer aantal personen'></div>
</div>
	  

Full CSS rule-set

CSS 3

<style>
/* show your email and/or phone to contact your bisuness for larger group sizes */
#etender-max-partysize-page-email {display:none;}
#etender-max-partysize-page-phone {display:none;}

/* show option to subscription to your newsletter */
#etender-reservation-newslettersubscription-control-group {display:none;}

/* show comppany field in the contact form */
#etender-reservation-company-control-group {display:none;}

/* background color of the widget */
.etender-calendar-widget {background-color:#66cc00;}

/* show restaurant control group for multiple restaurants */
#etender-restaurants-container{display: block;}

/* text color */
.etender-calendar-widget * {color:#6600cc;}

/* text font family */
.etender-calendar-widget * {font-family: 'Arial';}

/* background color of the booking bar and buttons */
.etender-calendar-widget-theme {background-color:#cc0066;}

/* text color of the booking bar and buttons */
.etender-calendar-widget-theme {color:#cc6600;}

/* text color of links */
.etender-link,.etender-link:hover {color: #66cc00;}

/* border color of the widget */
.etender-calendar-widget {border-color:#6600cc;}

/* border color of the party sizes */
#etender-partysize-select div{border-color:#00cc66;}

/* border color of extra steps */
.etender-step-description {border-bottom:solid 1px #00cc66;}

/* border color of time slots and form fields */
#etender-calendar-container .timeslots .timeslot,.etender-calendar-widget .pure-form input[type=text],
.etender-calendar-widget .pure-form input[type=number],.etender-calendar-widget .pure-form input[type=search],
.etender-calendar-widget .pure-form input[type=tel],.etender-calendar-widget .pure-form input[type=color],
.etender-calendar-widget .pure-form input[type=password],.etender-calendar-widget .pure-form input[type=email],
.etender-calendar-widget .pure-form input[type=url],.etender-calendar-widget .pure-form input[type=date],
.etender-calendar-widget .pure-form input[type=month],.etender-calendar-widget .pure-form input[type=time],
.etender-calendar-widget .pure-form input[type=datetime],.etender-calendar-widget .pure-form input[type=datetime-local],
.etender-calendar-widget .pure-form input[type=week],.etender-calendar-widget .pure-form select,
.etender-calendar-widget .pure-form textarea {border-color:#cc6600}

/* background color of the calendar */
#etender-calendar-container .clndr-controls {border-bottom:solid 1px #cc0066}

/* background color of fields with an error */
.etender-calendar-widget .pure-form input.error,.etender-calendar-widget .pure-form select.error,.etender-calendar-widget .pure-form textarea.error{border:1px solid red}
.etender-calendar-widget .pure-form input[type=checkbox].error {outline:red solid 1px}

/* text color of inactive days and times */
.inactive,.etender-calendar-widget .inactive .glyphicon {color: #0066cc;}
.etender-calendar-widget .pure-form input[type=text],
.etender-calendar-widget .pure-form input[type=number],
.etender-calendar-widget .pure-form input[type=tel],
.etender-calendar-widget .pure-form input[type=email],
.etender-calendar-widget .pure-form select,
.etender-calendar-widget .pure-form textarea{background-color:#0066CC}

/* text color of placeholders in form fields */
.etender-calendar-widget ::-webkit-input-placeholder {color:#333}
.etender-calendar-widget :-ms-input-placeholder {color:#333}
.etender-calendar-widget :-moz-placeholder,.etender-calendar-widget ::-moz-placeholder {color:#333; opacity:1}
</style>
	  

Pagehooks

Process realtime conversions

A pagehook is a Javascript code that will be executed when a reservation is created or cancelled. You can use a pagehook to redirect the user to a custom URL or execute a script for site tracking. For example Google Analytics, Google Adwords or Facebook pixel.


Example 1

<script id="etender-confirmation-page-hook" type="text/template">
<!-- YOUR JAVASCRIPT CODE -->
</script>
	  

Example 2

<script id="etender-confirmation-page-hook" type="text/template">
<!-- REDIRECT TO A CUSTUM URL -->
window.location.replace("https://eTender.nl");
</script>
	  

Google Analytics

Get insights with Google Analytics

When a reservation is created or cancelled, Google Analytics will seamlessly track the conversion. See your customer engagement from Adwords and use powerfull marketing analytics solutions for your restaurant like Google Analytics 360, Google Tag Manager, Google Optimize and Google Data.

Gtag.js

The original global site tag contains two scripts.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>

<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXXXX-1');
</script>
	  

The first script should be placed outside the pagehook. The second script should be placed inside the pagehook and omit the enclosing script tags.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>

<script id="etender-confirmation-page-hook" type="text/template">
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'UA-XXXXXXXXX-1');
</script>
	  

Extra steps

Special messages, selections and options

The widget collects by default the date, party size and time in 3 simple steps. For special weekdays, range of dates, range of party sizes and/or a range of times there could be an extra step. For example to choose a section of the restaurant. Select adults, childeren and babies. Show an alert or warning. Promote a Christmas dinner. Select a deal or promotion. Enable creditcard garantuees above a specific party size and more. This powerful feature is very extented and has a lot of possibilities. Please contact us for more details.

The code below shows a simple message on every day of the week between 4:00 PM and 9:00 PM.

<script id='etender-calendar-widget-extra-steps' type='text/template'>
 <div class='etender-calendar-widget-extra-step' data-week-day='1,2,3,4,5,6,7' data-start-time='16:00' data-end-time='21:00'>
	<div class='etender-step-description'>Soup of the day</div>
	<p>Our soup of the day is: Champagne</p>
	<form class='pure-form pure-form-aligned'>
	 <fieldset>
	 <div class='pure-controls'>
	 <span id='etender-calendar-widget-back' class='etender-link'><%= phrases['etender-label-prev'] %></span>
	 <button type='submit' class='pure-button pure-button-primary etender-calendar-widget-theme' id='etender-calendar-widget-next'><%= phrases['etender-label-next'] %></button>
	 </div>
	 </fieldset>
	</form>
 </div>
</script>
	  

If your message should support multiple languages, you can use Phrases. For example in English and Dutch. More information

<script id='etender-calendar-widget-extra-steps' type='text/template'>
 <div class='etender-calendar-widget-extra-step' data-week-day='1,2,3,4,5,6,7' data-start-time='16:00' data-end-time='21:00'>
	<div class='etender-step-description'><%= phrases['etender-extra-steps-title'] %></div>
	<p><%= phrases['etender-extra-steps-text'] %></p>
	<form class='pure-form pure-form-aligned'>
	 <fieldset>
	 <div class='pure-controls'>
	 <span id='etender-calendar-widget-back' class='etender-link'><%= phrases['etender-label-prev'] %></span>
	 <button type='submit' class='pure-button pure-button-primary etender-calendar-widget-theme' id='etender-calendar-widget-next'><%= phrases['etender-label-next'] %></button>
	 </div>
	 </fieldset>
	</form>
 </div>
</script>
	  
<div id='etender-widget-texts'>
	<div data-language='en' data-key='etender-extra-steps-title' data-value='Soup of the day'></div>
	<div data-language='en' data-key='etender-extra-steps-text' data-value='Our soup of the day is: Champagne'></div>
	
	<div data-language='nl' data-key='etender-extra-steps-title' data-value='Soep van de dag'></div>
	<div data-language='nl' data-key='etender-extra-steps-text' data-value='Onze dagsoep is vandaag: Champagne'></div>
</div>
	  

Extra steps could be set for weekdays, range of dates, range of party sizes and/or a range of times.

To show an extra step for every day of the week:

.. <div class='etender-calendar-widget-extra-step' data-week-day='1,2,3,4,5,6,7' data-start-time='16:00' data-end-time='21:00'> ..
	  

To show an extra step from January 1st, 2018 to December 31nd, 2020 between 7:00 PM till 10:00 PM:

.. <div class='etender-calendar-widget-extra-step'data-start-date='2018-01-01' data-end-date='2020-12-31' data-start-time='19:00' data-end-time='22:00'> ..
	  

To show a extra step for a party size from 8 to 20 (and set creditcard required)

.. <div class='etender-calendar-widget-extra-step' data-min-party-size='8' data-max-party-size='20' data-creditcard-required='true'> ..
	  

Terms and Conditions

Let your guest accept your terms and conditions in order to make a reservation.

<script id='etender-calendar-widget-extra-steps' type='text/template'>
 <div class='etender-calendar-widget-extra-step' data-week-day='1,2,3,4,5,6,7' data-start-time='06:00' data-end-time='23:45'>
	<div class='etender-step-description'>Reserveringsvoorwaarden</div>
	<form class='pure-form pure-form-stacked'>
	 <fieldset>
	 <div class='pure-control-group'>
	 <input type='checkbox' class='form-control etender-additional-field' value='' required />
	 <span><%= phrases["etender-text-iagree"] %></span>
	 </div>
	 <div class='pure-controls'>
	 <span id='etender-calendar-widget-back' class='etender-link'><%= phrases['etender-label-prev'] %></span>
	 <button type='submit' class='pure-button pure-button-primary etender-calendar-widget-theme' id='etender-calendar-widget-next'><%= phrases['etender-label-next'] %></button>
	 </div>
	 </fieldset>
	</form>
 </div>
</script>
	  
<div id='etender-widget-texts'>
	<div data-language='nl' data-key='etender-text-iagree' data-value='Ik accepteer de voorwaarden ... ' /> 
	<div data-language='en' data-key='etender-text-iagree' data-value='I accept the terms and conditions ... ' /> 
</div>