Chat
You can customize the color and properties of the Chat window like text, background color, chat handoff banner, submit button, message suggestion, etc to match the look and feel of your application.
Chat.backgroundColor
Chat.Input
Chat.Message
Chat.Message.Common
Chat.Message.File
Chat.Message.Article
Chat.Message.InfoMessage
Chat.Message.Suggestion
Chat.Message.InputCard
Chat.Message.AudioPlayer
Chat.Message.SkipActionButton
Chat.backgroundColor
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme object as desired
customTheme.Chat.backgroundColor = "#FFFFFF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Input
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme object as desired
customTheme.Chat.Input.audioRecordHintBackgroundColor = "#000000"
customTheme.Chat.Input.audioRecordHintTextColor = "#FFFFFF"
customTheme.Chat.Input.textFieldBorderColor = "#808080"
customTheme.Chat.Input.textFieldTintColor = "#808080"
customTheme.Chat.Input.textFieldBackgroundColor = "#FFFFFF"
customTheme.Chat.Input.textFieldPlaceholderColor = "#808080"
customTheme.Chat.Input.textFieldTextColor = "#000000"
customTheme.Chat.Input.attachmentButtonBackgroundColor = "#808080"
customTheme.Chat.Input.recordButtonBackgroundColor = "#0000FF"
customTheme.Chat.Input.recordSoundPulseBackgroundColor = "#ADD8E6."
customTheme.Chat.Input.sendButtonBackgroundColor = "#FFFFFF"
customTheme.Chat.Input.recordTimerBackgroundColor = "#FFFFFF"
customTheme.Chat.Input.recordTimerTextColor = "#808080"
customTheme.Chat.Input.recordTimerIndicatorColor = "#FF0000"
customTheme.Chat.Input.recordSlideTextColor = "#808080"
customTheme.Chat.Input.recordSlideIconColor = "#D3D3D3"
customTheme.Chat.Input.recordCancelTextColor = "#FFFFFF"
customTheme.Chat.Input.moreIconColor = "#FFFFFF"
customTheme.Chat.Input.sendIconColor = "#FFFFFF"
customTheme.Chat.Input.recordIconColor = "#FFFFFF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.Common
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.Common.incomingBackgroundColor = "#D3D3D3"
customTheme.Chat.Message.Common.outgoingBackgroundColor = "#0000FF"
customTheme.Chat.Message.Common.incomingTextColor = "#000000"
customTheme.Chat.Message.Common.outgoingTextColor = "#FFFFFF"
customTheme.Chat.Message.Common.incomingBorderColor = "#808080"
customTheme.Chat.Message.Common.outgoingBorderColor = "#0000FF"
customTheme.Chat.Message.Common.messageSenderNameColor = "#808080"
customTheme.Chat.Message.Common.incomingTimeTextColor = "#808080"
customTheme.Chat.Message.Common.incomingTimeIconColor = "#808080"
customTheme.Chat.Message.Common.outgoingTimeTextColor = "#0000FF"
customTheme.Chat.Message.Common.outgoingTimeIconColor = "#0000FF"
customTheme.Chat.Message.Common.incomingMessageEditedTagColor = "#808080"
customTheme.Chat.Message.Common.outgoingMessageEditedTagColor = "#FFFFFF"
customTheme.Chat.Message.Common.incomingMessageTimeStampColor = "#808080"
customTheme.Chat.Message.Common.outgoingMessageTimeStampColor = "#FFFFFF"
customTheme.Chat.Message.Common.incomingDeletedMessageColor = "#808080"
customTheme.Chat.Message.Common.outgoingDeletedMessageColor = "#FFFFFF"
customTheme.Chat.Message.Common.deletingMessageTitleColor = "#FFFFFF"
customTheme.Chat.Message.Common.deliveryStatusIconColor = "#FFFFFF"
customTheme.Chat.Message.Common.repliedMessageHighLightColor = "#808080"
customTheme.Chat.Message.Common.incomingMessageReplyIconColor = "#808080"
customTheme.Chat.Message.Common.outgoingMessageReplyIconColor = "#0000FF"
customTheme.Chat.Message.Common.botTypingIndicatorStyle = 1
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.File
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
// Customize properties in the customTheme instance as desired
customTheme.Chat.Message.File.incomingTitleColor = "#000000"
customTheme.Chat.Message.File.incomingSubTitleColor = "#808080"
customTheme.Chat.Message.File.incomingFileViewBackgroundColor = "#FFFFFF"
customTheme.Chat.Message.File.incomingCommentBackgoundColor = "#FFFFFF"
customTheme.Chat.Message.File.outgoingTitleColor = "#FFFFFF"
customTheme.Chat.Message.File.outgoingSubTitleColor = "#808080"
customTheme.Chat.Message.File.outgoingFileViewBackgroundColor = "#FFFFFF"
customTheme.Chat.Message.File.outgoingCommentBackgoundColor = "#FFFFFF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.Article
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.Article.articleTitleColor = "#0000FF"
customTheme.Chat.Message.Article.cardTitleColor = "#000000"
customTheme.Chat.Message.Article.authorTextColor = "#808080"
customTheme.Chat.Message.Article.backgroundColor = "#FFFFFF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.InfoMessage
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.InfoMessage.textColor = "#808080"
customTheme.Chat.Message.InfoMessage.lineColor = "#808080"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.Suggestion
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.Suggestion.backgroundColor = "#FFFFFF"
customTheme.Chat.Message.Suggestion.textColor = "#0000FF"
customTheme.Chat.Message.Suggestion.borderColor = "#0000FF"
customTheme.Chat.Message.Suggestion.cornerRadius = 10
customTheme.Chat.Message.Suggestion.displayStyle = 1
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.InputCard
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme object as desired
customTheme.Chat.Message.InputCard.titleColor = "#808080"
customTheme.Chat.Message.InputCard.textFieldBackgroundColor = "#FFFFFF"
customTheme.Chat.Message.InputCard.textFieldTextColor = "#000000"
customTheme.Chat.Message.InputCard.textFieldPlaceholderColor = "#808080"
customTheme.Chat.Message.InputCard.sendButtonBackgroundColor = "#0000FF"
customTheme.Chat.Message.InputCard.sendButtonIconColor = "#FFFFFF"
customTheme.Chat.Message.InputCard.separatorColor = "#D3D3D3"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.AudioPlayer
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.AudioPlayer.incomingTrackColor = "#808080"
customTheme.Chat.Message.AudioPlayer.outgoingTrackColor = "#FFFFFF"
customTheme.Chat.Message.AudioPlayer.outgoingDurationTextColor = "#FFFFFF"
customTheme.Chat.Message.AudioPlayer.incomingDurationTextColor = "#808080"
customTheme.Chat.Message.AudioPlayer.playButtonBackgroundColor = "#FFFFFF"
customTheme.Chat.Message.AudioPlayer.incomingButtonIconColor = "#808080"
customTheme.Chat.Message.AudioPlayer.outgoingButtonIconColor = "#0000FF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.SkipActionButton
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme object as desired
customTheme.Chat.Message.SkipActionButton.textColor = "#808080"
customTheme.Chat.Message.SkipActionButton.backgroundColor = "#FFFFFF"
customTheme.Chat.Message.SkipActionButton.borderColor = "#808080"
customTheme.Chat.Message.SkipActionButton.cornerRadius = 18
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.Common.incomingProgressButton
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.Common.incomingProgressButton.backgroundColor = "#FFFFFF"
customTheme.Chat.Message.Common.incomingProgressButton.tintColor = "#808080"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.Common.outgoingProgressButton
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.Common.outgoingProgressButton.backgroundColor = "#FFFFFF"
customTheme.Chat.Message.Common.outgoingProgressButton.tintColor = "#808080"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme)Chat.Message.Selection
Chat.Message.Selection
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.Message.Selection.backgroundColor = "#FFFFFF"
customTheme.Chat.Message.Selection.selectionBackgroundColor = "#D3D3D3"
customTheme.Chat.Message.Selection.textColor = "#000000"
customTheme.Chat.Message.Selection.buttonBackgroundColor = "#FFFFFF"
customTheme.Chat.Message.Selection.buttonTextColor = "#0000FF"
customTheme.Chat.Message.Selection.linkTextColor = "#0000FF"
customTheme.Chat.Message.Selection.accessoryColor = "#0000FF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Message.Slider
Chat.Message.Slider
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme object as desired
customTheme.Chat.Message.Slider.thumbBorderColor = "#0000FF"
customTheme.Chat.Message.Slider.selectedTrackColor = "#0000FF"
customTheme.Chat.Message.Slider.selectedValueTextColor = "#0000FF"
customTheme.Chat.Message.Slider.unSelectedTrackColor = "#808080"
customTheme.Chat.Message.Slider.thumbBackgroundColor = "#FFFFFF"
customTheme.Chat.Message.Slider.minRangeTextColor = "#FFFFFF"
customTheme.Chat.Message.Slider.maxRangeTextColor = "#D3D3D3"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.QueueBanner
Chat.QueueBanner
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.QueueBanner.titleColor = "#000000"
customTheme.Chat.QueueBanner.subtitleColor = "#808080"
customTheme.Chat.QueueBanner.subtitleTimeColor = "#000000"
customTheme.Chat.QueueBanner.backgroundColor = "#808080"
customTheme.Chat.QueueBanner.positionContainerBackgroundColor = "#FFFFFF"
customTheme.Chat.QueueBanner.positionTextColor = "#0000FF"
customTheme.Chat.QueueBanner.positionSubtitleColor = "#808080"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.HandOffBanner
Chat.HandOffBanner
Copied/// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.HandOffBanner.backgroundColor = "#D3D3D3"
customTheme.Chat.HandOffBanner.textColor = "#000000"
customTheme.Chat.HandOffBanner.buttonTitleColor = "#0000FF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.EmailTranscript
Chat.EmailTranscript
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.EmailTranscript.textFieldTintColor = "#0000FF"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.AttachmentsSheet
Chat.AttachmentsSheet
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
//Customize properties in the customTheme instance as desired
customTheme.Chat.AttachmentsSheet.backgroundColor = "#FFFFFF"
customTheme.Chat.AttachmentsSheet.overlayColor = "#000000"
customTheme.Chat.AttachmentsSheet.tintColor = "#0000FF"
customTheme.Chat.AttachmentsSheet.separatorColor = "#808080"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);Chat.Input.Edit
Chat.Input.Edit
Copied// Create a new theme instance using SIQTheme
const customTheme = new SIQTheme();
customTheme.Chat.Input.Edit.backgroundColor = "#808080"
customTheme.Chat.Input.Edit.titleColor = "#0000FF"
customTheme.Chat.Input.Edit.subtitleColor = "#D3D3D3"
customTheme.Chat.Input.Edit.verticalLine = "#0000FF"
customTheme.Chat.Input.Edit.messageTypeIconColor = "#D3D3D3"
customTheme.Chat.Input.Edit.closeButton = "#808080"
// Set the customized theme using ZohoSalesIQ.setThemeForiOS API
ZohoSalesIQ.setThemeForiOS(customTheme);