# KASKO JS

Before you start this guide you will need [keys](https://docs.kasko.io/kasko-api-documentation/keys "mention").

## Integration KASKO JS

```html
<script type="text/javascript" src="https://eu1.kaskojs.com/v2"></script>
```

Include the following JS snippet in the HEAD of the page or at above where you want the widget to be created.

Snippet can be acquired in Product Builder product's Integration section.

## Widget Container

```html
<div id="kasko-widget-container"></div>
```

Add a container div where you want the widget to be created on the page.

This can be given any ID but we have used `kasko-widget-container` in our example below. This container can be set with any width, but should be left “height:auto” so that KASKO JS can handle the height responsively.

## Webview Mode

This is the default, if no mode is configured. It loads widget inline on the page and adjusts height of the container automatically based on then height of widget contents.

```
mode: 'webview'
```

## Popup Mode

If you wish to have the widget popup in a new window instead of loading inline on the page please add the following to the Kasko.Setup method detailed below.

```
mode: 'popup'
```

When using popup mode the container attribute is the target which KASKO JS will attach the click event handler too.

## Full Screen Mode

If you wish to have the widget to consume the whole page instead of loading inline on the page please add the following to the Kasko.Setup method detailed below.

```
mode: 'fullscreen'
```

## Setup KASKO JS

```html
<script>
  Kasko.Setup({
    container: 'kasko-widget-container',
    key: 'TEST OR LIVE CLIENT KEY',
    touchpoint: 'Touchpoint ID',
    language: 'en',
    app: 'webapp',
    data: {
      prefill_data: 'see prefill'
    }
  });
</script>
```

Below the widget container div include the widget setup javascript

### Parameters

Widget setup parameters

<table data-full-width="true"><thead><tr><th>Parameter</th><th>required</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>container</td><td>yes</td><td>string</td><td>ID of the div you want the KASKO Widget to appear in.</td></tr><tr><td>key</td><td>yes</td><td>string</td><td>TEST or LIVE client key provided by KASKO.</td></tr><tr><td>language</td><td>yes</td><td>string</td><td>Language in which the product should be shown in.</td></tr><tr><td>app</td><td>yes</td><td>string</td><td>App types. Allowed values are <code>webapp</code> , <code>portal</code> , <code>fnol</code> . Default is set to <code>webapp</code> .</td></tr><tr><td>integration</td><td>no</td><td>string</td><td>Integration ID provided by KASKO. Required for <code>fnol</code> &#x26; <code>portal</code> only.  </td></tr><tr><td>touchpoint</td><td>no</td><td>string</td><td>Touchpoint ID provided by KASKO. Required for everything except the portal app.</td></tr><tr><td>data</td><td>no</td><td>data object</td><td>Prefill data.</td></tr><tr><td>metadata</td><td>no</td><td>data object</td><td>Additional, non-validated data stored on all policies.</td></tr><tr><td>config</td><td>no</td><td>config object</td><td>Specific product configuration.</td></tr><tr><td>callback</td><td>no</td><td>object</td><td>Custom callbacks triggered at various stages within the application.</td></tr></tbody></table>

### Generic Optional data parameters

These fields can be provided to the data object.

These fields can pre-populate widget data or be used to pass extra information

| Parameter   | Type   | Description                                                          |
| ----------- | ------ | -------------------------------------------------------------------- |
| first\_name | string | First name of the customer - This will pre-populate in the widget    |
| last\_name  | string | Last name of the customer - This will pre-populate in the widget     |
| email       | string | Email Address of the customer - This will pre-populate in the widget |

{% hint style="info" %}
Please see product specific page for product specific optional data parameters.
{% endhint %}

### Generic Optional config parameters

These fields configure the application depending on the needs of the page.

| Parameter             | Type      | Description                                                                    |
| --------------------- | --------- | ------------------------------------------------------------------------------ |
| header\_visibility    | string\[] | On what devices should the header be visible? Defaults to ALL devices.         |
| footer\_visibility    | string\[] | On what devices should the footer be visible? Defaults to desktop and tablet.  |
| hamburger\_visibility | string\[] | On what devices should the hamburger side menu be visible? Defaults to mobile. |

Available device types: desktop, tablet, mobile. If no device type is defined (\[] - empty array), then this section will not be visible on any device.

{% hint style="info" %}
Please see product specific page for product specific optional config parameters.
{% endhint %}

### Callbacks

Sometimes it's necessary to add custom functionality on some event. For example, tracking every policy purchase to an external tool. This can be achieved via callbacks.

#### **Example callback**

```html
<script>
  Kasko.Setup({
    container: 'kasko-widget-container',
    key: 'TEST OR LIVE CLIENT KEY',
    touchpoint: 'Touchpoint ID',
    language: 'en',
    callback: {
      policy_purchase: function(data) {
        console.log('Policy has been successfully purchased!', data);
      }
    }
  });
</script>
```

#### **Available callbacks**

| Parameter        | Description                                                         |
| ---------------- | ------------------------------------------------------------------- |
| policy\_purchase | Triggered when a policy has been successfully created and paid for. |

## Go Live

When testing is complete and you're ready to Go Live, please swap the Client TEST key for the Client LIVE key in your production site.

{% hint style="info" %}
You must swap you client key with the LIVE client key before going live.
{% endhint %}

## Querystring Prefill

Sometimes it's useful to prefill a webapp with predefined data. For example, an email campaign may have a link to the webapp integration. In order to store the email campaign tracker ID on the customer's policy, query string prefill can be used.

{% hint style="info" %}
?kdata=eyJmaXJzdF9uYW1lIjoiSm9obiJ9
{% endhint %}

kdata is short for KASKO data. This querystring parameter is used to prefill an application with given data (name, address, email, etc) and metadata (could be anything, but most commonly used for analytics tracking data or agent information).

{% hint style="warning" %}
kdata can only be used on the integration level. It will not work if set on webapp level (webapps.kasko.io domain). This is because KASKO JS is responsible for decoding kdata and passing it on to the webapp in a different format.
{% endhint %}

kdata value can be a url-safe-base64-encoded string or a JSON string. **It is preferred to use url-safe-base64-encoded string as it is supported by all browsers.**

Example url-safe-base64-encoding (uses [js-base64](https://github.com/dankogai/js-base64) dependency):

```javascript
var Base64 = require('js-base64').Base64;

var data = { first_name: 'John' };

var value = Base64.encode(data).replace(/[=]+$/, ''); // eyJmaXJzdF9uYW1lIjoiSm9obiJ9

console.log('?kdata=' + value); // ?kdata=eyJmaXJzdF9uYW1lIjoiSm9obiJ9
```

### Examples

url-safe-base64-encoded string (only data):

```
?kdata=eyJmaXJzdF9uYW1lIjoiSm9obiJ9
```

url-safe-base64-encoded string (data + metadata):

```
?kdata=eyJkYXRhIjp7ImZpcnN0X25hbWUiOiJKb2huIn0sIm1ldGFkYXRhIjp7ImFnZW50X2lkIjoxMjN9fQ
```

JSON string (only data):

```
?kdata={"first_name":"John"}
```

JSON string (data + metadata):

```
?kdata={"data":{"first_name":"John"},"metadata":{"agent_id":123}}
```

{% hint style="info" %}
What's *url-safe-base-encoded string*? This is a base64 encoded string that has all the trailing equals signs removed from it.
{% endhint %}

### Limitations

Some older browsers have strict max URL length limits after which the URL gets truncated. If this limit is breached, the base64 or JSON value gets broken. In general it is recommended to have the URL length below 2000 characters long. Read [this StackOverflow explanation for more information](https://stackoverflow.com/a/417184).