How to integrate Web Booking with a website?

This is a step by step guide explaining how to integrate Web Booking and Customer Account widgets with a website.

 Note: In software v3.9.0 or higher you can find this instruction in your software dashboard, go to Settings -> Web Widgets page. You will find there all necessary integration information (copy and paste codes).

An integration is combine of three modules:

  1. Mini Web Booking widget – is design to engage customer by quick and simple check of journey price. After step 1, customer will be redirect to Full Web Booking widget.
    In website we recommend to place this widget on the Homepage allowing full exposure to your customers.
  2. Full Web Booking widget – its a full three step version of the Web Booking place on separate page.
    In website we recommend to set it up as separate page, we often name it “Book Now”.
  3. Customer account widget – allows customer to open account, makes new booking, manage existing bookings and user profile.
    In website we recommend to set it up as separate page, we often name it “My Account”. 

 

To connect the widgets, first create the required pages, then use of one following integration methods:

WordPress plugin

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.

HTML

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!