We can add the following fields are custom. If they are not added, the Chat will show the default values.
* externalCode is a string that identifies each device.
- titleChat It is a string with the title that you want to be shown in the chat.
- botName is a string with the name of the bot that will be displayed above the bubble on the left side.
- defaultUserName It is a string with the default name that the user will have and will be displayed above the user's bubble.
- messagePlaceholder It is a string with the message that is displayed in the text field where it must be written.
- openFileText It is a string with the text that will be displayed in the case a file has to be downloaded.
- backgroundChatColor is a string with the chat background color in hexadecimal or object color.
- backgroundBarColor is a string with the background color of the upper and lower bars in hexadecimal or object color.
- primaryColor is a string with the main color of the chat, buttons and floating icon in hexadecimal or object color.
fullscreen is a boolean where you indicate if you want the chat to occupy the entire screen (true) or have a certain margin of the device (false). - defaultChatIconResource is a reference with the icon resource taht show on the chat main icon.
- addContactTextButton is a string with the message text to add a contact.
- contactAddedMessage is a string with the message when you added a new contact.
- infoContactIconsColor is a string with the color of the icons of info contact view
- infoContactTopBarTitle is a string top bar title of info contact view.
- chatAutoOpenTime is an integer that indicates the seconds for the chat to open automatically. If no chatAutoOpenTime is specified, such as if you press the bubble before the specified time expires, the chat can be opened manually.
- clearMessages is a boolean that indicate if you want to delete or clear all messages from session storage every time you open the chat
- welcomeEvent is a string to define the welcome message one time you open the chat
- welcomeMessage is a string with custom html type by user to show as first message when chat is open.
- disabledKeyboard is a boolean to indicate not to do the calculate of keyboard height to resize the chat screen
- bottomConstraint: string to indicate bottom constraint (integer value)
- x: double var axis x to indicate where to start chat frame view
- y: double var axis y to indicate where to start chat frame view
- width: double var width chat frame view
- height: double var height chat frame view
- cornerRadiusEnabled: enabled or not chat bubbles
- customFont: set the global font of all chat
- backgroundChatIconColor: set background icon color regardless of primary color
- backgroundChatIconBorderColor: set icon border color
Functionalities
You can check if the welcome event has been fired with this method:
let isEmitted = IndigitallChat.isWelcomeEmitted()
BOOL isEmitted = [IndigitallChat isWelcomeEmitted];
If you want to send a message custom you can use this method:
IndigitallChat.setCustomEvent("your_event")
[IndigitallChat setCustomEvent:@"your_custom_Event"];
You can also control the action of deleting messages with this method:
IndigitallChat.clearAllMessages()
[IndigitallChat clearAllMessages];
Custom Styling
We give the possibility of customizing the style of the most important components at a general level.
To modify the chat bubbles, we use the custom class INUIViewModel, in the case of the user we will have access to chatUserViewBubble, and in the case of the server bubble it will be chatServerViewBubble:
INUIViewModel
{
"customBackgroundColor": {
"type": "UIColor",
"description": "Custom background color of the component."
},
"customAlpha": {
"type": "CGFloat",
"description": "Custom opacity of the component (range: 0.0 to 1.0)."
},
"customCornerRadius": {
"type": "CGFloat",
"description": "Custom corner radius of the component."
},
"customBorderColor": {
"type": "CGColorRef",
"description": "Custom border color."
},
"customBorderWidth": {
"type": "CGFloat",
"description": "Custom border width."
},
"customShadowOpacity": {
"type": "CGFloat",
"description": "Custom shadow opacity (range: 0.0 to 1.0)."
},
"customShadowColor": {
"type": "CGColorRef",
"description": "Custom shadow color."
},
"customLayoutMargins": {
"type": "NSValue",
"description": "Custom layout margins (UIEdgeInsets wrapped in NSValue)."
},
"customConstraints": {
"type": "NSArray<NSLayoutConstraint *>",
"description": "Custom Auto Layout constraints."
}
}
To modify the content of the bubbles, the INTextViewModel class is used, here we give the option of user, server and all TextViews.
INTextViewModel
{
"customFontFamily": {
"type": "NSString",
"description": "Custom font family used for the text."
},
"customTextColor": {
"type": "UIColor",
"description": "Custom text color for light theme."
},
"customTextColorDarkTheme": {
"type": "UIColor",
"description": "Custom text color for dark theme."
},
"customLineSpacing": {
"type": "CGFloat",
"description": "Custom line spacing between lines of text."
},
"customTextAlignment": {
"type": "NSTextAlignment",
"description": "Custom text alignment (e.g., left, center, right, justified)."
},
"customBold": {
"type": "BOOL",
"description": "Indicates whether the text is rendered in bold."
},
"customItalic": {
"type": "BOOL",
"description": "Indicates whether the text is rendered in italic."
}
}
To modify the user and time information text, the INLabelModel is used
{
"customFontFamily": {
"type": "NSString",
"description": "Custom font family used for the label text."
},
"customTextColor": {
"type": "UIColor",
"description": "Custom text color for light theme."
},
"customTextColorDarkTheme": {
"type": "UIColor",
"description": "Custom text color for dark theme."
},
"customLineSpacing": {
"type": "CGFloat",
"description": "Custom line spacing between lines of text."
},
"customTextAlignment": {
"type": "NSTextAlignment",
"description": "Custom text alignment (e.g., left, center, right, justified)."
},
"customBold": {
"type": "BOOL",
"description": "Indicates whether the label text is rendered in bold."
},
"customItalic": {
"type": "BOOL",
"description": "Indicates whether the label text is rendered in italic."
}
}
Example of some styling integration
@IBOutlet weak var indigitallChatView: IndigitallChatView!{
didSet{
indigitallChatView.chatProtocol = ChatProtocol.init()
indigitallChatView.chatProtocol.setDelegate(self)
indigitallChatView.userTextViewModel = INTextViewModel()
indigitallChatView.userTextViewModel.customTextColor = .red
indigitallChatView.userTextViewModel.customTextColorDarkTheme = .green
indigitallChatView.customFont = UIFont.init(name: "AvenirNext-DemiBold", size: 16)
indigitallChatView.chatUserViewBubble = INUIViewModel.init(frame: CGRect(x: 0, y: 0, width: 150, height: 10))
indigitallChatView.chatUserViewBubble.customBackgroundColor = .white
}
}