Subscribe to real-time updates through both client-side events and server-side webhooks.

Events and Webhooks Guide

This guide introduces the key concepts and common use cases for both approaches.
For technical details, refer to our Webhook Reference and UI Component Reference

Overview

Easyteam provides two ways to receive updates:

Client-Side Events: Receive real-time updates in your frontend through component callbacks.

Server Webhooks: Get server-to-server notifications for critical state changes.

Client-Side Events

Every Easyteam component accepts an onEvent callback to notify you of user actions and state changes in real-time:

Common client events include:

Clock in/out actions

Break starts and ends

Timesheet modifications

Common Client-Side Events Use Cases

Use these events to display custom information and success messages, implement your own screen transitions and gather client-side usage metrics.

For a complete list of events and their payloads, see our UI Components Reference.

Supported Events

Respond to component-specific events by passing a callback function to the onEvent parameter and filter the event by event.event_type.

Event	Component	Description
onClockIn	Clock	Triggered when an employee clocks in
onClockOut	Clock	Triggered when an employee clocks out
onBreakStarted	Clock	Triggered when an employee starts a break
onTimesheetsAdd	Timesheets	Triggered when a new time card is added
onTimesheetsEdit	Timesheets	Triggered when timesheet data is modified
onTimesheetsExport	Timesheets, EmployeeList	Triggered when clicking the 'Export' or 'Send to Email' button
onDateRangeChange	Timesheets, EmployeeList	Triggered when using the date selector on timesheet screens
onSettingsSave	Settings	Triggered when saving on the settings screen

Example event reference

Each event contins relevant data based on the action performed. See the example below:

Server-Side Webhooks

Webhooks provide server-to-server notifications for critical updates. They're essential for keeping your systems synchronized with Easyteam's data.

🔒

Webhooks are authenticated using Convoy's Webhook Delivery system to ensure security and reliability.

Common Webhook Use Cases

Syncing timesheet data with payroll systems

Updating attendance records

Clocking employees in or out based on external logic

Processing export requests

Basic Webhook Handler Example

Please reach out to our team to set up your sandbox webhook destination, along with the required authentication and signature info.

Best Practices

For Client Events

Handle events asynchronously to maintain app responsiveness.

Use debouncing for frequent events to avoid performance bottlenecks.

Log important events for debugging and analytics.

For Webhooks

Verify webhook signatures.

Process webhooks asynchronously.

Store incoming webhook data before further processing for reliability.

Next Steps

Set up Authentication

Render the components and respond to events

Events

Events and Webhooks Guide#

Overview#

Client-Side Events#

Common Client-Side Events Use Cases#

Supported Events#

Example event reference#

Server-Side Webhooks#

Common Webhook Use Cases#

Basic Webhook Handler Example#

Best Practices#

For Client Events#

For Webhooks#

Next Steps#

Events and Webhooks Guide

Overview

Client-Side Events

Common Client-Side Events Use Cases

Supported Events

Example event reference

Server-Side Webhooks

Common Webhook Use Cases

Basic Webhook Handler Example

Best Practices

For Client Events

For Webhooks

Next Steps