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

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>


IBIS Widget JavaScript v2.2 and above uses Slick (kenwheeler.github.io/slick/), TweenMax (greensock.com/tweenmax/) and Splide (splidejs.com) libraries. The default IBIS Widget JS already includes them in it.

IBIS Widget JavaScript v1.x are deprecated and no longer maintained. Please use one of the above versions.

Embed the cart widget

A working demo of this widget can be found on our e-commerce demo website iframedemo.ibisnz.com/widgets/ibis-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

Cart Widget v1 is deprecated. Please use v2 call above.

//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

Cart Widget v1 is deprecated in IBIS Widget v3.0 or above. Please use v2 script above

//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 ‘/’


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

A working demo of this widget can be found on our e-commerce demo website iframedemo.ibisnz.com/widgets/ibis-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 ‘/’


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.


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

A working demo of this widget can be found on the following page. iframedemo.ibisnz.com/widgets/ibis-calendar-widget/

The Departure Calendar widget allows you to show an availability calendar and 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 ‘/’


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.


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

A working demo of this widget can be found on the following page. iframedemo.ibisnz.com/widgets/ibis-multiday-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.


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.


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 ‘/’


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.


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

IBIS FIT v.1.21.20.96 or above is required for this widget. If you are unsure of the version your ecommerce/booking system is on, please contact our support team.


A working demo of this widget can be found on the following page. iframedemo.ibisnz.com/widgets/ibis-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 ‘/’


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

IBIS FIT v.22.1.0.01 or above is required for this widget. If you are unsure of the version your ecommerce/booking system is on, please contact our support team.


Please make sure to use our widget CSS and JS versions 2.1 or above. Please refer to the information in the Required Files tab below.


This widget uses Slick (kenwheeler.github.io/slick/) and TweenMax (greensock.com/tweenmax/) libraries. The default IBIS Widget JS already includes them in it. In case you already have these in your solution, or wish to have them in another method (self-host, CDN etc), please use the naked version of the IBIS Widget JS (https://resources.ibisnz.com/ibis/ibis-fit-widgets2.1.naked.min.js).


A working demo of this widget can be found on the following page. iframedemo.ibisnz.com/widgets/ibis-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 ‘/’


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

IBIS FIT v.23.0.3.25 or above is required for this widget. If you are unsure of the version your ecommerce/booking system is on, please contact our support team.


Please make sure to use our widget CSS and JS versions 2.2 or above. Please refer to the information in the Required Files tab below.


A working demo of this widget can be found on the following page. iframedemo.ibisnz.com/widgets/ibis-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 ‘/’


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
    }
});


Changelog

v3.2.8 - 3 Oct 2024

  • - IBIS Membership Widget v3.2.8 - Reset Password AJAX endpoint change

v3.2.7 - 27 Sep 2024

  • - IBIS Membership Widget v3.2.7 - Membership Widget forgotten password email field name change

v3.2.6 - 21 Sep 2024

  • - Bug fix on Dual Calendar Widget

v.3.2.5 - 9 Sep 2024

  • - Removed and replaced JavaScript and jQuery deprecated functions and shorthands

v3.2.4 - 19 Jul 2024

  • - IBIS Sliding Calendar Widget v3.2.4 - Button click URL bug fix for non-custom site users

v3.2.3 - 29 Apr 2024

  • - IBIS Dual Calendar Widget v3.2.3 - Bug fix on the second calendar call

v3.2.2 - 4 Apr 2024

  • - IBIS Dual Calendar Widget v3.2.2 - showProdName and showAvail set to true by default

v3.2.1 - 18 Mar 2024

  • - Multiple membership widget support
  • - Then option renamed to loginThen. New then option is introduced for when the widget is initiated

v3.2 - 7 Mar 2024

  • - Membership widget login JSON location change

v3.1.2 - 6 Dec 2023

  • All widgets adjusted to accept appURL, cartDir and customDir with and without a forward slash

v3.1.1 - 5 Dec 2023

  • Splide library updated from 4.0.17 to 4.1.2

v3.1.0 - 6 Nov 2023

  • All widgets adjusted for Weglot and Google Translation. Set all product names not to be translated

v3.0.2 - 17 Oct 2023

  • IBIS Dual Calendar Widget v3.0.1 - Re-implementing Pure Milford custom

v3.0.1 - 18 April 2023

  • IBIS Multiday Calendar Widget v3.0.1 - Year calendar bug fix

v3.0 - 3 April 2023

  • IBIS Cart Widget v3.0 - Removed support for Cart Widget v1, removed JSONP support, support for E-Commerce structural change
  • IBIS Departures Widget v3.0 - Removed JSONP support, support for E-Commerce structural change
  • IBIS Calendar Widget v3.0 - Removed JSONP support, support for E-Commerce structural change
  • IBIS Multiday Calendar Widget v3.0 - Removed JSONP support, support for E-Commerce structural change
  • IBIS Dual Calendar Widget v3.0 - Removed JSONP support, support for E-Commerce structural change, various bug fixes (for MacOS, iOS and iPad OS, month label animation)

v2.2.3 - 14 November 2022

  • IBIS Sliding Calendar Widget v1.1 - Added slide back movement support

v2.2.2 - 27 October 2022

  • IBIS Get ISO Format Date : v1.1 - Added YYYY/MM/DD date format support
  • IBIS Format Time : v1.1 - Changed to use YYYY/MM/DD date format

v2.2.1 - 26 October 2022

  • IBIS Cart Widget v2 : v2.0.1 - Minor bug fix

v2.2 - 15 September 2022

  • IBIS Sliding Calendar Widget v1.0 introduction
  • IBIS Format Time v1.0 introduction

v2.1.3 - 2 June 2022

  • IBIS Membership Widget v1.3 - Forgotten password button behaviour improvement, email field validation
  • IBIS Email Input Validation v1.1 - Improved RegEx pattern

v2.1.2 - 15 April 2022

  • IBIS Membership Widget v1.2 - Multi account login bug fix

v2.1.1 - 22 March 2022

  • IBIS Dual Calendar Widget v1.2 - Various small updates to stabilise the widget

v2.1 - 15 March 2022

[REQUIRES IBIS v22.1.0.01 OR ABOVE]

  • IBIS Dual Calendar Widget v1.1 imported from v1.7.1

v2.0.2 - 7 March 2022

  • IBIS Get Ordinal Date v1.0 introduction

v.2.0.1 - 8 February 2022

  • IBIS Get Variables v2.0 - toLowerCase added so that it is case insensitive

v2.0 - 13 December 2021

  • IBIS Cart Widget v2.0

v1.7.1 - 1 December 2021

[REQUIRES IBIS v22.1.0.01 OR ABOVE]

  • IBIS Dual Calendar Widget v1.1 introduction

v1.6.3 - 15 April 2022

  • IBIS Membership Widget v1.3 - Multi account login bug fix

v1.6.2 - 8 December 2021

  • IBIS Membership Widget v1.2 - widgetButtonText option added to the widget

v1.6.1 - 1 December 2021

  • IBIS Membership Widget v1.1 - Login status function added to the widget

v1.6.0 - 24 September 2021

[REQUIRES IBIS E-COMMERCE VERSIONS IbisNx.Fit5-1.21.20.64 OR ABOVE]

  • IBIS Membership Widget v1.0 introduction - Provides account login/manage functionalities for IBIS membership
  • IBIS Email Input Validation v1.0 introduction


v1.5.2 - 11 October 2021

  • ibisNZTime v1.2 - Fix in relation to the behaviour change on iOS and iPad OS 15 devices on Date.prototype.toLocaleString method.

v1.5.1.1 - 2 June 2021

  • IBIS Widget Set-up Error Check v1.0 introduction - Checks and throws an error to the console if elements with the IBIS widget target class does not exist or more than one of them exist on the page
  • IBIS Widget Option Error Check v1.0 introduction - Checks and throws an error to the console if compulsory options are missing
  • IBIS Departures Widget v1.5.1.1 - Added IBIS Widget Set-up Error Check and IBIS Widget Option Error Check error handlers
  • IBIS Calendar v1.5.1.1 - Added IBIS Widget Set-up Error Check and IBIS Widget Option Error Check error handlers
  • IBIS Multiday Calendar Widget v1.5.1.1 - Added IBIS Widget Set-up Error Check and IBIS Widget Option Error Check error handlers

v1.5.0.1 - 19 May 2021

  • IBIS Calendar Widget: v1.5.0.1 - Prevention method placed for multiple date change clicks in a short period

v1.5.0.0 - 4 May 2021 [WIDGETS 1.5 REQUIRES IBIS E-COMMERCE VERSIONS IbisNx.Fit5-1.21.10.103 OR ABOVE]

  • Pikaday 1.8.2 - Updated from 1.8.0. See https://github.com/Pikaday/Pikaday for details
  • IBIS Multiday Calendar Widget v1.5.0.0 - Now pulls availability for 365 days on load. Removed additional calendar arrow controls
  • IBIS Add Months, IBIS Get Day Name, IBIS Get Month Name, IBIS Format Currency v1.0 introduction