Skip to main content

​
Iframe Overlay

The widget renders inside a fixed-position overlay that covers the full viewport.

​
containerStyle Override

You can customize the overlay container styles by passing containerStyle when constructing the SDK: 
const transcrypts = new Transcrypts({
  apiKey: 'your-api-key',
  containerStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.8)',   // Darker backdrop
    zIndex: '1000000',                         // Higher z-index
  },
});
The containerStyle option accepts a Partial<CSSStyleDeclaration> object. These styles are merged on top of the defaults, so you only need to specify the properties you want to override. See TranscryptsOptions for the full list of default container styles.

​
z-index Considerations

The default z-index of 999999 is intentionally high to ensure the widget renders above most application content. If your application uses z-index values in this range (for modals, dropdowns, or other overlays), override it via containerStyle: 
containerStyle: {
  zIndex: '2147483647',  // Maximum 32-bit integer
}

​
Body Scroll Lock

While the widget is open, the SDK prevents the page from scrolling behind the overlay. Scrolling is restored automatically when the widget closes.

​
Animation

The overlay fades in when opened and fades out when closed for a smooth user experience.

​
Widget UI States

The widget progresses through four states:
Displayed immediately after the widget loads. Shows a centered spinner and “Loading verification…” text. This state is active while the widget fetches user data and employment records.
The main interactive state. Displays:
  • Header — TransCrypts logo and branding.
  • Progress bar — Shows {verified}/{total} jobs verified, with an animated fill bar.
  • User profile card — Full name, email, date of birth, and masked SSN.
  • Credential banner — Appears for the current employer if a TransCrypts credential is detected. Includes a “Share Credential” button that instantly verifies the current job.
  • Current Employment section — Cards for active jobs, each with a VERIFY button.
  • Previous Employment section — Cards for past jobs, each with a VERIFY button.
  • Footer — “Data encrypted & secure” badge and a Continue button.
Displayed after verification completes. Shows a green checkmark icon, “Verification Complete” heading, and a confirmation message.
Displayed when an error occurs. Shows a warning icon, “Verification Error” heading, and the error message.

​
Verification Methods

When the user clicks VERIFY on a work experience card, a modal dialog presents four verification options:
MethodIDDescriptionEstimated Time
SSA IntegrationssaVerify through Social Security Administration records for historical employment.~5 min
Previous PayrollpayrollConnect to the previous payroll provider for employment verification.~3 min
Open BankingbankingSecurely connect a bank account to verify historical income deposits.~3 min
Upload DocumentsuploadUpload a W-2 form or paystub from the employer to verify employment.~2 min
SSA Integration is marked as “Recommended” with a highlighted card and badge in the modal.
The user selects one option, and the corresponding job is marked as verified in the widget. Each work experience card displays:
  • Company logo placeholder (or icon)
  • Company name and position title
  • Date range (formatted as "Mon YYYY -- Mon YYYY" or "Mon YYYY -- Present")
  • A “Current” badge for active employment
  • VERIFY button (or a green “Verified” badge once complete)

​
Closing the Widget

The widget can be closed in three ways:
MethodResult
Backdrop ClickClicking the semi-transparent backdrop area outside the widget closes it.
Escape KeyPressing the Escape key closes the widget.
Verification CompleteThe widget closes automatically after the verification flow completes or fails.
In all cases, the verify() promise resolves with the appropriate result. If the user closed the widget manually, the result will have success: false with error code USER_CLOSED. 
{
  success: false,
  verified: false,
  error: {
    code: 'USER_CLOSED',
    message: 'User closed the verification widget',
  },
}