beGadget Implementation

Overview

Implementing the beGadgets to your Website

beGadget Documentation

Implementation Recommendations

Other Considerations

beGadget Integration Examples

Support


 

Overview

The "beGadget" (Bookeasy Gadget) is the 'out-of-the box' booking engine that can be integrated and styled on destination websites, as seen on sites such as visitnewcastle.com.au, tourismwhitsundays.com.au, bendigotourism.com, byronbayaccom.net, etc.

The gadgets leverage the data provided via Bookeasy's Soap >> Json Proxy (SJP).

The beGadgets come with a generic/standard styling that can be restyled using CSS. There are 5 main gadgets that make up the process of a booking, each with their unique specific function. Each gadget also includes a number of "parameters" that can be introduced in order to enhance the user experience.

 

The Search Gadget

The Search Gadget

Simply put, this is the gadget that can "kick off" a search, generally found on a homepage and other generic pages.

The Region Gadget

The Region Gadget

This is the gadget that displays search results for all tourism operators of a specific category (i.e. accommodation/tours). Search results are either displayed as a direct result of search parameters entered via the Search Gadget, or due to default parameters set for when a guest lands directly on this page.

The Item Details and Cart Gadgets

The Item Details and Cart Gadgets

The Item Details Gadget displays a tourism operator's specific product, and also allows the guest to add a product item to the shopping cart. As a result, the Item Details gadget requires the presence of the Cart Gadget, which is the gadget that can display items in a guest's shopping cart.

The Booking Gadget

The Booking Gadget

This is the gadget that summarises a guest's cart items and allows them to finalise their sale by entering in their personal information and credit card details.

The Confirmation Gadget

The Confirmation Gadget

If used, the Confirmation Gadget is a gadget that allows for the display of a a summary PDF and "thank you" messaging.

 


  

Implementing the beGadgets to Your Website

The implementation process of the beGadgets is as follows:

  • You will need to provide beDigital with the Staging Domain URL (testing environment where the integration would be developed).
  • beDigital will then issue an authorisation key. This key is must be used in your beGadget's script call, otherwise your gadgets will not display on your staging domain.
  • Review the below recommended Best Practice Guidelines, including example sites.
  • Ensure you have purchased an SSL Certificate to ensure your Booking Gadget displays in browser over HTTPS without any security warnings.
  • Ensure the gadgets are responsive on all devices.
  • Advise beDigital when you are ready for us to review and test the beGadget integration (please allow us a 1-2 day window to do this)
  • Request a live gadget key & provide the applicable domain (you require a separate authorisation key when going into production in order for the beGadgets to display on your live production domain).

 

 

beGadget Documentation

You should familiarise yourself with the information contained in our Gadgets Documentation site before attempting to implement the beGadgets. 

The beGadget documentation can be reviewed here - http://gadgets.impartmedia.com/doc/

Below are our key recommendations as the objective should be to:

  • provide an excellent user experience
  • provide a seamless & simple booking flow
  • generate strong booking conversion

The documentation contains all of the necessary information required to complete integration projects using default gadget features.

Each type of gadget has a dedicated page within the documentation which contains detailed information. This information includes a list of all the available configuration parameters, which can be found in the column on the right of each gadget page, plus details of any inputs that are required and an explanation of how each parameter works.

Please ensure you read this documentation through carefully before requesting assistance in managing beGadget functionality for your development.

There is an allocation of time included in the beGadgets licence, for technical assistance, however this does not extend to items that are already documented. Assistance provided for elements clearly documented may incur charges.


 

Implementation Recommendations

Homepage

Position the Search Gadget in a prominent position within the first fold of the homepage, ensuring a strong and clear 'call to action'.

 

Booking Call to Action on all pages

Implement a Search Gadget on most if not ALL pages within your site (again should always be within the first fold of the page to attract action.

 

Styling

Ensure the beGadgets are styled to best complement your site's theme (i.e. Filters pane, Action Buttons, styling, borders, colour palette, etc) to provide a seamless experience for your users.

One of the primary advantages of inserted gadgets such as these is that you, the implementer, can use CSS on your site to change and mould the appearance of the gadgets to suit your site. The majority of styling requirements can be achieved only using CSS. There are also a number of alternatives for those with  more complex needs.


beGadgets are highly customisable by using only CSS styling.  Responsivenes can be achieved in the same manner as bootstrap, by using the same breakpoints (eg. http://getbootstrap.com/css/#grid-options)

To make it easy to figure out what CSS selector you need to address a particular part of a gadget, make a test page, then use Firefox and the add-on Firebug (the HTML tab). This tool is invaluable for figuring out what the DOM looks like after the gadget is running. Chrome, Safari, Opera and IE also have good developer tools.

We've created a sample CSS file that highlights the things you may want to re-style. This file is primarily a guide and only covers a few elements in each gadget, so if you're looking to restyle something that isn't in this file, check above for developer tools. You can download the sample css file here:

View sample gadget restyling CSS file

If you wish to create your own styling of the gadgets you can load the beGadgets with minimal CSS or No CSS at all and build your own styling from scratch.

Simply insert the below script above your gadget insertion on the page

<script type="text/javascript">
            BEcssOverride = "none";
        </script>

Or

<script type="text/javascript">
            BEcssOverride = "minimal";
        </script>

Some samples of different beGadgets styling are below:

http://www.visitnewcastle.com.au/
http://www.ministryofvillas.com/
http://www.margaretriver.com/
http://www.visitpeel.com.au/
http://www.alps2ocean.com/
http://www.ozbook.com.au/
http://www.parkstay.vic.gov.au/
http://www.mackayregion.com/

 

 

Display all bookable product

The 'showAll' parameters should be enabled as a default to both the REGION and ITEM Gadgets. Specifically showAllAccom | showAllTours | showAllEvents. This will display the Operators product regardless of availability to entice consumers to continue searching and generate more bookings. Having these applied will also ensure that users will not see the message: "Sorry, no results match your search criteria. Please change your dates and options and try searching again."

 

Hide or remove Operator contact details

Operator Profiles should not display PHONE | EMAIL | WEBSITE details in a prominent position - if at all. This is proven to be an absolute showstopper for a destination to generate online bookings. If required, we strongly suggest these details be buried down the bottom of the page or require an action to prompt their display

 

Operator Page Layout

Ensure the Operator Pages are clear, informative and have the Items Gadget located in a prominent position on the page, as with operator imagery (which is a proven feature to selling more

 

Responsive Gadgets

Mobile browser width needs to be fixed for all search results to avoid visitor needing to scroll horizontally.

 

Itinerary Summary PDF

By default the PDF summary that is generated from a successful booking will have the following sections:

Header
The business name and contact details associated with the visitor centre ID (VCID) that was used in the booking gadget

Thank you message
A custom message that can be configured in the Bookeasy console

Itinerary Summary
A summary of the booking and customer details

Itinerary Items
An itemised list of products that have been purchased

Terms and Conditions
A custom text field that is configured in the Bookeasy console

 

ITINERARY PDF HEADER IMAGE

It is possible to add your own logo to the top of the Itinerary PDF summary. To achieve this, this first step is to create a css file which contains a reference to the desired logo image.

#HeaderContainer { width:100%; height:300px; background:#FFFFFF url(../images/itinerary-logo.jpg) no-repeat center top; }

It is recommend that the css height be used to provide sufficient vertical space to comfortably display the logo image.  It is also a good idea to centre the image using the background attribute.

The final step is to supply an additional parameter 'itineraryCSS' to the booking gadget. This parameter takes a string value which is a link to the custom css file created in the previous step

<div id="bookingGadget"></div>


  <script type="text/javascript" src="//gadgets.impartmedia.com/gadgets.jsz?key=xxxxxxxxxxxxxxxxxxxxxx"></script>

  <script type="text/javascript">

    // Start Gadget initialisation code

    $w(function() {

      BE.gadget.book('#bookingGadget',{

        vcID:XXX,

        itineraryCSS: '/css/itinerary-pdf.css'

      });

    }); // End Gadget initialisation code

  </script>

 

 

Recommended Parameters

showAll
showAllAccom | showAllTours | showAllEvents should be applied to both the REGION and ITEM Gadgets.
This should be applied so in the scenario when a user visits an operator profile directly or further inspects an operator that does not have availability for all dates selected, they will not see the message: Sorry, no results match your search criteria. Please change your dates and options and try searching again.

bookingStatus
This is nice customisable feature that allows you to modify the default 'Sold' term to something more enticing to promote more bookings.  Terms such as Enquire | Request | or even the VIC's Contact Number are encouraged instead of the default.

Inline parameters
These are parameters that will enable the display of the operator's descriptions inline rather than a hover which is far more mobile friendly and strongly encouraged.  This would be a default feature, however cannot at present due to some clients interpretation of the gadgets styling.

Region:

• showRoomDetails: true
• showRoomDetailsInline: true
• showHoverInline: true

Item:

• descriptionHovershow: true
• hoverInline: true

showRoomDetails
At the REGION Gadget level, you can apply a parameter that allows the user to view the Operator's product on the same page rather than having to drill down to the Operator Profile and perhaps back again. When applied, and should the user select Book Now against the product itself, the user will bypass the Operator Profile altogether and be taken directly to the BOOKING gadget, meaning reduced steps to actually make a reservation. If they want more information, the user can select the Operator Name and be taken to the Operator Profile as per the default process. To be deemed an optional feature, perhaps worth trialling initially or seeking a business decision.

 


Best Practice

To ensure the site is designed to attract optimal viewing and maximise conversion rates, we encourage the following guidelines to the beGadget integration:

  • Position the Search Gadget in a prominent position within the first fold of the homepage, ensuring a strong and clear 'call to action'
  • Implement a Search Gadget on most if not ALL pages within your site (again should always be within the first fold of the page to attract action)
  • Ensure the beGadgets are styled to best complement your site's theme (I.e. filters pane, action buttons, styling, borders, colour palette, etc) to provide a seamless experience for your users
  • Default the 'Results Gadgets' sort order to 'Instant'. I.e. Gold Operators over Request Based. This will entice real-time bookings from your consumers, and will entice your Operators to transition from '24hr' to 'Instant'.
  • Operator Profiles should not display the Operator PHONE | EMAIL | WEBSITE details if they have bookable product. Doing so is proven to be an absolute showstopper for a destination to generate online bookings.  If required, we strongly suggest these details require an action to prompt their display.
  • Ensure the Operator Pages are clear, informative and have the Items Gadget located in a prominent position on the page, as with operator imagery (which is a proven feature to selling more).
  • Set your sites' default search nights to 3, 5 or 7 depending on how they render. This provides that 'grid view' that is deemed industry common, doing so should entice longer stays as well as generate more bookings due to increased transparency.


  


Other Considerations

  • Be wary of other elements as 'Site Search' and 'Business Directories' when integrating the booking engine. It is imperative to avoid duplicate Operator Profiles and ensure a seamless user experience.

  • To ensure the beGadgets propagate on your website, ensure that you redirect your website's non-www domain URL to the www domain URL (or vice versa, depending on which domain URL version you have been provisioned a beGadget Authorisation Key for).  For example, if Impart Media has provisioned a beGadget Authorisation Key for www.yourdomain.com, ensure that you redirect yourdomain.com to www.yourdomain.com.  If you don't then anyone landing on the yourdomain.com version of your website will not see the beGadgets displayed and will be unable to make bookings.  This will also assist your website's SEO and search engine indexing.

 


Inter-gadget communication issues

Due to the inter-gadget communication that occurs (some beGadgets rely on the existence of others), you can not have more than one instance of each gadget component initialised on a single page. 

Avoid placing two gadgets on the same page within your site. The only exception to this rule is that the Cart can exist on the same page as other gadgets, but it cannot be on the same page as the Booking gadget. 
This is a common error and some sample code to disable the cart on the Booking page is below: 

<?php if ( !((JRequest::getCmd('option') == 'com_bookeasy') && (JRequest::getCmd('view') == 'book')) ) : ?>
<div id="toolbar-cart"><span id="empty"></span></div>
<?php endif; ?>  )


 


beGadget Integration Examples

For inspiration via other beGadget interpretations, we would encourage you to peruse:


 

Support for beGadget installation

If you require assistance in implementing the beGadgets, please complete the support request form. 

beGadget Support Request

Please note that support issues may incur fees charged at the standard support rates, if the issue logged is found to be already covered within the beGadget documentation.

Bookeasy.com
Resonline.com
Bedigital
Roommanager.com.au
Roamfree.com.au
Tourmanager.com.au