Status Templates

Premium

The Chat allows you to customize how message status indicators are displayed through the statusTemplate property.

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

Status Template Examples

The demo showcases three status template implementations:

• Default: Built-in Chat component status indicators
• Enhanced: Custom icons with text labels (✓ Sent, ✓✓ Delivered, ✓✓✓ Read)
• Animated: Enhanced template with smooth animations and transitions

Click on message bubbles in the demo to see the different templates in action.

Change Theme

Theme

Loading ...

Suggested Links

• Message Templates
• Timestamp Templates
• Chat API Reference