Standalone Mode Usage

The Axitech Widget also provides a standalone mode, allowing you to integrate the widget without npm installation. In standalone mode, users need to make an API request to our API, which will generate access URLs for each of your users.

To generate a standalone access link, you need to make an API request to our endpoint. Here is a decription of the api endpoint:

POST /:clientId/link (generates a standalone access link)
Parameters
nametypedata typedescription
callbackUrlrequiredstringThis parameter will be the url where the user will be redirected to after finishing the claim submission
callbackOnSubmitoptionalstringThis parameter will determine when the user is redirected, if true it will redirect the user immediately after submission without showing the user a success page (false by default)
configrequiredObjectSimilar to Widget Properties accepted by the embedded version of the widget (props marked with * will be available in the standalone version as well) Note: the currentUserId parameter is required in the standalone version
Examples
Typescript
import axios, { AxiosResponse } from 'axios';

const clientId = 'YOUR_CLIENT_ID';
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://admin.axiwidget.com/${clientId}/link`;

const requestBody = {
  callbackUrl: 'https://example.com/callback',
  callbackOnSubmit: false,
  config: {
    // ... (your widget configuration)
  },
} satisfies WidgetRequestBody;

axios
  .post(apiUrl, requestBody, {
    headers: {
      'x-api-key': apiKey,
      'Content-Type': 'application/json',
    },
  })
  .then((response: AxiosResponse<{ data: string }>) => {
    console.log('Access URL:', response.data.data);
  })
  .catch((error) => {
    console.error('Error:', error.response?.status, '-', error.response?.data);
  });

interface WidgetRequestBody {
  callbackUrl: string;
  callbackOnSubmit: boolean;
  config: {
    contact: {
      email: string;
      phone: string;
      link?: string;
    };
    currentUserId: string | number;
    policy?: {
      provider?: string;
      number?: string;
      validTo?: string;
      validFrom?: string;
      holder?: {
        firstName?: string;
        lastName?: string;
        email?: string;
        phone?: string;
      };
      vehicle?: {
        licensePlate?: string;
      };
      linkedContacts?: {
        firstName?: string;
        lastName?: string;
        email?: string;
        phone?: string;
      }[];
    };
    initialStepKey?: StepKey;
    privacyPolicyUrl?: string;
  };
}
PHP Laravel
  use Illuminate\Support\Facades\Http;

  $clientId = 'YOUR_CLIENT_ID';
  $apiKey = 'YOUR_API_KEY';
  $apiUrl = "https://admin.axiwidget.com/{$clientId}/link";

  $requestBody = [
      'callbackUrl' => 'https://example.com/callback',
      'callbackOnSubmit' => false,
      'config' => [
          // ... (your widget configuration)
      ],
  ];

  $response = Http::withHeaders([
      'x-api-key' => $apiKey,
      'Content-Type' => 'application/json',
  ])->post($apiUrl, $requestBody);

  if ($response->successful()) {
      $responseData = $response->json();
      echo 'Access URL: ' . $responseData['data'];
  } else {
      echo 'Error: ' . $response->status() . ' - ' . $response->body();
  }

In the example above:

Replace clientId in the URL with your actual client ID. Replace YOUR_API_KEY in the x-api-key header with your actual API key. The API will respond with an access URL that users can use to access the standalone version of the Axitech Widget.

Example Response

{
  "data": "https://admin.axiwidget.com/verify/ACCESS_CODE?token=ENCODED_TOKEN"
}

Users can open this URL in their web browser to access the standalone version of the Axitech Widget.

For additional details on the widget properties and customization options, refer to the Widget Properties section in the documentation.

That's it! You've successfully integrated the standalone version of the Axitech Widget into your application using API requests.

Table of Contents