Employee Onboarding

Overview

The Employee Onboarding workflow provides a complete experience for onboarding an employee to a company. It is used to collect all required information for an employee to be added to payroll.

Implementation

import { EmployeeOnboardingFlow } from '@gusto/embedded-react-sdk';

function MyApp() {
  return(
    <EmployeeOnboardingFlow 
      companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" 
      onEvent={() => {}}
    />
  );
}

Props

Using Employee Subcomponents

Employee onboarding components can be used to compose your own workflow, or can be rendered in isolation. For guidance on creating a custom workflow, see docs on composition.

Available Subcomponents

• Employee.EmployeeList
• Employee.Profile
• Employee.Compensation
• Employee.Taxes
• Employee.PaymentMethod
• Employee Deductions
• Employee.OnboardingSummary

Employee.List

Displays a list of employees containing their full name, and their current onboarding status. An onboarding status. This list also contains actions that allow for the editing or removal of an employee.

import { Employee } from '@gusto/embedded-react-sdk';

function MyApp() {
  return (
    <Employee.EmployeeList 
      companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" 
      onEvent={() => {}} 
    />
  );
}

Props

Events

Employee.Profile

Used to collect basic information about the employee:

• First and last name
• Work address and start date
• Email address
• Social security number
• Date of birth
• And home address

This component also provides the option to invite the employee to enter some of their details themself. If selected, they can be sent an invitation to complete the form.

import { Employee } from '@gusto/embedded-react-sdk';

function MyComponent() {
  return (
    <Employee.Profile
      defaultValues={{ employee: { email: '[email protected]' } }}
      companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
      employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
      onEvent={() => {}}
      isAdmin // Set to true for admin onboarding
    />
  );
}

Props

Events

Employee.Compensation

Collects details related to the role of the employee and their compensation:

• Job title
• Employee type (eg., Hourly, Salary)
• Compensation amount
• Pay period (e.g., hourly, daily, weekly, monthly, annually)

For hourly employees, the compensation component allows for the configuration of multiple roles.

import { Employee } from '@gusto/embedded-react-sdk';

function MyComponent() {
  return(
  	<Employee.Compensation
        employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
        startDate="01-01-2025"
        onEvent={() => {}}
      />
  );
}

Props

Events

Employee.Taxes

Provides required form inputs for employee state and federal tax configuration.

import { Employee } from '@gusto/embedded-react-sdk';

function MyComponent() {
  return(
    <Employee.Taxes
      employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
      onEvent={() => {}}
    />
  );
}

Props

Events

Employee.PaymentMethod

Used for configuring employee bank account(s). Bank accounts created with this component will be used to pay the employee when payroll is run. Payments can be split across multiple accounts.

import { Employee } from '@gusto/embedded-react-sdk';

function MyComponent() {
  return(
  	<Employee.PaymentMethod
        employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
        onEvent={() => {}}
      />
  );
}

Props

Events

Employee.Deductions

Used for configuring additional withholdings from employee pay. Deductions can be set by percentage or fixed amount, and can be either recurring or one-time.

import { Employee } from '@gusto/embedded-react-sdk';

function MyComponent() {
  return(
  	<Employee.Deductions
        employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
        onEvent={() => {}}
      />
  );
}

Props

Events

Employee.OnboardingSummary

Displays the current state of employee onboarding.

import { Employee } from '@gusto/embedded-react-sdk';

function MyComponent() {
  return(
  	<Employee.OnboardingSummary
        employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
        onEvent={() => {}}
        isAdmin // Set to true for admin onboarding
      />
  );
}

Props

Events