> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/components/employee-onboarding.md). # Employee Onboarding The Employee Onboarding component provides a complete multi-step flow for company admins to onboard new employees, contractors, or freelancers to their team. ### Container Component The `EmployeeOnboarding.Container` component manages the entire contract onboarding workflow, including eligibility verification, basic details collection, compliance information, compensation setup, benefits selection, bank details, and contract generation. #### Key Features * **Multi-step workflow** - Guides users through all required onboarding steps * **Resume capability** - Continue incomplete onboarding flows using a contract ID * **Type-aware** - Supports Employee, Contractor, and Freelancer contract types * **Customizable** - Override individual steps or the entire layout * **Progress tracking** - Visual progress indicator showing current and completed steps * **Responsive** - Works seamlessly on desktop and mobile devices *** ### Usage Examples #### Basic Usage Start a new onboarding flow: ```tsx import { EmployeeOnboarding } from '@Multiplier-Core/partner-sdk-react'; function OnboardingPage() { return ( ); } ``` #### Resume Existing Onboarding Continue an incomplete onboarding flow using a contract ID: ```tsx import { EmployeeOnboarding } from '@Multiplier-Core/partner-sdk-react'; function ResumeOnboardingPage() { return ( ); } ``` #### Layout Direction Control the layout direction of the onboarding flow: ```tsx import { EmployeeOnboarding } from '@Multiplier-Core/partner-sdk-react'; function VerticalLayoutExample() { return ( ); } ``` #### Fully Custom Layout Use the children render prop for complete control over the layout: ```tsx import { EmployeeOnboarding } from '@Multiplier-Core/partner-sdk-react'; function FullyCustomOnboarding() { return ( {({ onCancelOnboarding }) => (

Add New Team Member

null} />
)} ); } ``` #### Using Callback Props Handle onboarding lifecycle events with callback props: ```tsx import { EmployeeOnboarding, OnCompleteProps, OnCancelProps } from '@Multiplier-Core/partner-sdk-react'; function OnboardingWithCallbacks() { const handleError = (error: Error) => { console.error('Onboarding error:', error); // Send error to your analytics or error tracking service // Show user-friendly error message }; const handleCancel = (props: OnCancelProps) => { console.log('User cancelled onboarding', props.id); // props.id may be undefined if cancelled before contract creation if (props.id) { // Save the contract ID for later resumption localStorage.setItem('incomplete-onboarding', props.id); } // Navigate back to previous page or show confirmation dialog // Track cancellation in analytics }; const handleComplete = (props: OnCompleteProps) => { console.log('User redirected to Multiplier', props.id); // props.id contains the contract ID // Track completion in analytics // Update UI state or navigate to success page // Clean up any saved state localStorage.removeItem('incomplete-onboarding'); }; return ( ); } ``` *** ### Props #### EmployeeOnboarding.Container Props | Prop | Type | Required | Description | | --------------------------------- | ------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | No | Contract ID to resume an existing onboarding flow | | `direction` | `'horizontal' \| 'vertical'` | No | Layout direction for the container. Affects how the progress bar and content are arranged. Defaults to 'vertical'. Note: The Container's `direction` prop and the Progress component's `direction` prop work together - when Container uses 'vertical', Progress uses 'horizontal' by default, and vice versa | | `components` | `ComponentUIContextValue` | No | Custom UI components to override default components for all onboarding steps. See Component Customization for details | | `onError` | `(error: Error) => void` | No | Callback function invoked when an error occurs during the onboarding process | | `onCancel` | `(OnCancelProps) => void` | No | Callback function invoked when the user clicks the Exit button to cancel the onboarding flow | | `onComplete` | `(OnCompleteProps) => void` | No | Callback function invoked when the user navigates to Multiplier to complete the remaining steps, or when they click "Go to Multiplier" again | | `children` | `(props: ContainerChildrenProps) => ReactNode` | No | Render prop for completely custom layouts | | `renderStartStep` | `(props: StartProps) => ReactNode` | No | Custom renderer for the start/selection step | | `renderTitle` | `(props: TitleProps) => ReactNode` | No | Custom renderer for the page title | | `renderProgress` | `(props: ProgressProps) => ReactNode` | No | Custom renderer for the progress indicator | | `renderEligibility` | `(props: EligibilityProps) => ReactNode` | No | Custom renderer for the eligibility step | | `renderCompliance` | `(props: ComplianceProps) => ReactNode` | No | Custom renderer for the compliance step | | `renderBasicDetails` | `(props: BasicDetailsProps) => ReactNode` | No | Custom renderer for the basic details step | | `renderCompensation` | `(props: CompensationProps) => ReactNode` | No | Custom renderer for the compensation step | | `renderBenefits` | `(props: BenefitsProps) => ReactNode` | No | Custom renderer for the benefits step | | `renderBankDetails` | `(props: BankDetailsProps) => ReactNode` | No | Custom renderer for the bank details step | | `renderContract` | `(props: ContractProps) => ReactNode` | No | Custom renderer for the contract step | | `renderWorkDetails` | `(props: WorkDetailsProps) => ReactNode` | No | Custom renderer for the work details step | | `renderNotFound` | `(props: NotFoundProps) => ReactNode` | No | Custom renderer for the not found/error state | | `renderCancelOnboarding` | `(props: CancelProps) => ReactNode` | No | Custom renderer for cancel onboarding action | | `renderEngagement` | `(props: EngagementProps) => ReactNode` | No | Custom renderer for the engagement step | | `renderOnboardingRedirectCallout` | `(props: OnboardingRedirectCalloutProps) => ReactNode` | No | Custom renderer for the onboarding redirect callout | *** ### Types #### ContainerChildrenProps Props passed to the children render function for complete custom layouts: | Prop | Type | Required | Description | | -------------------- | ------------ | -------- | ------------------------------------------------------ | | `onCancelOnboarding` | `() => void` | Yes | Function to call when user cancels the onboarding flow | #### StartProps Props for the start/selection step: | Prop | Type | Required | Description | | -------------------- | -------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `onClickCardWrapper` | `(handler?: () => void) => void` | Yes | Function to call when select onboarding card | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### TitleProps Props for the title component: | Prop | Type | Required | Description | | ------- | ----------- | -------- | --------------------------------- | | `title` | `ReactNode` | Yes | The title text content to display | #### ProgressProps Props for the progress indicator: | Prop | Type | Required | Description | | ---------------- | ------------------------------------------ | -------- | --------------------------------------------------------- | | `steps` | `Array` | No | Array of all onboarding steps | | `currentStep` | `ContractOnboardingStep` | No | The currently active onboarding step | | `completedSteps` | `Array` | No | Array of steps that have been completed | | `getStepTitle` | `(step: ContractOnboardingStep) => string` | No | Function to get the display title for a step | | `isLoading` | `boolean` | No | Whether the progress data is currently loading | | `direction` | `'horizontal' \| 'vertical'` | No | Orientation of the progress bar. Defaults to 'horizontal' | #### EligibilityProps Props for the eligibility verification step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### ComplianceProps Props for the compliance information step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### BasicDetailsProps Props for the basic details collection step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### CompensationProps Props for the compensation setup step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### BenefitsProps Props for the benefits selection step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### BankDetailsProps Props for the bank details collection step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### ContractProps Props for the contract generation and review step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### WorkDetailsProps Props for the work details step: | Prop | Type | Required | Description | | ----------------- | ------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `currentStep` | `ContractOnboardingStep` | No | Current onboarding step | | `onboardingSteps` | `Array` | No | Array of all onboarding steps | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### NotFoundProps Props for the not found/error state: | Prop | Type | Required | Description | | ------------- | --------------- | -------- | ------------------------------------------------------ | | `error` | `Error \| null` | No | Error object if the not found state is due to an error | | `onGoBack` | `() => void` | No | Function to call when user clicks the go back button | | `title` | `string` | Yes | Title text to display in the not found state | | `description` | `string` | Yes | Description text explaining the not found state | | `buttonText` | `string` | No | Text for the action button (defaults to "Go back") | #### CancelProps Props for the cancel onboarding action: | Prop | Type | Required | Description | | -------------------- | ------------ | -------- | ------------------------------------------------------ | | `onCancelOnboarding` | `() => void` | Yes | Function to call when user cancels the onboarding flow | #### EngagementProps Props for the engagement step: | Prop | Type | Required | Description | | ------------------- | -------------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `header` | `ReactNode` | No | Optional header content for the engagement step | | `renderProgress` | `(props: ProgressProps) => ReactNode` | No | Custom renderer for the progress indicator in the engagement step | | `renderProgressBar` | `() => ReactNode` | No | Custom renderer for the entire progress bar | | `setContractType` | `(contractType: ContractType) => void` | Yes | Function to set the contract type (Employee, Contractor, or Freelancer) | | `components` | `ComponentUIContextValue` | No | Custom UI components inherited from Container. See Component Customization for details | #### OnboardingRedirectCalloutProps Props for the onboarding redirect callout: | Prop | Type | Required | Description | | --------------------------------- | ------------------------------- | -------- | ------------------------------------------------------------------- | | `refetchOnboardingProgress` | `(contractId: string) => void` | No | Function to refresh onboarding progress with a specific contract ID | | `contractId` | `Maybe` | No | Contract ID for the current onboarding flow | | `steps` | `Array` | No | Array of all onboarding steps | | `currentStep` | `Maybe` | No | The currently active onboarding step | | `isLoading` | `boolean` | No | Whether the onboarding data is currently loading | | `handleBack` | `() => void` | No | Function to navigate to the previous step | | `handleRedirection` | `(finalUrl: string) => void` | No | Function to handle redirection to Multiplier app | | `handleRefetchOnboardingProgress` | `() => void` | No | Function to refresh onboarding progress | | `isOutdated` | `boolean` | No | Flag indicating if the onboarding data is outdated | | `setIsOutdated` | `(isOutdated: boolean) => void` | No | Function to set the outdated state | #### OnCompleteProps Props passed to the `onComplete` callback when the user completes the onboarding flow: | Prop | Type | Required | Description | | ---- | -------- | -------- | ------------------------------------------- | | `id` | `string` | Yes | The contract ID of the completed onboarding | #### OnCancelProps Props passed to the `onCancel` callback when the user cancels the onboarding flow: | Prop | Type | Required | Description | | ---- | ----------------------------- | -------- | -------------------------------------------------------------------------------------------------------- | | `id` | `string \| null \| undefined` | No | The contract ID if available. May be undefined if onboarding was cancelled before a contract was created | *** ### CSS Customization The Employee Onboarding component exposes CSS classes on key elements to allow styling customization. These classes don't apply any styles by default—they're hooks for your custom CSS. > **Layout Note:** This component is designed to fill 100% of the width of its parent container. For the best user experience, we recommend wrapping it in a container with a defined `max-width` (e.g., `742px`) or placing it inside a Modal/Dialog. #### CSS Class Reference **Container (SDK-level)** | Class | Element | Description | | ---------------------------------------------- | ------------- | ---------------------------------------- | | `.multiplier-sdk__onboarding-container` | Root wrapper | Main container for the onboarding widget | | `.multiplier-sdk__onboarding-container__title` | Title section | Title and exit button wrapper | | `.multiplier-sdk__onboarding-container__main` | Content area | Main content wrapper | **Components** | Class | Element | Description | | ---------------------------------------------- | ------------ | ------------------------------------- | | `.multiplier-sdk__onboarding-progress` | Progress bar | Step progress component | | `.multiplier-sdk__onboarding-start` | Start page | Start/selection step container | | `.multiplier-sdk__onboarding-eligibility` | Page | Eligibility step container | | `.multiplier-sdk__onboarding-basic-details` | Page | Basic details step container | | `.multiplier-sdk__onboarding-compensation` | Page | Compensation step container | | `.multiplier-sdk__onboarding-benefits` | Page | Benefits step container | | `.multiplier-sdk__onboarding-compliance` | Page | Compliance step container | | `.multiplier-sdk__onboarding-bank-details` | Page | Bank details step container | | `.multiplier-sdk__onboarding-contract` | Page | Contract step container | | `.multiplier-sdk__onboarding-work-details` | Page | Work details step container | | `.multiplier-sdk__onboarding-engagement` | Page | Engagement step container | | `.multiplier-sdk__onboarding-redirect-callout` | Component | Onboarding redirect callout container | | `.multiplier-sdk__not-found` | Error page | Not found/error state container | | `.multiplier-sdk__onboarding-redirect-screen` | Page | Redirect screen to multiplier | **Additional classname** | Class | Element | | -------------------------------------------------------------- | --------------------------------------------------- | | `multiplier-onboarding__health-insurance-review-details` | Benefit > Health Insurance container | | `multiplier-onboarding__health-insurance-dependent-message` | Benefit > Health Insurance > Dependents description | | `multiplier-compensation__additional-compensation` | Compensation > Additional compensation container | | `multiplier-compensation__additional-compensation-title` | Compensation > Additional compensation title | | `multiplier-compensation__additional-compensation-description` | Compensation > Additional compensation description | | `multiplier-onboarding__people-manager` | Basic Detail > People Manager container | | `multiplier-onboarding__people-manager-title` | Basic Detail > People Manager title | | `multiplier-onboarding__people-manager-description` | Basic Detail > People Manager description | #### Customization Examples **Example 1: Full-Width Page Layout** ```tsx import { EmployeeOnboarding } from '@Multiplier-Core/partner-sdk-react'; function OnboardingPage() { return (
); } ``` **Example 2: Fixed Width Container** ```tsx import { EmployeeOnboarding } from '@Multiplier-Core/partner-sdk-react'; function OnboardingPage() { return (
); } ``` **Example 3: Custom Container Styling** ```css /* Custom container with background and padding */ .custom-onboarding-wrapper .multiplier-sdk__onboarding-container { background: white; border-radius: 16px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15); padding: 40px; } /* Custom title styling */ .custom-onboarding-wrapper .multiplier-sdk__onboarding-container__title { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; } /* Custom step container styling */ .custom-onboarding-wrapper .multiplier-sdk__onboarding-eligibility, .custom-onboarding-wrapper .multiplier-sdk__onboarding-basic-details, .custom-onboarding-wrapper .multiplier-sdk__onboarding-compensation { background: #f9fafb; border-radius: 8px; padding: 24px; } /* Removing stepper on the redirect screen */ .multiplier-sdk__onboarding-redirect-screen .multiplier-sdk__onboarding-progress { display: none; } ``` ```tsx
``` **Example 4: Custom Progress Bar Styling** ```css .multiplier-sdk__onboarding-progress { background: #f5f5f5; border-radius: 8px; padding: 16px; margin-bottom: 24px; } ``` **Example 5: Responsive Layout** ```css .multiplier-sdk__onboarding-container { padding: 16px; } @media (min-width: 768px) { .multiplier-sdk__onboarding-container { padding: 32px; } } @media (max-width: 640px) { .multiplier-sdk__onboarding-container__title { flex-direction: column; gap: 12px; } .multiplier-sdk__onboarding-container__main { padding: 16px; } } ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://developer.usemultiplier.com/multiplier-embed-sdks/components/employee-onboarding.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.