​
Overview

A step-by-step flow designed for employees to enroll themselves and their dependents in available benefit programs. This component is stateful and tracks the enrollement status of an employee. If for example and employee has to re-enroll due to a qualified life event, you simply render this component for the employee and Clasp will take care of the rest.

After enrollment, the Component serves as a consolidated view for employees to see all their enrolled benefits, understand coverage details, access important documents or contact information related to their benefits, and self-serve any qualified life event updates.

​
Usage

  1. Import the ClaspEmployee from the SDK.
import { ClaspEmployee } from "clasp-components";
  1. Define the components config object.
let claspConfig = {
    employeeId: "ee_12345",
    navigation: 'state',
    apiClient: 'mock',
    employerName: "Zeek's Coffee",
    platformName: "NeptuneHR",
}
FieldUsageTypeDescription
employeeIdOptionalStringThe Clasp employee ID. If not passed in, automatically populates with mock data.
navigationOptionalurl, stateurl leverages query params, state (default) is if you manage clasp-components as a controlled component
apiClientOptionalmock, sandbox, prodmock serves mock data, sandbox calls Clasp’s sandbox endpoints, and prod is to be passed when used in production
employerNameRequiredStringThe name of the employer which is used to personalize text in the UI.
platformNameRequiredStringThe name of the platform embedding Clasp. Used to personalize text in the UI.
  1. Call the component and pass in config via props.
<ClaspEmployee config={claspConfig} />
Employer ComponentComponent Styling