A step-by-step guide

This page provides step-by-step instructions on how to integrate the Instantor Widget into your webpage. The Widget allows your customers to connect to their bank through Instantor.

Step 1 - Loading prerequisites – jQuery library

The Instantor script requires a jQuery library. You can link it from whatever location suits your needs, either locally cached on your server, or from public CDN (for example, from Google's CDN). Example of Google hosted jQuery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Heads-up! Be sure to load the jQuery library using a HTTPS protocol! jQuery version 1.7+ is a minimal requirement.

Step 2 - Link the Instantor script

The Instantor script file needs to be linked in your page. Add the following code-block, corresponding with your market of operations, at the beginning of the<body> section of your HTML file:

For European markets:

<script type="text/javascript"
    src="https://frame.euc1.instantor.com/instantor-0.7.3.min.js">
</script>

For Latin American markets:

<script type="text/javascript"
    src="https://frame.use2.instantor.com/instantor-0.7.3.min.js">
</script>

For Southeast Asian markets:

<script type="text/javascript"
    src="https://frame.apse1.instantor.com/instantor-0.7.3.min.js">
</script>

IMPORTANT!

Never copy the script to your server. The script is frequently updated to reflect changes in the process. Caching your own version can lead to unhandled issues.

Step 3 - Place the Instantor Widget on your website

The Instantor Widget is essentially an <iframe> on your website. The <iframe> requires a DOM element in your HTML code where it will get injected. That can be any block-level HTML element – for example, a <div>, or <section> element.

For example, place a <div> block-level HTML element with id="instantor_div" inside your HTML:

<div id="instantor_div"></div>

Please, make sure your CSS code is not interfering with the Instantor <iframe>, nor with any iframe-containing DOM element – do not limit heights, the script will actively resize the <iframe> height to match its inner content height.

Step 4 - Initialize the Instantor object

Once you have linked the script, you'll need to add another code-block to your HTML file, and initialize a new Instantor JavaScript object (the object). To successfully initialize the object, you need to pass the Product Key you received from Instantor as an argument to the object constructor. Place the following code-block after the code-block from Step 3 - Linking the script.

<script>
  var instantor = new Instantor('Product Key');
</script>

Make sure to replace Product Key in the example with the the Product key you have received from Instantor. When failing to do so, the Instantor script will fail to load.

Step 5 - Inject information about the customer (optional)

To identify a customer in your process, Instantor allows you to inject customer information in the report. You can add as many customer/request-specific information as you need. It will be stored as key-value pairs, and is a free-form, with some special keywords. You will find these user parameters under the userParam: miscEntryList section of the report you receive.

The following example extends the code-block as mentioned in Step 4 - Initialize the Instantor object.

<script>
  var instantor = new Instantor('Product Key');

  instantor.userParam('first-name', 'John');
  instantor.userParam('last-name', 'Doe');
  instantor.userParam('unique-user-id', '123456');

</script>

You can read more about userParam keywords in the Identify your customer section of this documentation guide.

IMPORTANT!

Once the bank login form is loaded, all additional customer information will be discarded. Make sure you either accept user-entered information before you load the frame, or you have callback function attached to appropriate event (displayChange) via .attachEventListener method.

Step 6 - Load the Instantor Widget

To load the Instantor Widget on your website, make sure the Instantor object has been initialised with the correct product key provided by Instantor. Optionally, as described in step 5, you may inject some customer information using the .userParam.

The best practice is to assign <div> element as containing – the <iframe> is a block-level element, so it should be avoided injecting it into inline-level element. Use method load to start the injector. 

<script>
  var instantor = new Instantor('Product Key');

  instantor.userParam('first-name', 'John');
  instantor.userParam('last-name', 'Doe');
  instantor.userParam('unique-user-id', '123456');

  instantor.load('#instantor_div');
</script>

Provided target DOM element should be valid jQuery selector. Failing to provide existing DOM element, the injector script will end with error message. Providing a non-empty DOM element will result with content being overwritten by the Instantor<iframe>.

PreviousGetting startedNextIdentify your customer

Last updated