Getting your E-Commerce in an iframe is the simplest solution for your organisation to stay true to your brand and to keep your customers on your website while they're shopping. No new tabs or windows need to be opened, and by implementing our shopping cart widget in your menu, your customers can continue browsing your website after adding items to their cart. Our iframe design can be seen here.


The following article shows how to embed an iframe into your website, and is intended for use by your web developer or designer with an understanding of HTML. All customers using an IBIS E-Commerce iframe on their website must embed the shopping cart widget on their own website.


TABLE OF CONTENTS


Embed the iframe 

Copy and paste the following tags, replacing the iframe and script src attributes with your IBIS E-Commerce website URL. ibis-iframe class is compulsory.

<iframe src="https://demo.ibisnz.com/" class="ibis-iframe" scrolling="no"></iframe>

You may wish to give 100% width to the iframe in most cases so that the iframe expands fully in width to its parent element. If you are using the automatic iframe resizer mentioned below, you may also wish to give some min-height so that the iframe does not load very small in height before the iFrameResize() function adjusts the height for you on iframe.load. To do so, add the following to your stylesheet. Adjust the min-height value to fit to your application.

iframe.ibis-iframe{width:100%; min-height:650px;}

You can customise the specific E-Commerce page the iframe shows, by adjusting the iframe src= url to the relevant link to your IBIS E-commerce pages. You can also adjust the size of the iframe if needed. 


Limitations of embedding an iframe with Apple iOS

In Apple iOS v13 and higher, new security measures were introduced which prevent 3rd party cookies being embedded within an iframe. To ensure that iframe customers can still book and pay for products, IBIS must exit the iframe from the 'Add to cart' stage onwards on an Apple device. This has some impact on the user experience, but customers can still continue with payment as usual. To maintain a seamless user experience within your iframe, IBIS can host your IBIS E-Commerce site on a 3rd level domain e.g. book.yourwebsite.co.nz. Learn more about subdomains in the section: how to configure a subdomain. 


Automatically resize the iframe

IBIS E-Commerce supports the use of an iframe resizer. If you wish to use this plugin, please follow these steps below. For this function to work, you must have jQuery installed on your website.

  1. Get the iframe resizer package by copying and pasting the following script tag in your HTML:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js" type="text/javascript"></script>
  2. Make an iFrameResize function call. Copy and paste the following script:
    (function($) {
        $(function() {
            $('.ibis-iframe').load(function() {
                iFrameResize({
                    checkOrigin: false
                })
            })
        })
     })
    (jQuery)
For more details about this plugin and options, please visit the plugin's GitHub web page: https://github.com/davidjbradshaw/iframe-resizer


Auto-scroll page to the top of the iframe

IBIS offers a handy function to auto-scroll the page to the top of the iframe after every IBIS iframe load. This happens when the page within the iframe changes by adding a product to the cart, proceeding to the payment page etc.


This function is available in the IBIS Widgets JS library. If you haven't already implemented the IBIS Widgets, please go to the following page and install the IBIS Widgets JS library, then follow these steps:


Alter the iFrameResize() call above to the following. 

(function($) {
    $(function() {
        $('.ibis-iframe').load(function() {
            iFrameResize({
                checkOrigin: false,
                onResized: ibisScrollToElement({
                    target: '.ibis-iframe',
                    offset: 0,
                    animation: true
                })
            })
        })
    })
 })
(jQuery)

target: string (required)
The 'target' option specifies where the page should scroll back to. In this example, we set this to '.ibis-frame' so that the page goes back to the top of the IBIS iframe. If you have a container element that wraps the iframe, you may wish to set this wrapper element to the 'target'.


offset: integer (optional)
The 'offset' option allows you to set the Y direction offset from the 'target' element. The default is 0. This option comes in handy when you have a floating navigation bar at the top of your page, for example. If you set the 'target' to '.ibis-iframe' but you have 100px high top navigation bar, the top 100px of the iframe contents will be hidden behind the navigation bar. In this case, you may wish to set the 'offset' to be -100 so that the target position becomes 100px above the .ibis-iframe (negative Y direction offset). In this way, the top of the iframe will sit right below the top navigation bar.


animation: boolean (optional)
If you set the 'animation' option to true, the page will auto-scroll smoothly. The default value is false and the page jumps to the 'target' element without smooth scrolling.


Creating a subdomain

The IBIS website requires cookies to store images, product info, session information etc. and we cannot avoid using them on our E-Commerce website. The only way to ensure your IBIS E-Commerce website will work properly in iframe mode in situations where 3rd party tracking is blocked (such as Google incognito or Safari private browsing mode) is to ensure the website is not seen as a 3rd party. This can be solved easily by configuring a subdomain.


Steps for configuring a subdomain:

  1. Purchase and configure a secure subdomain for your website e.g. 'book.mywebsite.co.nz'. 
    • IBIS charge $200+ GST annually to purchase your secure subdomain certificate for you and install it on our server.
    • If desired, you can purchase your certificate and supply these to us for installation. We charge $125 + GST to install each certificate on our servers. Please send your certificates before the current certificates expire (at least 2 weeks in advance) to [email protected] for assistance
  2. Change your subdomain CNAME record to point to your unique ibis system code-ecomm.ibisres.com. E.g.  ‘xxx-ecomm.ibisres.net’.