Features list

The FeaturesList component is a responsive grid of TalkJS chat features, available to customers out of the box. This component is typically used on marketing landing pages.

Default

By default, features are shown in a 4-column layout with a blue icon background and white icon color. Both the grid and icon colors can be customized.

Replies
Voice messages
Mentions
Emoji reactions
Link previews
Edit messages
Private 1-1 chat
Group chat
Large public group chat
AI chatbot integration
Notifications
Threads
Read receipts
Message search
Conversation search
Persistent message history
File sharing
Media attachments
Typing indicator
Message translation
Announcements
Admin messages
Moderation
Mute user in channel
Ban user
Block user
Flag messages
Profanity filter
Spam protection
Domain filter
Silent messages
Location sharing
Presence indicators
Unread message count
Custom message actions
Custom message types
Analytics
Data export
Third-party integrations
Voice and video call integration
Webhooks
Multi-tenancy support
User roles
Channel list
<FeaturesList />

Customization

You can override the icon background and icon color using the iconBgColor and iconTextColor props:

Replies
Voice messages
Mentions
Emoji reactions
Link previews
Edit messages
Private 1-1 chat
Group chat
Large public group chat
AI chatbot integration
Notifications
Threads
Read receipts
Message search
Conversation search
Persistent message history
File sharing
Media attachments
Typing indicator
Message translation
Announcements
Admin messages
Moderation
Mute user in channel
Ban user
Block user
Flag messages
Profanity filter
Spam protection
Domain filter
Silent messages
Location sharing
Presence indicators
Unread message count
Custom message actions
Custom message types
Analytics
Data export
Third-party integrations
Voice and video call integration
Webhooks
Multi-tenancy support
User roles
Channel list
<FeaturesList
  gridCols="lg:grid-cols-3"
  iconBgColor="bg-gray-200"
  iconTextColor="text-black"
/>

Usage

Import the component and use it like this:
import FeaturesList from "../../components/FeaturesList";