Example

Dive into this comprehensive example that vividly demonstrates how to harness the properties to intricately tailor the app's widget, thus elevating the user experience:

{
  "type": "claim",
  "clientID": "your-client-id",
  "contact": {
    "phone": "123-456-7890",
    "email": "contact@example.com"
  },
  "policy": {
    "provider": "ABC Insurance",
    "number": "P12345",
    "validTo": "2001-01-01",
    "validFrom": "2000-01-01",
    "vehicle": {
      "licensePlate": "XYZ-123"
    },
    "holder": {
      "phone": "987-654-3210",
      "email": "user@example.com",
      "firstName": "John",
      "lastName": "Doe"
    },
    "linkedContacts": [
      {
        "firstName": "Jane",
        "lastName": "Doe",
        "email": "jane.doe@test.com"
      },
      {
        "firstName": "Test",
        "lastName": "User",
        "email": "test@test.com"
      }
    ]
  },
  "currentUserId": "user-id",
  "initialStepKey": "accident-selector",
  "theme": {
    "primary": "#FF5733",
    "secondary": "#6C7A89"
    // ... other theme properties
  },
  "fontFamily": "Arial",
  "privacyPolicyUrl": "https://example.com/privacy-policy"
}

This illustrative example unveils the intricate configuration possibilities achievable through the properties. Spanning from specifying claim types and client identification to seamlessly incorporating contact information and fine-tuning visual aesthetics, these properties empower a tailored and refined user journey.

For a comprehensive insight into each property and its nuances, kindly refer to the Widget Properties section above. This segment elaborates on the purpose, usage, and potential of each property, offering you the tools to craft a widget that precisely aligns with your intentions.

Embedding the Widget

To embed the widget on your website or application, you need to add the following HTML code wherever you want the widget to appear:

<claims-widget></claims-widget>

Simply include this HTML element in your web page or application code, and the widget will be embedded and displayed in the specified location.

Customized Initialization with Loading Options

Empowering you with versatility, our widget presents a sophisticated load function, enabling two distinct methods of initialization that align seamlessly with your needs:

  1. API Key-based Initialization: Employ your API key alongside the options JSON object to prime the widget for operation. This method provides direct configuration of the widget.
    load('API-KEY', {
  type: 'accident',
  clientID: 'your-client-id',
  // ... other properties
});
  2. Secure Client ID and Web Token Initialization: For heightened security, utilize your client ID and a JSON web token. Encode the options JSON object using your API key as a secret for encryption. Ensure that you use your API key as the secret for encoding. Notably, the client ID in the options is redundant when using this method, as it is passed as the first parameter so you do not necessarily need to add into options.
    load('CLIENT-ID', 'ENCODED-JSON-WEB-TOKEN', callbacks);

By harnessing these dynamic methods, you seamlessly integrate the widget, adapting its functionality precisely to your requirements. Secure initialization ensures confidentiality, allowing the widget to elegantly conform to your application's demands.

Table of Contents