> For the complete documentation index, see [llms.txt](https://instantor.gitbook.io/instantor-api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://instantor.gitbook.io/instantor-api-docs/implementing-iframe/a-step-by-step-guide.md).

# 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](http://jquery.com/). 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](https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js)). Example of Google hosted jQuery library:

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

{% hint style="warning" %}
**Heads-up!**\
Be sure to load the jQuery library using a HTTPS protocol! **jQuery version 1.7+ is a minimal requirement.**&#x20;
{% endhint %}

### 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:

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

#### For Latin American markets:

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

#### For Southeast Asian markets:

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

{% hint style="danger" %}
**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.
{% endhint %}

### 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.&#x20;

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

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

{% hint style="warning" %}
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.
{% endhint %}

### 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](/instantor-api-docs/implementing-iframe/a-step-by-step-guide.md#step-3-linking-the-script).

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

{% hint style="warning" %}
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.
{% endhint %}

### 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.

{% hint style="info" %}
The following example extends the code-block as mentioned in [Step 4 - Initialize the Instantor object](/instantor-api-docs/implementing-iframe/a-step-by-step-guide.md#step-4-initialize-the-instantor-object).
{% endhint %}

```javascript
<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](/instantor-api-docs/javascript-api/.userparam.md) section of this documentation guide.

{% hint style="warning" %}
**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](/instantor-api-docs/javascript-api/.attacheventlistener.md) method.
{% endhint %}

### 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](/instantor-api-docs/javascript-api/.userparam.md).&#x20;

{% hint style="info" %}
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.&#x20;
{% endhint %}

```javascript
<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>
```

{% hint style="danger" %}
Provided target DOM element should be valid [jQuery selector](http://api.jquery.com/category/selectors/). 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>`.
{% endhint %}
