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

Iframe and Javascript

We offer two implementation plans; iframe and Javascript.

  • Iframe is simple, fast and secure.
  • Javascript has more advanced functionalities.

Iframe

The IFRAME is the most populair implementation. Responsive for mobile devices. Simple to use. Easy to customize. We recommend to use an iframe if you are satisfied with the settings below.

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>

JavaScript

The most powerfull implementation

Craft a beautiful reservation experience. Change colors, fonts, size and language. Edit the text and translations. Implement (requiered) options, selections, events, campaigns, prepaid reservations, deposits, tickets, credit card holds, terms and conditiuons, required fields, extra contact fields like street address, birthday, and more.



Language / Locale:





Paste this in the HEAD 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>

Paste this in the BODY of your page:

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

Page Link

Just a 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


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>
	  

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'> ..