In-Call Chat

Enable text messaging during calls by integrating the in-call chat feature. The SDK provides a chat button in the control panel and events to help you build a custom chat experience.

Chat Button

Show Chat Button

By default, the chat button is hidden. To show it:

const callSettings = {
  hideChatButton: false,
  // ... other settings
};

Listen for Chat Button Clicks

Handle chat button clicks to open your chat interface:

CometChatCalls.addEventListener("onChatButtonClicked", () => {
  console.log("Chat button clicked");
  // Open your chat UI
});

Unread Message Badge

Update the badge count on the chat button to show unread messages:

// Set unread count
CometChatCalls.setChatButtonUnreadCount(5);

// Clear the badge
CometChatCalls.setChatButtonUnreadCount(0);

Parameter	Type	Description
count	Number	The unread message count to display

Building In-Call Chat

The Calls SDK provides the UI hooks for in-call chat, but the actual messaging functionality should be implemented using the CometChat Chat SDK or your own messaging solution.

Integration with CometChat Chat SDK

If you’re using the CometChat Chat SDK, you can:

1. Create a group for the call session
2. Use the group ID as the session ID
3. Send and receive messages through the Chat SDK
4. Update the unread badge count based on incoming messages

// Example: Update badge when new message arrives
CometChat.addMessageListener("call-chat-listener", {
  onTextMessageReceived: (message) => {
    if (message.getReceiverType() === "group" && 
        message.getReceiverId() === sessionId) {
      // Increment unread count
      unreadCount++;
      CometChatCalls.setChatButtonUnreadCount(unreadCount);
    }
  }
});