Claims Widget
The Claims Widget is an embeddable, self-service claims portal for your policyholders. Dropped into your own site, it lets a customer sign in, see their claims, open a new claim against one of their policies, upload supporting documents, chat with support, and provide the bank/payout details needed to get paid โ all under your branding.
It pairs naturally with Parametric Flight Protection: when Sitata automatically creates a payout claim, the widget is where your customer supplies their payout details and tracks the claim to completion. It works equally well for any Sitata product that produces claims.
What Your Customer Can Do
- Sign in with a passwordless email PIN โ or skip login entirely when you pre-authenticate them (see
userToken). - See their claims โ a list of every claim with its status, date, and requested amount.
- Open a new claim through a guided wizard: pick the policy, complete a dynamic claim form, enter the amount, attach documents, then review and submit.
- Track a claim through its lifecycle and read status-specific guidance.
- Provide payout details โ when a claim is ready for payment, a bank-details form (powered by Wise) collects where the money should go.
- Get help โ a live support chat appears on any claim that has a conversation attached.
Getting Started
Embedding the widget takes a mount element and a few lines of JavaScript.
First, add a container element and the loader script. The loader injects the widget's JavaScript and CSS into your page.
<!-- this element will contain the widget -->
<div id="claims-app"></div>
<!-- put this script tag just before your closing </body> tag -->
<script async type="text/javascript" src="https://www.sitata.com/widgets/claims.js"></script>
Next, wait for the widget to load by listening for the sitata:claimsReady event, then instantiate and run it with your configuration:
window.document.addEventListener("sitata:claimsReady", function () {
var el = document.getElementById("claims-app");
var widget = new window.Sitata.claims(el, {
// your organization's identifier
orgId: "<YOUR ORG ID HERE>",
// your organization's PUBLIC token
token: "<YOUR PUBLIC TOKEN HERE>",
// whitelabel branding
isB2B: true,
companyName: "Your Company",
logoUrl: "https://your-company.co/logo.png",
primaryColor: "#f05800",
accentColor: "#f000e8"
});
widget.run();
});
That is the entire contract: a container element, new window.Sitata.claims(el, options), then .run().
info
Configuration can also be supplied as a data-config attribute. In a server-rendered page you can put a JSON config object directly on the mount element (<div id="claims-app" data-config='{ ... }'></div>). Values in data-config take precedence over those passed to the constructor. This is how Sitata's own hosted claim pages are rendered. See Configuration.
Authentication
The widget authenticates your organization with your orgId and your public token (sent as Authorization: PUB <token>) โ the same public token used by Sitata's other embeddable widgets, and safe for front-end use. Requests are additionally validated against your allow-listed referer domains.
Your customer is authenticated separately, in one of two ways:
- Passwordless PIN โ the widget emails the customer a PIN and signs them in. Nothing extra is required from you.
- Pre-authenticated (SSO-style) โ pass a
userTokenfor the signed-in customer and the widget validates it and skips the login screen entirely. This is the smoothest experience when the customer is already logged in to your portal.
Branding
The widget is designed to live inside your product:
- Set
isB2B: trueand providecompanyName,logoUrl,primaryColor, andaccentColorto brand it as your own. In whitelabel mode a small "Powered by Sitata" footer is shown. - Set
hideHeader: trueto remove the widget's own header bar so it nests cleanly inside your existing page chrome.
The widget inherits your page's font and lays out responsively. Next we will cover the full set of configuration options.