Timestamp Templates

Premium

The Chat allows you to customize how timestamps are displayed for messages through the timestampTemplate property.

To set a custom timestamp template, create a React component and assign it to the timestampTemplate property of the Chat component.

Timestamp Template Examples

The demo showcases four timestamp template implementations:

• Default: Built-in Chat component timestamp display
• Relative: Shows relative time (e.g., "5m ago", "2h ago") that updates automatically
• Detailed: Full date and time in a multi-line format
• Interactive: Clickable button to toggle between relative and absolute time formats

Note: The Relative, Detailed, and Interactive templates are custom implementations that demonstrate the flexibility of the timestamp template feature. You can implement any custom logic, formatting, or interaction patterns based on your specific requirements.

Change Theme

Theme

Loading ...

Suggested Links

• Message Templates
• Status Templates
• Chat API Reference