How to integrate Web Booking with your website?

If you are using software version 3.9.0 or higher then please navigate in your admin panel to Admin -> Settings -> Web Widgets page, it holds all necessary information needed for integration (copy and paste code).
If you use older version of the software, please continue to read the guide below.

 

This is a step by step guide.

 

Full integration is combine of three modules:

Mini Web Booking widget – is design to engage customer by quick and simple check of journey price. Choose From, To, Date and Time and price is display. A full booking will be continued through Full Web Booking widget.
Full Web Booking widget – allows to make a complete booking and take payments.
Customer account widget – allows customer to open account, makes new booking, manage existing bookings and user profile.

 

You need to create the following pages in your website and place the correct widget in it.

Home – mini web booking widget.
Booking – full web booking widget.
My account – customer account widget.

 

Once you have created all pages then you can use one of the integration methods below.

WordPress

Please download our free plugin, install and activate it in your website.
Next add the widget shortcodes to your pages like so:

Home:
[easytaxioffice type=”booking-widget”]

Booking:
[easytaxioffice type=”booking”]

My account:
[easytaxioffice type=”customer”]


Important!
In case the booking system is not installed in the default folder “/eto/” you also need to add url parameter to shortcodes tags which will point the widget to correct location.
Here is an example showing how to do it using any of the tags listed above. Just replace “__INSTALLATION_PATH__” with your installation path (Provided separately).

[easytaxioffice type=”booking” url=”__INSTALLATION_PATH__”]

INSTALLATION_PATH – This is the path where the booking software is installed.

iFrame

1. Please download a JavaScript plugin that will make iFrame to resize itself automatically when content height in the software changes.
2. Once you have downloaded the archive file, unzip it and upload the plugin file to your website “theme” or “root” directory folder.
3. Now add the JavaScript and CSS code below to your website <HEAD> tag and replace “__PATH_TO_JS_FILE__” with full path of the file uploaded in step 2.

<style>iframe#eto-iframe { width:1px; min-width:100%; border:0; }</style>

<script src="__PATH_TO_JS_FILE__/iframeResizer.min.js"></script>

Plain JavaScript:
<script>
iFrameResize({log:false, targetOrigin:'*', checkOrigin:false}, "iframe#eto-iframe");
</script>

or jQuery:
<script>
jQuery(document).ready(function($) {
$('iframe#eto-iframe').iFrameResize({log:false, targetOrigin:'*', checkOrigin:false});
});
</script>

4. Add HTML code below to each of your pages and replace “__INSTALLATION_PATH__” with your installation path (Provided separately).

INSTALLATION_PATH – This is the path where the booking software is installed.

Home:
<iframe src="__INSTALLATION_PATH__/booking/widget" name="eto-iframe" id="eto-iframe" class="eto-iframe" width="100%" height="250" scrolling="no" frameborder="0">This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe>

Booking:
<iframe src="__INSTALLATION_PATH__/booking" name="eto-iframe" id="eto-iframe" class="eto-iframe" width="100%" height="250" scrolling="no" frameborder="0">This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe>

My account:
<iframe src="__INSTALLATION_PATH__/customer" name="eto-iframe" id="eto-iframe" class="eto-iframe" width="100%" height="250" scrolling="no" frameborder="0">This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe>

 

The last thing you need to do is to update page URLs in booking software admin panel.

1. To do so, go to Admin -> Settings -> General -> URLs section (see the image below).
2. Update your website pages URLs, the ones you have created ealier on.
3. The last thing you need to do is to tick this option “Force widgets to be displayed in iframe”. This option will force the widgets to display only in your website instead of new page.
4. That’s all. Enjoy!