How to Customize the HeaderView title in the Conversation

[elliot-choic]

Versions

Summary

This guide explains how to customize the Conversation header title, so you can use your own layout and data.

Guide & Snippet

iOS

How to Customize the HeaderView title in the Conversation

This guide shows how to change the title text of the Conversation Header TitleView.

You can customize the header title of the conversation screen by subclassing SBAConversationTitleView and overriding the loadTitle() method.

Step 1: Create a Custom Conversation TitleView Class

Create a subclass of SBAConversationTitleView and override the loadTitle() method:

import SendbirdAIAgentMessenger

class CustomConversationTitleView: SBAConversationTitleView {
    override func loadTitle() {
        self.titleLabel?.text = "Custom title"
    }
}

Step 2: Register the Custom ConversationTitleView

Before presenting the conversation view, register your custom header titleView class:

SBAModuleSet.ConversationModule.Header.TitleView = CustomConversationTitleView.self

Android

Header

• Description

Android

Steps to Customize Conversation Header Title

The following steps show how to replace only the Conversation header title, while keeping the rest of the UI/behavior intact.

---

1. Create a Custom Conversation Header Component

Extend ConversationHeaderComponent and override only what you need.

class CustomConversationHeaderComponent(
    context: Context,
    currentTheme: MessengerTheme,
    currentThemeMode: MessengerThemeMode,
    settings: MessengerSettings?,
    args: Bundle,
) : ConversationHeaderComponent(
    context,
    currentTheme,
    currentThemeMode,
    settings,
    args
)

2. Override notifyChannelUpdated to Change the Title

Since the header is redrawn whenever the channel/status updates, override notifyChannelUpdated and replace the title after the default draw.

class CustomConversationHeaderComponent(
    context: Context,
    currentTheme: MessengerTheme,
    currentThemeMode: MessengerThemeMode,
    settings: MessengerSettings?,
    args: Bundle,
) : ConversationHeaderComponent(context, currentTheme, currentThemeMode, settings, args) {

    override fun notifyChannelUpdated(channel: GroupChannel?, settings: MessengerSettings?) {
        super.notifyChannelUpdated(channel, settings)
        // The header is redrawn whenever the channel is updated,
        // so overwrite the title after the default draw
        setTitle("Custom title")
    }
}

Why call setTitle inside notifyChannelUpdated?
Because the header is redrawn whenever the channel information (name, status, handoff, etc.) changes.
Overwriting the title after the default update ensures your custom title remains in place.

3. Register the Custom Component with the Provider

When creating the ConversationModule, inject your custom component as headerComponent.

AIAgentModuleProviders.conversation = ConversationModuleProvider {
        context, currentTheme, currentThemeMode, settings, args ->
    ConversationModule(
        context = context,
        currentTheme = currentTheme,
        currentThemeMode = currentThemeMode,
        settings = settings,
        args = args,
        headerComponent = CustomConversationHeaderComponent(
            context,
            currentTheme,
            currentThemeMode,
            settings,
            args
        )
    )
}

Important: This registration must be done before calling MessengerLauncher.attach() or launching MessengerActivity.
The provider must be ready before the screen is created in order for the custom component to take effect.

JS

Header

• Description

   // code block

Reference

No response

Screenshots

As-is	To-be