How to customize the background color of the Conversation List footer area

[elliot-choic]

Versions

Summary

This guide explains how to customize the background color of the Conversation List Footer area

Guide & Snippet

iOS

How to Customize the Background Color of the Footer Area

You can customize the footer button's background color by subclassing SBAConversationListBottomView and overriding setupStyles().

Step 1: Create a Custom Bottom View

import SendbirdAIAgentMessenger
import UIKit

class CustomConversationListBottomView: SBAConversationListBottomView {
    override func setupStyles() {
        super.setupStyles()

        // Define custom background color
        let customBackgroundColor = UIColor.systemPink.withAlphaComponent(0.1)

        // Change button background color
        self.button?.setBackgroundImage(customBackgroundColor.asImage, for: .normal)
    }
}

// UIColor to UIImage conversion utility
extension UIColor {
    var asImage: UIImage? {
        let size = CGSize(width: 1, height: 1)
        UIGraphicsBeginImageContext(size)
        defer { UIGraphicsEndImageContext() }

        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        context.setFillColor(self.cgColor)
        context.fill(CGRect(origin: .zero, size: size))

        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

Step 2: Register the Custom View

SBAModuleSet.ConversationListModule.BottomView = CustomConversationListBottomView.self

Notes:

• You can also change the button text color using button?.setTitleColor(color, for: .normal)
• The asImage extension converts UIColor to UIImage for button backgrounds

Android

Steps to Customize the Footer Area Background Color

Step 1: Create a Custom Theme with Modified ConversationListFooterTheme Style

Extend the default theme and override only the footer.backgroundColor.

class CustomLightTheme(val default: MessengerTheme) : MessengerTheme by default {
    override val conversationList: ConversationListTheme =
        object : ConversationListTheme by default.conversationList {
            override val footer: ConversationListFooterTheme
                get() = object : ConversationListFooterTheme {
                    override val backgroundColor: ColorRef
                        get() = ColorRef(COLOR_INT)
                    override val textAppearance: TextAppearance
                        get() = TextAppearance(FONT_STYLE_RES, TEXT_COLOR_INT)
                }
        }
}

Step 2: Register the custom theme

Make sure to register your MessengerTheme using AIAgentThemeProviders.

AIAgentThemeProviders.light = ThemeProvider {
    CustomLightTheme(LightTheme())
}

React

How to customize the background color of the Conversation List footer area

You can customize the footer background color by creating a custom Footer component.

Step 1: Create a Custom Footer Component

import { useMessengerContext } from '@sendbird/ai-agent-messenger-react';

const CustomListFooter = () => {
  return (
    <div
      style={{
        backgroundColor: '#FFE5F0',  // Your custom background color (light pink)
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '16px',
        cursor: 'pointer'
      }}
      onClick={() => {
        console.log('Start new conversation');
      }}
    >
      <span style={{
        color: '#333333',
        fontSize: '16px',
        fontWeight: '700'
      }}>
        Talk to Agent
      </span>
    </div>
  );
};

Step 2: Register the Custom Component

import {
  AgentProviderContainer,
  ConversationList,
  ConversationListLayout
} from '@sendbird/ai-agent-messenger-react';

function App() {
  return (
    <AgentProviderContainer
      applicationId="YOUR_APP_ID"
      aiAgentId="YOUR_AI_AGENT_ID"
    >
      <ConversationListLayout.Template>
        <ConversationListLayout.Footer component={CustomListFooter} />
      </ConversationListLayout.Template>

      <ConversationList
        onOpenConversationView={(channelUrl, status) => {
          console.log('Opening conversation:', channelUrl);
        }}
      />
    </AgentProviderContainer>
  );
}

Notes:

• The default footer has the primary color background from the theme
• The footer button text uses the primary contrast content color (white by default)
• The footer includes a "Talk to Agent" button that creates or opens a conversation

Reference

No response

Screenshots

No response