Skip to main content

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);