Recent searches
No recent searches
iOS v2 Chat SDK Swift UI
Posted Feb 03, 2022
This may seem like a stupid question but how on earth can I change the color of the Navigation Bar from blue to anything else? Our app uses Swift UI so here is the code I used:
import SwiftUI
import UIKit
import ChatSDK
import ChatProvidersSDK
import MessagingSDK
struct CustomerSupport: View {
var body: some View {
MessagingView()
}
}
struct CustomerSupport_Previews: PreviewProvider {
static var previews: some View {
CustomerSupport()
}
}
struct MessagingView: UIViewControllerRepresentable {
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
print("View Updated")
}
func makeUIViewController(context: Context) -> UIViewController {
let formConfiguration = ChatFormConfiguration(name: .hidden,
email: .optional,
phoneNumber: .hidden,
department: .hidden)
let chatConfiguration = ChatConfiguration()
chatConfiguration.isAgentAvailabilityEnabled = false
chatConfiguration.preChatFormConfiguration = formConfiguration
let messagingConfiguration = MessagingConfiguration()
messagingConfiguration.name = "Bismillah Support"
let visitorInfo = VisitorInfo(name: usersProfile.name ?? "", email: currentUser.email ?? "", phoneNumber: currentUser.phoneNumber)
Chat.profileProvider?.setVisitorInfo(visitorInfo, completion: { result in
switch result {
case .success(_):
print("User info set")
case .failure(let error):
print(error)
}
})
do {
let chatEngine = try ChatEngine.engine()
let viewController = try Messaging.instance.buildUI(engines: [chatEngine], configs: [chatConfiguration, messagingConfiguration])
return UINavigationController(rootViewController: viewController)
} catch {
return UIViewController()// handle error
}
}
//...
}
0
5
5 comments
Eric Turner
Same issue here. We're using ZendeskChatSDK and ZendeskSupportSDK, integrated with SPM. Presenting the Chat UI simply, modally, similar to the OP code, we cannot get a navbar color other than the default blue to persist.
For iOS, it appears that the only exposed style configuration property can be set thus:
Which does not change the navbar color (despite documentation claims)
We have changed UINavigationBarAppearance globally. When Chat UI is presented in a SwiftUI sheet wrapper, the navbar appears blue initially, then changes to the currentTheme.primaryColor (red) when pulling the sheet down, and in the Chat UI dismiss animation; and if released from a down drag gesture without dismissing, when the navbar comes to rest at the top, it becomes blue again.
If the UINavigationBarAppearance is not set, then the navbar background color becomes the containing view .accentColor.
When presenting chat UI as static modal view, the navbar is blue regardless of any color modifiers or settings.
the blue color persists until di
0
Eric Nelson
The navbar is inherited from the colors set via UINavigationBar. Though there was a transparency issue that we resolved in version 5.4 of the support sdk, so if you're using the unified sdk - please make sure you're on the latest version. If you're on the latest version of either the chat or unified sdk and are still encountering issues, let me know and I can take a look.
0
Eric Turner
The following code demonstrates the navbar color problem, as well as a more egregious problem with the positioning of the text input field in the Chat UI.
Create a SwiftUI Xcode project and add package dependencies:
- ZendeskChatSDK 2.0.0 - Next Major
- ZendeskSupportSDK 5.4.0 - Next Major
Replace the ContentView.swift code with the following:
//
// ContentView.swift
// ZDChatSimple
//
// Created by Eric Turner on 2/16/22.
//
import ChatSDK
import ChatProvidersSDK
import CommonUISDK
import MessagingSDK
import SwiftUI
import ZendeskCoreSDK
struct ContentView: View {
@State var showSupportChat: Bool = false
var body: some View {
VStack {
HStack {
Spacer()
Button(action: {
showSupportChat = true
}, label: {
Image(systemName: "questionmark.circle")
.resizable()
.frame(width: 24, height: 24)
})
.padding(.trailing)
}
.padding(.top, 16)
Spacer()
Text("Main Page").font(.largeTitle)
Spacer()
}
.sheet(isPresented: $showSupportChat, onDismiss: {
showSupportChat = false
}, content: {
MessagingView()
.accentColor(.white)
})
.accentColor(.red)
}
}
// https://developer.zendesk.com/documentation/classic-web-widget-sdks/unified-sdk/ios/swiftui-integration/
struct MessagingView: UIViewControllerRepresentable {
@Environment(\.presentationMode) var presentationMode
func makeUIViewController(context: Context) -> UIViewController {
Zendesk.initialize(
appId: "APP_ID",
clientId: "MOBILE_SDK_CLIENT",
zendeskUrl: "https://my-app-id.zendesk.com"
)
let visitorInfo = VisitorInfo(
name: "Anon E. Moose",
email: "moose.on.loose@somewhere.com",
phoneNumber: "+1(555)555-1212"
)
Zendesk.instance?.setIdentity(
Identity.createAnonymous(
name: visitorInfo.name,
email: visitorInfo.email
)
)
Chat.initialize(accountKey: "CHAT_ACCOUNT_KEY")
let chatConfig = self.chatAPIConfig(
info: visitorInfo,
tags: ["app_name", "en", "US"])
Chat.instance?.configuration = chatConfig
// https://developer.zendesk.com/documentation/classic-web-widget-sdks/unified-sdk/ios/customizing_the_look/
CommonTheme.currentTheme.primaryColor = .red
var chatVC = UIViewController()
do {
let chatEngine = try ChatEngine.engine()
chatVC = try Messaging.instance.buildUI(
engines: [chatEngine],
configs: [self.messagingConfig(), self.chatConfig()]
)
}
catch {
print("Error creating Chat view controller: \(error)")
}
let button = UIBarButtonItem(image: nil, style: .plain, target: nil, action: nil)
button.primaryAction = UIAction(
image: UIImage(systemName: "xmark.circle")
) {_ in
presentationMode.wrappedValue.dismiss()
}
chatVC.navigationItem.leftBarButtonItem = button
// CommonTheme.currentTheme.primaryColor = .red does not affect Navbar color
// as per documentation (link above). Let's try and force it.
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .red
let attrs: [NSAttributedString.Key: Any] = [.foregroundColor: UIColor.white]
appearance.titleTextAttributes = attrs
appearance.largeTitleTextAttributes = attrs
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
chatVC.navigationController?.navigationBar.standardAppearance = appearance
chatVC.navigationController?.navigationBar.scrollEdgeAppearance = appearance
return UINavigationController(rootViewController: chatVC)
}
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
//...
}
func chatAPIConfig(info: VisitorInfo, tags: [String]) -> ChatAPIConfiguration {
let chatAPIConfig = ChatAPIConfiguration()
chatAPIConfig.tags = tags
chatAPIConfig.visitorInfo = info
return chatAPIConfig
}
func messagingConfig() -> MessagingConfiguration {
let messagingConfig = MessagingConfiguration()
messagingConfig.name = "My App"
return messagingConfig
}
func chatConfig() -> ChatConfiguration {
let chatConfig = ChatConfiguration()
let formConfig = ChatFormConfiguration(
name: .required,
email: .optional,
phoneNumber: .hidden,
department: .hidden
)
chatConfig.preChatFormConfiguration = formConfig
chatConfig.isPreChatFormEnabled = true
chatConfig.isOfflineFormEnabled = true
chatConfig.isChatTranscriptPromptEnabled = false
chatConfig.isAgentAvailabilityEnabled = true
chatConfig.chatMenuActions = [.endChat]
return chatConfig
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
0
Emre Havan
Eric Nelson
This issue is not related to SwiftUI. This issue exists on 5.4.0 and the latest version of ios answer bot and ios answer bot provider SDKs.
We experienced this colour changing issue after migrating to SPM and using the latest versions.
In order to fix this, we temporarily fall back to manually integrating all Zendesk frameworks (as suggested here https://developer.zendesk.com/documentation/classic-web-widget-sdks/unified-sdk/ios/sdk_add/#manually-adding-the-SDK) with versions that were released on 7th December of 2020, where such bug does not occur.
Do you know when this issue will be fixed?
Thanks.
0
Mick O'Donnell
Hi Emre,
Thanks for drawing this to our attention. We now have a fix for this issue, and it'll be included in a release in the upcoming days. Please keep an eye on our release notes for this.
1