Skip to navigation
Vitable Drops

Employer Benefits Widget

Embed Vitable's benefits administration dashboard into your application so employers can manage plans, enrollments, and coverage.

Employer benefits administration dashboard

Employer Benefits gives HR administrators enrollment visibility, plan assignment tools, and coverage information inside your application. It requires an employer-bound access token.

Before You Begin

Add the Widget

import { EmployerBenefitsWidget } from "@vitable-inc/drops/react"
function BenefitsAdmin() {
  return (
    <EmployerBenefitsWidget
      height="800px"
      onReady={() => console.log("Widget ready")}
      onError={(code, message) => {
        console.error("Widget error", code, message)
      }}
    />
  )
}

Place EmployerBenefitsWidget inside the VitableConnectProvider configured for the current employer.

Props

Layout

PropTypeDefaultPurpose
widthstring | number"100%"Iframe width
heightstring | number"600px"Iframe height
classNamestring—CSS class applied to the iframe
styleCSSProperties—Inline styles applied to the iframe

Events

PropSignatureWhen it fires
onReady() => voidThe iframe is loaded and ready
onEmployerBenefitsReady() => voidThe benefits interface is visible and interactive
onTokenExpired() => voidA token expires; the SDK still attempts refresh
onAuthError(code: string, message: string) => voidAuthentication fails
onError(code: string, message: string) => voidAny widget error occurs

Switch Employers Safely

Use the current employer ID as the provider’s contextKey. Changing it resets the session and fetches a token bound to the new employer:

import { useCallback } from "react"
function EmployerSession({ currentEmployerId }: { currentEmployerId: string }) {
  const fetchToken = useCallback(
    createTokenFetcher("employer", currentEmployerId),
    [currentEmployerId],
  )
  return (
    <VitableConnectProvider
      baseUrl={VITABLE_WIDGET_URL}
      fetchToken={fetchToken}
      contextKey={currentEmployerId}
    >
      <EmployerBenefitsWidget />
    </VitableConnectProvider>
  )
}

The same provider can also render Employer Billing because both widgets use the same employer scope.