Online Booking Implementation Guide

This guide is only available in English.

See how easy it is to implementing the online booking by DinnerBooking on the webpage of a restaurant or café.

The online booking can be implemented in two different ways: Booking box - Iframe

Using booking box

This is the recommended way to implementing the online booking.

Image link

Add the following HTML code to the page to have a image link:

<!-- DinnerBooking Booking Box Start -->
<link rel="stylesheet" type="text/css" href="http://i.dinnerbooking.com/js/bookbox/modalbox.css" />
<script type="text/javascript" src="http://i.dinnerbooking.com/js/bookbox/prototype.js"></script>
<script type="text/javascript" src="http://i.dinnerbooking.com/js/bookbox/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="http://i.dinnerbooking.com/js/bookbox/modalbox.js"></script>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, "load", function() {
	$$(".db_bookbox").each(function(element) {
		Event.observe(element, "click", function(event) {
			Event.stop(event);
			Modalbox.show("<iframe src=\"" + this.href + "\" width=\"400\" height=\"600\" frameborder=\"0\" style=\"border:0;width:100%\" allowtransparency=\"true\">Din browser underst&oslash;tter desv&aelig;rre ikke iframes.</iframe>", {title: this.title, width: 450});
			return false;
		}, false);
	})
});
//]]>
</script>
<p><a class="db_bookbox" href="http://demo.book.dinnerbooking.com/" title="Online Booking"><img src="http://i.dinnerbooking.com/img/book_online_black_dan.png" alt="Book dit bord online med DinnerBooking" /></a></p>
<!-- DinnerBooking Booking Box End -->

This will produce the following link:

Important: Remember to replace demo.book.dinnerbooking.com with the URL given to you by DinnerBooking.

You are free to use the graphics below on your website to promote your online booking. Graphics tend to have a better click rate than simple text links.

Click on each graphics to change the code above to match the colors of your website.

See the booking buttons in Danish / English.

Text link

Add the following HTML code to the page to have a text link:

<!-- DinnerBooking Booking Box Start -->
<link rel="stylesheet" type="text/css" href="http://i.dinnerbooking.com/js/bookbox/modalbox.css" />
<script type="text/javascript" src="http://i.dinnerbooking.com/js/bookbox/prototype.js"></script>
<script type="text/javascript" src="http://i.dinnerbooking.com/js/bookbox/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="http://i.dinnerbooking.com/js/bookbox/modalbox.js"></script>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, "load", function() {
	$$(".db_bookbox").each(function(element) {
		Event.observe(element, "click", function(event) {
			Event.stop(event);
			Modalbox.show("<iframe src=\"" + this.href + "\" width=\"400\" height=\"600\" frameborder=\"0\" style=\"border:0;width:100%\" allowtransparency=\"true\">Din browser underst&oslash;tter desv&aelig;rre ikke iframes.</iframe>", {title: this.title, width: 450});
			return false;
		}, false);
	})
});
//]]>
</script>
<p><a class="db_bookbox" href="http://demo.book.dinnerbooking.com/" title="Online Booking">Book dit bord online her</a></p>
<!-- DinnerBooking Booking Box End -->

This will produce the following link:

Book dit bord online her

Using iframe

Using an iframe, it will appear as if the online booking is a integrated part of your website.

Add the following HTML code to the page:

<iframe src="http://demo.book.dinnerbooking.com" width="400" height="700" frameborder="0" style="border:0;width:100%" allowtransparency="true">Din browser underst&oslash;tter desv&aelig;rre ikke iframes.</iframe>

Important: Remember to replace demo.book.dinnerbooking.com with the URL given to you by DinnerBooking.

© Copyright DinnerBooking 2010.