Installation

To seamlessly integrate the Axitech Widget into your web application, you have two options: using npm for a controlled package installation or utilizing the CDN for quick access.

Using npm (Node Package Manager)

npm install axitech-widget --save

Using CDN (Content Delivery Network)

For rapid inclusion, you can integrate the widget via CDN. Simply add the following script tag to your HTML file:

<script src="https://unpkg.com/axitech-widget@1.0.0/dist/axitech-widget.umd.js"></script>

Usage

Utilizing the Axitech Widget within your application is an intuitive process. Refer to the detailed usage for comprehensive examples on initializing the widget, customizing its behavior, and handling events.

For a quick glance, here's two sample usage scenario:

ES Module

If you've installed the widget using npm and are using it as an ES module, you can import and use it in your JavaScript code like this:

import { load } from 'axitech-widget';

load('YOUR_API_KEY', {
  type: 'claim',
  clientId: 'YOUR_CLIENT_ID',
  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',
      },
    ],
  },
  onSuccess: console.log,
  onError: console.log,
});

UMD (Global) Version

If you're using the UMD version via the CDN, you can load and initialize the widget within a DOMContentLoaded event listener:

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    ClaimsWidget.load('YOUR_API_KEY', {
      clientId: 'YOUR_CLIENT_ID',
      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',
          },
        ],
      },
      onSuccess: console.log,
      onError: console.log,
    });
  });
</script>

Initialize the widget using your API key and the configuration properties. For a detailed list of available properties, refer to the props section in the usage section.

Leverage the provided event callbacks, such as onSuccess and onError, to handle claim submission outcomes. For more details on available events, visit the events section in the detailed usage guide.

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.