> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# In-Call Chat

> CometChat Calling SDK v5 - In-Call Chat for JavaScript

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:

```javascript theme={null}
const callSettings = {
  hideChatButton: false,
  // ... other settings
};
```

### Listen for Chat Button Clicks

Handle chat button clicks to open your chat interface:

```javascript theme={null}
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:

```javascript theme={null}
// 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

```javascript theme={null}
// 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);
    }
  }
});
```