iOS Customization
Learn how to customize the appearance and behavior of the Heapchat SDK for iOS
Color Customization
The following example shows how to customize all available color properties:
import SwiftUI
import HeapchatSDK
let heapchatScreenConfig = HeapchatScreenConfig(
chatTheme: ChatTheme(
colors: ChatTheme.Colors(
// Main background color of the chat screen
mainBG: Color(hex: "#FFFFFF"),
// Your messages
messageMyBG: Color(hex: "#007AFF"), // Message bubble background
messageMyText: Color(hex: "#FFFFFF"), // Message text color
messageMyTimeText: Color(hex: "#8E8E93"), // Timestamp color
// Other participant's messages
messageFriendBG: Color(hex: "#F2F2F7"), // Message bubble background
messageFriendText: Color(hex: "#000000"), // Message text color
messageFriendTimeText: Color(hex: "#8E8E93"), // Timestamp color
// Input area customization
inputBG: Color(hex: "#F2F2F7"), // Input field background
inputText: Color(hex: "#000000"), // Input text color
inputPlaceholderText: Color(hex: "#8E8E93"), // Placeholder text color
// Action buttons
sendButtonBackground: Color(hex: "#007AFF") // Send button and loading indicators
)
)
)Empty State Customization
You can customize the message shown when there are no messages in the chat:
let heapchatScreenConfig = HeapchatScreenConfig(
noMessageText: "Start your conversation here!"
)Applying Customizations
To apply your customizations, pass the configuration when initializing the HeapchatScreen view.
let heapchatScreenView = HeapchatScreen(config: heapchatScreenConfig)You can also embed the chat screen in different ways:
// As a full screen view
NavigationLink("Open Chat") {
heapchatScreenView
}
// In a sheet
.sheet(isPresented: $showChat) {
heapchatScreenView
}
// In a navigation stack
NavigationStack {
heapchatScreenView
}The heapchatScreenView view is a SwiftUI view that handles all the chat functionality while respecting your custom theme and configurations.