Embedding widget guidelines

This document describes the process of embedding Itemization widget into 3rd party web page.

Background

A widget is an application that provides ClaimShop Self Service functionality directly on a 3rd party web page. Once the widget is added to a site, no technical maintenance is required. The content is updated automatically on the host site whenever changes are made, allowing users to have up-to-date content.

widget

Prerequisites

  1. Compatible most popular browsers, including Internet Explorer 9 and above
  2. Javascript should be enabled in the browser
  3. Document charset is UTF-8

Integration

In order to embed Itemization widget on a web page the following steps should be performed:

Widget container

Add <div> element to the predefined place on a page. Choose unique id for this element (e.g. "widget_id" ). This div will be a container for the widget.

<div id="widget1_id"></div>

Embedding widget script

Javascript:

var script = document.createElement("script");
script.setAttribute('defer','');
script.src = "{integartionLink}?sso_token={ssoToken}&widget=true&target={widget_target_id}&options={optionsVariableName}";
document.getElementsByTagName("head")[0].appendChild(script);

HTML:

Add <script> element before the closing </body> tag

<script type="application/javascript" src="{integartionLink}?sso_token={ssoToken}&widget=true&target={widget_target_id}&options={optionsVariableName}" defer>
</script>

Where:

  1. integrationLink is a URL link received from Scalepoint Case Data API, this link contains case token. e.g. https://sanbox.scalepoint.com/api/integration/dk/abcinsurance/v1/case/ci.74316e01-53c0-413d-8abe-e089aad3df5e
  2. sso_token request parameter is an SSO short-lived token received from Scalepoint Authorization Service required
  3. target request parameter is an id of the div container (widget1_id in the example above) required
  4. options request parameter is a name of the variable containing call back functions (widget1_options in the example below) optional

Callback functions (optional)

When user finishes working with widget he/she saves or submits the loss items. After this default Thank you message is shown.

This behavior can be customized. For this purpose callback functionality is implemented.

To add callback functions the following actions should be performed:

  • add javascript before the embedding script (see above section)

  • create global object variable with unique name (e.g. widget1_options)

  • add functions with name saveCallback and submitCallback (these are constant names and should not be changed) as object properties.

<script type="application/javascript">
    window.widget1_options = {
        saveCallback: function () {
            //custom code here
            alert('Thank you for SAVING');
        },
        submitCallback: function () {
            //custom code here
            alert('Thank you for SUBMITTING');
        }
    }
</script>

Page code sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="widget1_id"></div>
</body>
<script>
  window.widget1_options = {
    saveCallback: function () {
      alert('Thank you for SAVING');
    },
    submitCallback: function () {
      alert('Thank you for SUBMITTING');
    }
  }

  var script = document.createElement("script");
  script.setAttribute('defer','');
  script.src = "https://sanbox.scalepoint.com/api/integration/dk/abcinsurance/v1/case/ci.74316e01-53c0-413d-8abe-e089aad3df5e?sso_token=2b207459114a8f7a8d45a87c39b1649c&widget=true&target=scalepoint_widget_id&options=widget1_options";

  document.getElementsByTagName("head")[0].appendChild(script);
</script>
</html>




see more about widget implementation: