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.

Website Widget

  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.  We recommend to set it up as a separate page, we often name it “Book Now”.
  3. Customer account widget – allows access to customer account where all booking and personal information can be manage. We recommend to set it up as separate page, we often name it “My Account”.

Integration

 Note: From version 3.9.0 widget integration has been simplified, so skip this tutorial and head directly to the software Settings -> Web Widgets where all information are.  The software version number can be found at the bottom left corner of the software.

Before starting integration, create website pages where the widget will be placed, then use of one following integration methods:

WordPress plugin

Step 1: To start download our free plugin, install and activate it in your website.

Step 2: Add the widget shortcodes to website pages you created. This shortcodes can be found in

Home:
[easytaxioffice type="booking-widget" url="__INSTALLATION_URL__"]

Booking:
[easytaxioffice type="booking" url="__INSTALLATION_URL__"]

My account:
[easytaxioffice type="customer" url="__INSTALLATION_URL__"]

Step 3: Replace “__INSTALLATION_URL__” with a URL that you access you software with e.g. https://booking.your-domain.com/ or https://your-domain.com/eto/

Step 4: Go back to software Settings -> General -> URLs section (see the image below), paste into indicated fields all widgets URLs you have created and tick option “Force widgets to be displayed in iframe”.

Step 5: That’s all. Enjoy!

 

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_URL__” with your own URL.

INSTALLATION_URL – it tells the widget where the software is installed and where to load it from. You can obtain this information from the URL which you use to login to booking admin panel.
a) If the login page URL is “https://your-domain.com/eto/login” then your installation URL is “https://your-domain.com/eto/“.
b) If the login page URL is “https://booking.your-domain.com/login” then your installation URL is “https://booking.your-domain.com/“.

Home:
<iframe src="__INSTALLATION_URL__/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_URL__/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_URL__/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>


Important!
You must replace “__INSTALLATION_URL__” with your own URL in all widgets listed above to make it work.

 

 

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!