IBIS Technology

IBIS has 7 widgets available for users of our E-commerce platform. All IBIS widgets support Google Analytics linker parameter so the traffic coming through our widgets will maintain the _ga=******** parameter intact.

TABLE OF CONTENTS

• Installation
• Embed the cart widget
• Embed the departure widget
• Embed the departure calendar widget
• Embed the multiday departure calendar widget
• Embed the membership widget
• Embed the dual calendar widget
• Embed the sliding calendar widget
• Changelog

Installation

To begin using widgets, you must have jQuery (jQuery Core 1.11+ or jQuery Core v3.0+) installed on your website for it to work.

Customers on IBIS E-Commerce v23 or above are required to use IBIS Widgets v3 or above at the following URLs. Please also contact our support team before using our widgets to have your live website's URL in the Access-Control-Allow-Origin (CORS) header.'

Copy and paste the code below. Put it as close to the closing body tag (</body>) as possible and make sure that jQuery is loaded before this IBIS Widgets JS library.

<link href="https://resources.ibisnz.com/ibis/ibis-fit-widgets3.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://resources.ibisnz.com/ibis/ibis-fit-widgets3.min.js" type="text/javascript"></script>

Customers on IBIS E-Commerce v22 or below, please use IBIS Widgets v2.2 at the following URLs.

Copy and paste the code below. Put it as close to the closing body tag (</body>) as possible and make sure that jQuery is loaded before this IBIS Widgets JS library.

<link href="https://resources.ibisnz.com/ibis/ibis-fit-widgets2.2.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://resources.ibisnz.com/ibis/ibis-fit-widgets2.2.min.js" type="text/javascript"></script>

Embed the cart widget

If you are using an iframe on your website to contain the IBIS E-commerce platform, you will likely want to include a shopping cart icon on your own page so that the customer has visibility over how many items they have added to the cart and allow them to view it any time by clicking on the icon. This cart icon is normally contained within the header of the IBIS E-commerce page but is hidden in iframe mode. If we have implemented customised menus into your IBIS E-commerce site you will also want to include this widget in your menu.

Before you start

If you are using an iframe mode, a separate page should be created for the shopping cart - this should be yourwebsite.com/cart or similar. On that page, you need an iframe like the example below, pointing the /cart directory of the E-Commerce site.

<iframe class="ibis-iframe" src="https://your-ibis-ecommerce.ibisnz.com/cart"></iframe>

HTML markup

Place this div in your html, ideally somewhere in the header. This is a wrapper which the shopping cart widget gets inserted into.

<div class="ibis-widget-cart"></div>

JavaScript function call for iframe implementation

Make the following JavaScript function call. Copy and paste the code below.

IBIS Cart Widget v2

PLEASE NOTE: The cart widget v2 requires the IBIS Widget JavaScript and CSS v2.0 or above, and IBIS FIT v.22.1.0.01 or above. If you are unsure of the version your ecommerce/booking system is on, please contact our support team.

//Call the function on DOM ready
ibisWidgetCart({
    appURL:'https://your-ibis-ecommerce.ibisnz.com',
    cartDir:'/cart',
    mode:'iframe'
})

IBIS Cart Widget v1

//Create a function for Ibis Cart Widget
function ibisCartWidget() {
    ibisRefreshCart({
        appURL:'https://your-ibis-ecommerce.ibisnz.com',
        cartDir:'/cart',
        mode:'iframe'
    })
}

//Then call the function on DOM ready and iframe load
//document.ready for pages that don’t have the Ibis iframe and iframe.load for those do
ibisCartWidget();

$('.ibis-iframe').load(function(){
    ibisCartWidget();
})

JavaScript function call for stand-alone

Make the following JavaScript function call. Copy and paste the code below.

IBIS Cart Widget v2

PLEASE NOTE: The cart widget v2 requires the IBIS Widget JavaScript and CSS v2.0 or above, and IBIS FIT v.22.1.0.01 or above. If you are unsure of the version your ecommerce/booking system is on, please contact our support team.

//Call the function on DOM ready
ibisWidgetCart({
    appURL:'https://your-ibis-ecommerce.ibisnz.com'
})

IBIS Cart Widget v1

//Call the function on DOM ready
ibisRefreshCart({
    appURL:'https://your-ibis-ecommerce.ibisnz.com'
})

Options

appURL [compulsory]
This is where your IBIS E-commerce website URL goes. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’. The ‘/’ at the beginning is required.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

theme [optional]
Select from two available themes, either ‘dark’ or ‘lite’.

• Format: String
• Default: 'dark'

then [optional]
A callback function for when the ibisRefreshCart() is completed.

• Format: Callback function

Customise the cart widget

If you want to alter the IBIS E-commerce cart icon, you need to override this in your stylesheet as follows.
Copy the following into your own stylesheet and edit as required.

//ADJUSTING THE ICON SIZE
//Default is 32px
#fit5-cart-widget .cart-icon:before {
    font-size: **px;
}
//CHANGING THE ICON ITSELF
//Change the 'some-image-url.png' reference to an actual URL of the icon you want to use
//Minimum cart icon size is 40px x 40px
//Set filter to none if the theme is set to lite
#fit5-cart-widget .cart-icon:before {
    content:url("some-image-url.png") !important;
    filter: none !important;
}

//Change the 'some-image-url2.png' reference to an actual URL of the icon you want to use.
//This is specifically for when the cart is not empty
#fit5-cart-widget.has-item .cart-icon:before {
    content:url("some-image-url2.png") !important;
}

Embed the departure widget

The Departure widget allows you to show information to your browsing customers about departures that are available, ahead of them reaching the hosted IBIS E-commerce transaction pages.

HTML markup

Place this div in your html.

<div class="ibis-widget-departures"></div>

JavaScript function call for iframe

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisWidgetDepartures({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    mode: 'iframe',
    cartDir: '/cart'
})

JavaScript function call for stand-alone

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisWidgetDepartures({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com'
})

Options

appURL [compulsory]
This is where your IBIS E-commerce website URL goes, and is compulsory. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

container [compulsory only for the second widget onward on the page]
This is where you specify the class or ID name of the element into which the widget is generated.

• Format: String
• Default: ‘.ibis-widget-departures’

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’ with a forward slash.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

theme [optional]
Select from two available themes, either ‘lite’ or ‘dark’.

• Format: String
• Default: ‘lite’

defaultDate [optional]
Use this option to specify the date that the widget shows departures for.

There is an IBIS custom function available that you may wish to use when you set the defaultDate. It's ibisAddDays(param1, param2). 

param1 parameter takes JavaScript date object.

param2 takes an integer for the number of days you wish to add or subtract. For example ibisAddDays(new Date(), 1) would be tomorrow. ibisAddDays() function is built in to the core IBIS Widget JavaScript library. So no additional include file is required.

• Format: JavaScript Date (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), String (date-like string, i.e. 'YYYY-MM-DD')
• Default: new Date() (i.e. today)

prodCode [optional]
Use this option to specify a product or a product group to show the departures for. The prodCode comes from the IBIS system.

To specify a product group, the value should to be ‘ProdGroup-’ then followed by the actual product group code (eg. ‘ProdGroup-Walks’ when the product group code is ‘Walks’). Case-insensitive.

• Format: String
• Default: '*'

showIn24H [optional]
Set this option to true to show the departure times in 24h format (eg. 14:00) instead of 12h format (eg. 2:00 pm)

• Format: Boolean
• Default: false

rollover [optional]
Specify the time after which the widget shows the availability for the following day, instead of the current day. The value should be in 24h format (eg. ‘16:00’). This option will be ignored if defaultDate is set.

• Format: String (in HH:mm format)
• Default: null

showAvail [optional]
Set this option to false to hide the Availability column.

• Format: Boolean
• Default: true

showBookLink [optional]
Set this option to false to hide the booking links.

• Format: Boolean
• Default: true

bookLinkText [optional]
Adjust this option to change the booking link text.

• Format: String
• Default: ‘Book Now’

bookLinkTextMobile [optional]
Adjust this option to change the booking link text for the mobile view. This option is particularly useful when you specify a prodCode so that the Calendar Widget is only showing availabilities for one specific product. You may wish to set this to 'Book Now' or similar. Setting the showAvail option to false will hide the availability display here also.

• Format: String
• Default: PRODUCT NAME (Availability) (i.e. 'Beach Tour (5+)')

linkOpenNewWindow [optional]
Set this option to true if you want the booking pages to open in a new window.

• Format: Boolean
• Default: false

mobileViewThreshold [optional]
Specify a value for the screen width in pixels (JavaScript window.innerWidth) where the widget display switches between the desktop mode and the mobile mode. Setting a large value (eg. 8000) to this option will make the widget to always display in the mobile mode. This is particularly useful if the area allocated to the widget is smaller than 580px in width regardless of the window size.

• Format: Integer
• Default: 580

then [optional]
A callback function for when the ibisWidgetDepartures() is completed.

• Format: Callback function

Your departure widget function call should look like this when all the options are specified:

//Call the function on DOM ready
ibisWidgetDepartures({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    defaultDate: new Date(),
    prodCode: 'product',
    showIn24H: false,
    rollover: '16:00',
    showAvail: true,
    showBookLink: true,
    bookLinkText: 'Book Now',
    bookLinkTextMobile: 'Book Now',
    linkOpenNewWindow: false,
    mobileViewThreshold: 8000,
    then: function () {
        // do something
    }
});

Stylesheet overrides

The departure widget shows departure list in the following format. Use these classes and ids in your CSS to override the default styles.

<div class="ibis-departures-container">
    <div class="ibis-widget-departures">
        <div class="">
            <div class="ibis-dept">8:00 am</div>
            <div class="ibis-prod"><span class="ibis-hide-mobile">The Far North</span><span class="ibis-show-mobile">The Far North (5+)</span></div>
            <div class="ibis-avail ibis-hide-mobile" style="width: 28px;">5+</div>            <div class="ibis-book ibis-hide-mobile"><a href="https://ibis.co.nz/">Book Now</a></div>
        </div> 
   </div>
 </div>

Embed the departure calendar widget

The Departure Calendar widget allows you to show an availability calendar and multiple departures for each day to your browsing customers, ahead of them reaching the hosted IBIS E-commerce transaction pages.

Below are screenshots of the calendar widget in the desktop mode (left) and the mobile mode (right).

HTML markup

Place this div in your html.

<div class="ibis-widget-calendar"></div>

JavaScript function call for iframe

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisCalendarWidget({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe'
});

JavaScript function call for stand-alone

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisCalendarWidget({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com'
});

Options

appURL [compulsory]
This is where your IBIS E-commerce website URL goes, and is compulsory. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

container [compulsory only for the second widget onward on the page]
This is where you specify the class or ID name of the element into which the widget is generated.

• Format: String
• Default: ‘.ibis-widget-calendar’

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’ with a forward slash.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

theme [optional]
Select from two available themes, either 'lite’ or 'dark'.

• Format: String
• Default: 'lite'

defaultDate [optional]
Use this option to specify the date that the widget shows departures for.

There is an IBIS custom function available that you may wish to use when you set the defaultDate. It's ibisAddDays(param1, param2). 

param1 parameter takes JavaScript date object. 

param2 takes an integer for the number of days you wish to add or subtract. For example ibisAddDays(new Date(), 1) would be tomorrow. ibisAddDays() function is built in to the core IBIS Widget JavaScript library. So no additional include file is required.

• Format: JavaScript Date (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), String (date-like string, i.e. 'YYYY-MM-DD')
• Default: new Date() (i.e. today)

prodCode [optional]
Use this option to specify a product or a product group to show the departures for. The prodCode comes from the IBIS system.

To specify a product group, the value should to be ‘ProdGroup-’ then followed by the actual product group code (eg. ‘ProdGroup-Walks’ when the product group code is ‘Walks’). Case-insensitive.

• Format: String
• Default: '*'

showIn24H [optional]
Set this option to true to show the departure times in 24h format (eg. 14:00) instead of 12h format (eg. 2:00 pm)

• Format: Boolean
• Default: false

rollover [optional]
Specify the time after which the widget shows the availability for the following day, instead of the current day. The value should be in 24h format (eg. ‘16:00’). This option will be ignored if defaultDate is set.

• Format: String (in HH:mm format)
• Default: null

showAvail [optional]
Set this option to false to hide the Availability column.

• Format: Boolean
• Default: true

showBookLink [optional]
Set this option to false to hide the booking links.

• Format: Boolean
• Default: true

bookLinkText [optional]
Adjust this option to change the booking link text.

• Format: String
• Default: ‘Book Now’

bookLinkTextMobile [optional]
Adjust this option to change the booking link text for the mobile view. This option is particularly useful when you specify a prodCode so that the Calendar Widget is only showing availabilities for one specific product. You may wish to set this to 'Book Now' or similar. Setting the showAvail option to false will hide the availability display here also.

• Format: String
• Default: PRODUCT NAME (Availability) (i.e. 'Beach Tour (5+)')

loadOnInit [optional]
Set this option to false to NOT show the available departures for the current date on the widget load.

• Format: Boolean
• Default: true

mobileViewThreshold [optional]
Specify a value for the screen width in pixels (JavaScript window.innerWidth) where the widget display switches between the desktop mode and the mobile mode. Setting a large value (eg. 8000) to this option will make the widget always display in mobile mode. This is particularly useful if the area allocated to the widget is smaller than 580px in width regardless of the window size.

• Format: Integer
• Default: 580

then [optional]
A callback function for when the ibisWidgetDepartures() is completed.

• Format: Callback function

Your departure widget function call for iframe implementation should look like this when all the options are specified:

//Call the function on DOM ready
ibisCalendarWidget({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe',
    theme: 'lite',
    defaultDate: new Date(),
    prodCode: 'product',
    showIn24H: false,
    rollover: '16:00',
    showAvail: true,
    showBookLink: true,
    bookLinkText: 'Book Now',
    bookLinkTextMobile: 'Book Now',
    loadOnInit: true,
    mobileViewThreshold: 8000,
    then: function () {
        // do something
    }
});

Stylesheet overrides

The Calendar Widget shows in the following format. Use these classes and ids in your CSS to override the default styles.

<div class="ibis-widget-calendar">
    <div class="pignose-calendar">
        <div class="">
            <a href="#" class="pignose-calendar-top-prev"><span class="icon-arrow-left"></span></a>
            <div class="pignose-calendar-top-date"><span class="pignose-calendar-top-month">September</span><span class="pignose-calendar-top-year">2021</span></div>
            <a href="#" class="pignose-calendar-top-next"><span class="icon-arrow-right"></span></a>
        </div>
        <div class="pignose-calendar-header">
            <div class="pignose-calendar-week pignose-calendar-week-sun">SUN</div>
            <div class="pignose-calendar-week pignose-calendar-week-mon">MON</div>
            <div class="pignose-calendar-week pignose-calendar-week-tue">TUE</div>
            <div class="pignose-calendar-week pignose-calendar-week-wed">WED</div>
            <div class="pignose-calendar-week pignose-calendar-week-thu">THU</div>
            <div class="pignose-calendar-week pignose-calendar-week-fri">FRI</div>
            <div class="pignose-calendar-week pignose-calendar-week-sat">SAT</div>
        </div>
        <div class="pignose-calendar-body">
            <div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sun"><a>1</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-mon"><a>2</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-tue"><a>3</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-wed"><a>4</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-thu"><a>5</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-fri"><a>6</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sat"><a>7</a></div>
            </div>
            <div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sun"><a>8</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-mon"><a>9</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-tue"><a>10</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-wed"><a>11</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-thu"><a>12</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-fri"><a>13</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sat"><a>14</a></div>
            </div>
            <div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sun"><a>15</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-mon"><a>16</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-tue pignose-calendar-unit-active"><a>17</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-wed"><a>18</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-thu"><a>19</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-fri"><a>20</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sat"><a>21</a></div>
            </div>
            <div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sun"><a>22</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-mon"><a>23</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-tue"><a>24</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-wed"><a>25</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-thu"><a>26</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-fri"><a>27</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sat"><a>28</a></div>
            </div>
            <div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-sun"><a>29</a></div>
                <div class="pignose-calendar-unit-date pignose-calendar-unit-mon"><a>30</a></div>
                <div class="pignose-calendar-unit-tue"></div>
                <div class="pignose-calendar-unit-wed"></div>
                <div class="pignose-calendar-unit-thu"></div>
                <div class="pignose-calendar-unit-fri"></div>
                <div class="pignose-calendar-unit-sat"></div>
            </div>
        </div>
    </div>
    <div class="ibis-departures-container">
        <div class="ibis-widget-departures">
            <div class="">
                <div class="ibis-dept">8:00 am</div>
                <div class="ibis-prod"><span class="ibis-hide-mobile">Beach Tour</span><span class="ibis-show-mobile">Beach Tour (5+)</span></div>
                <div class="ibis-avail ibis-hide-mobile">5+</div>
                <div class="ibis-book ibis-hide-mobile"><a href="https://ibis.co.nz/">Book Now</a></div>
            </div>
        </div>
    </div>
 </div>

Embed the multiday departure calendar widget

The Multiday Departure Calendar Widget allows you to show an availability calendar and departures for multiple days to your browsing customers, ahead of them reaching the hosted IBIS E-commerce transaction pages.  

Note:  This widget only displays one service time per product and it is always the first service time scheduled.  Therefore if that time is not available on a certain day then availability will show as not available.  To show multiple service times for a day we recommend the Departure Calendar Widget.

Below are screenshots of the multiday calendar widget in the desktop mode (top) and the mobile mode (bottom).

HTML markup

Place this div in your html.

<div class="ibis-widget-multiday-calendar"></div>

JavaScript function call for iframe

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisMultidayCalendar({
    prodTitle: 'The Far North',
    prodImage: '/img/farnorth.jpg',
    prodDescription: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.',
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe'
});

JavaScript function call for stand-alone

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisMultidayCalendar({
    prodTitle: 'The Far North',
    prodImage: '/img/farnorth.jpg',
    prodDescription: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.',
    appURL: 'https://your-ibis-ecommerce.ibisnz.com'
});

Options

prodTitle [optional]
This is where you specify the title text to appear in the widget header area.

• Format: String

prodDescription [optional]
This is where you specify the description text to appear in the widget header area.

• Format: String

prodImage [optional]
This is where you specify the location of the image to appear in the widget header.

• Format: String
• Examples:
  • Good: http://www.yourwebsite.com/images/image.png
  • Good: /images/image.png
  • Bad: www.yourwebsite.com/images/image.png (does not have a protocol i.e. https://)

appURL [compulsory]
This is where your IBIS E-commerce website URL goes, and is compulsory. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’ with a forward slash.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

theme [optional]
Select from two available themes, either 'lite’ or 'dark'.

• Format: String
• Default: 'lite'

defaultDate [optional]
Use this option to specify the date that the widget shows departures for.

There is an IBIS custom function available that you may wish to use when you set the defaultDate. It's ibisAddDays(param1, param2). 

param1 parameter takes JavaScript date object.

param2 takes an integer for the number of days you wish to add or subtract. For example ibisAddDays(new Date(), 1) would be tomorrow. ibisAddDays() function is built in to the core IBIS Widget JavaScript library. So no additional include file is required.

• Format: JavaScript Date (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), String (date-like string, i.e. 'YYYY-MM-DD')
• Default: new Date() (i.e. today)

prodCode [optional]
Use this option to specify a product or a product group to show the departures for. The prodCode comes from the IBIS system.

To specify a product group, the value should be ‘ProdGroup-’ followed by the actual product group code (eg. ‘ProdGroup-Walks’ when the product group code is ‘Walks’). Case-insensitive.

• Format: String
• Default: ''

showIn24H [optional]
Set this option to true to show the departure times in 24h format (eg. 14:00) instead of 12h format (eg. 2:00 pm)

• Format: Boolean
• Default: false

rollover [optional]
Specify the time after which the widget shows the availability for the following day, instead of the current day. The value should be in 24h format (eg. ‘16:00’). This option will be ignored if defaultDate is set.

• Format: String (in HH:mm format)
• Default: null

showProdName [optional]
Set this option to false to hide the product names.

• Format: Boolean
• Default: true

showSpace [optional]
Set this option to false for the booking buttons to read what is set in the following bookLinkText option, instead of showing the number of available spots.

• Format: Boolean
• Default: true

bookLinkText [optional]
Adjust this option to change the booking button text when the showSpace option is set to false.

• Format: String
• Default: null

closedText [optional]
Adjust this option to change the text appears when the departure is closed (passed the close-off time).

• Format: String
• Default: ‘Closed’

departedText [optional]
Adjust this option to change the text appears when the departure has been departed.

• Format: String
• Default: ‘Departed’

noAvailText [optional]
Adjust this option to change the message which appears when no departure is found. This message will be wrapped in a <p> element with ‘ibis-multiday-calendar-no-avail-text' class, in case you wish to style this text.

• Format: String
• Default: ‘No departure found for the selected product and date.’

then [optional]
A callback function for when the ibisWidgetDepartures() is completed.

• Format: Callback function

Your departure widget function call for iframe implementation should look like this when all the options are specified:

//Call the function on DOM ready
ibisCalendarWidget({
    prodTitle: 'The Far North',
    prodDescription: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.',
    prodImage: '/img/farnorth.jpg',
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe',
    theme: 'lite',
    defaultDate: new Date(),
    prodCode: 'product',
    showIn24H: false,
    rollover: '16:00',
    showProdName: true,
    showSpace: true,
    bookLinkText: 'Book Now',
    closedText: 'Closed',
    departedText: 'Departed',
    noAvailText: 'No departure found for the selected product and date.',
    then: function () {
        // do something
    }
});

Stylesheet overrides

The Multiday Calendar Widget shows in the following format. Use these classes and ids in your CSS to override the default styles.

<div class="ibis-widget-multiday-calendar">
    <div class="ibis-multiday-calendar-prod-details">
        <img src="/img/farnorth.jpg" alt="Product Name">
        <div class="ibis-multiday-calendar-prod-text">
            <h3>Product Name</h3>
            <p>Product Description text</p>
        </div>
    </div>
    <div class="ibis-multiday-calendar-datepicker-wrap"><input type="text" id="ibis-datepicker-pickaday"></div>
    <table class="ibis-multiday-calendar-results">
        <thead>
            <tr class="ibis-multiday-calendar-tr">
                <th class="arrow-back"><i class="ibis-icons-arrow-back"></i></th>
                <th class="ibis-multiday-calendar-date1 ibis-multiday-calendar-col1">
                    <div class="ibis-multiday-calendar-date-wrapper">Mon<br><span class="ibis-multiday-calendar-date">16 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date2 ibis-multiday-calendar-col2">
                    <div class="ibis-multiday-calendar-date-wrapper">Tue<br><span class="ibis-multiday-calendar-date">17 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date3 ibis-multiday-calendar-col3">
                    <div class="ibis-multiday-calendar-date-wrapper">Wed<br><span class="ibis-multiday-calendar-date">18 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date4 ibis-multiday-calendar-col4">
                    <div class="ibis-multiday-calendar-date-wrapper">Thu<br><span class="ibis-multiday-calendar-date">19 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date5 ibis-multiday-calendar-col5">
                    <div class="ibis-multiday-calendar-date-wrapper">Fri<br><span class="ibis-multiday-calendar-date">20 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date6 ibis-multiday-calendar-col6">
                    <div class="ibis-multiday-calendar-date-wrapper">Sat<br><span class="ibis-multiday-calendar-date">21 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date7 ibis-multiday-calendar-col7">
                    <div class="ibis-multiday-calendar-date-wrapper">Sun<br><span class="ibis-multiday-calendar-date">22 Sep</span></div>
                </th>
                <th class="ibis-multiday-calendar-date8 ibis-multiday-calendar-col8">
                    <div class="ibis-multiday-calendar-date-wrapper">Mon<br><span class="ibis-multiday-calendar-date">23 Sep</span></div>
                </th>
                <th class="arrow-forward"><i class="ibis-icons-arrow-forward"></i></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="ibis-multiday-calendar-prod-title">Beach Tour</td>
            </tr>
            <tr class="ibis-multiday-calendar-tr">
                <td class="ibis-multiday-calendar-dep-time">8:00 am</td>
                <td class="ibis-multiday-calendar-col1">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class="ibis-multiday-calendar-col2">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class="ibis-multiday-calendar-col3">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class="ibis-multiday-calendar-col4">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class="ibis-multiday-calendar-col5">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class="ibis-multiday-calendar-col6">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class="ibis-multiday-calendar-col7">
                    <div class="ibis-multiday-calendar-book"><a href="https://ibis.co.nz/">5+</a></div>
                </td>
                <td class=""> </td>
            </tr>
        </tbody>
    </table>
 </div>

Embed the membership widget

The Membership Widget allows your customers to login and manage their membership accounts on the IBIS system.

Below are screenshots of the Membership Widget before and after login, and the login dialog.

HTML markup

Place this div in your html.

<div class="ibis-widget-membership"></div>

JavaScript function call for iframe

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisMembership({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe'
});

JavaScript function call for stand-alone

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisMembership({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com'
});

Options

appURL [compulsory]
This is where your IBIS E-commerce website URL goes. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’ with a forward slash.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

theme [optional]
Select from two available themes, either 'lite’ or 'dark'.

• Format: String
• Default: 'lite'

formHeader [optional]
This is where you specify the login form title.

• Format: String
• Default: 'Membership Login'

formText [optional]
This is where you specify the description text to appear below the form title.

• Format: String
• Default: ''

forgottenPasswordText [optional]
This is where you modify the forgotten password link text.

• Format: String
• Default: 'Forgotten password?'

widgetButtonText [optional]
This is where you modify the main widget button text.

• Format: String
• Default: 'Membership Login'

loginButtonText [optional]
This is where you modify the form login button text.

• Format: String
• Default: 'Login'

mobileViewThreshold [optional]
This is where you enable and specify the viewport size (in pixels) at which the widget goes into the mobile mode.

• Format: Integer
• Default: null

greeting [optional]
This is where you specify the greeting text appears before the account name (when logged in).

• Format: String
• Default: ''

linkOpenNewWindow [optional]
Set this option to true if you want the booking pages to open in a new window.

• Format: Boolean
• Default: false

then [optional]
A callback function for when a customer is logged in.

• Format: Callback function

Your membership widget function call for iframe implementation should look like this when all the options are specified:

//Call the function on DOM ready
ibisMembership({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe',
    theme: 'lite',
    formHeader: 'Membership Login',
    formText: '',
    forgottenPasswordText: 'Forgotten password?',
    widgetButtonText: 'Membership Login',
    loginButtonText: 'Login',
    mobileViewThreshold: 700,
    greeting: "Hi",
    linkOpenNewWindow: false,
    then: function () {
        // do something
    }
});

Embed the dual calendar widget

The Dual Calendar Widget allows you to show an availability calendar and departures for multiple days to your browsing customers, ahead of them reaching the hosted IBIS E-commerce transaction pages.

It features two types of calendars, the month view and the week view.

Below are screenshots of the dual calendar widget showing both view options.

HTML markup

Place this div in your html.

<div class="ibis-widget-dual-calendar"></div>

JavaScript function call for iframe

The following JavaScript function call needs to be made in your application to enable this widget.

ibisDualCalendar({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe'
})

JavaScript function call for stand-alone

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisDualCalendar({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com'
})

Options

appURL [compulsory]
This is where your IBIS E-commerce website URL goes. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’. The ‘/’ at the beginning is required.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

bgColour [optional]
Please specify the background colour of the parent element of the widget. It takes HEX, RGB, RGBA or CSS colour names.

• Format: String
• Default: '#fff'

prodCode [optional]
Use this option to specify a product to show the departures for. The prodCode comes from the IBIS system.
To specify a product group, the value should be 'ProdGroup-' followed by the actual product group code (eg. 'ProdGroup-Walks' when the product group code is 'Walks'). Case-insensitive.

• Format: String
• Default: '*'

showIn24H [optional]
Set this option to true to show the departure times in 24h format (eg. 14:00) instead of 12h format (eg. 2:00 pm)

• Format: Boolean
• Default: false

showReturn [optional]
Set this option to true to show the product return time.

• Format: Boolean
• Default: false

showProdName [optional]
Set this option to false to hide the product names.

• Format: Boolean
• Default: false

showAvail [optional]
Set this option to false for the booking buttons to read what is set in the following bookLinkText option, instead of showing the number of available spots.

• Format: Boolean
• Default: true

then [optional]
A callback function for when a customer is logged in.

• Format: Callback function

Your dual calendar widget function call for iframe implementation should look like this when all the options are specified:

//Call the function on DOM ready
ibisDualCalendar({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe',
    bgColour: '#fff',
    prodCode: 'Walk',
    showIn24H: false,
    showReturn: false,
    showProdName: true,
    showAvail: true,
    then: function () {
        // do something
    }
});

Embed the sliding calendar widget

The Sliding Calendar Widget allows you to show an availability calendar and departures for multiple days to your browsing customers, ahead of them reaching the hosted IBIS E-commerce transaction pages.

It features two types of calendars, the sliding date calendar and the monthly datepicker.

Below are screenshots of the sliding calendar widget showing both view options.

HTML markup

Place this div in your html.

<div class="ibis-widget-sliding-calendar"></div>

JavaScript function call for iframe

The following JavaScript function call needs to be made in your application to enable this widget.

ibisSlidingCalendar({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe',
    prodCode: 'walk'
})

JavaScript function call for stand-alone

The following JavaScript function call needs to be made in your application to enable this widget.

//Call the function on DOM ready
ibisDualCalendar({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    prodCode: 'walk'
})

Options

appURL [compulsory]
This is where your IBIS E-commerce website URL goes. Please replace the above https://your-ibis-ecommerce.ibisnz.com with your own IBIS E-commerce URL. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

• Format: String
• Examples:
  • Good: http://www.google.com
  • Bad: www.google.com (does not have a protocol i.e. https://)
  • Bad: https://www.google.com/ (has a trailing forward-slash)

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’ with a forward slash.

• Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

• Format: String

prodCode [compulsory]
This option is to specify a product to show the departures for and is compulsory. The prodCode comes from the IBIS system.
To specify a product group, the value should be 'ProdGroup-' followed by the actual product group code (eg. 'ProdGroup-Walks' when the product group code is 'Walks'). Case-insensitive.

• Format: String

customDir [compulsory for custom websites only]
This option is to specify the custom directory name for custom IBIS E-Commerce users. If your E-Commerce website's URL reads like book.ibis.co.nz/ibisbooking instead of book.ibis.co.nz on the E-Commerce home page, then you need to set this option and the value would be "/ibisbooking" in this case with a forward slash.

• Format: String

unitText [optional]
Set this option to adjust the unit text.

• Format: String
• Default: 'Per person'

bookLinkText [optional]
Set this option to adjust the Book Now button text.

• Format: String
• Default: 'Book Now'

border [optional]
Set this option to ‘shadow’ to have sliding calendar items' bordr to be box-shadow. Default is 1px light grey (#ccc) border.

• Format: String
• Default: ''

title [optional]
Set this option to have a title above the widget. Default is '' (empty).

• Format: String
• Default: ''

description [optional]
Set this option to have a descrition text above the widget. Default is '' (empty).

• Format: String
• Default: ''

placeholder [optional]
Set this option to adjust the placeholder text for the month calendar input field.

• Format: String
• Default: 'Select date'

then [optional]
A callback function for when a customer is logged in.

• Format: Callback function

Your sliding calendar widget function call for iframe implementation should look like this when all the options are specified:

//Call the function on DOM ready
ibisSlidingCalendar({
    appURL: 'https://your-ibis-ecommerce.ibisnz.com',
    cartDir: '/cart',
    mode: 'iframe',
    prodCode: 'Walk',
    unitText : 'Per person',
    bookLinkText : 'Book Now',
    border : '',
    title : '',
    description : '',
    placeholder : 'Select date',
    then: function () {
        // do something
    }
});