Chat APIs and In-app Messaging SDKs for Developers

Applozic provides Chat APIs and In-app Messaging SDKs for Android, iOS and Web apps to power cross-device, multi-platform rich messaging.
Find comprehensive guides and platform-specific Chat API documentation to get started with In-app Messaging.

Get Started    

iOS (ApplozicSwift)

iOS Chat UI Customization

Our SDK come with a pre-built UI that you can use to integrate with your application. Following is a list of things that you can customize in the pre-built UI.

Create ALKConfiguration object to customise appearance of our UI.
You can create a static ALKConfiguration instance in AppDelegate.swift file

/// Add this in your AppDelegate.swift file 
static let applozicConfiguration: ALKConfiguration = {
      var config = ALKConfiguration()
      /// Change properties here... 
      /// Read below to know about different properties used in `ALKConfiguration`
      return config
}()

After this you can use above applozicConfiguration object when you are launching chat screens.

While creating applozicConfiguration in AppDelegate, you can change various properties description of which is given below.

Disable group detail screen

If true then tapping on navigation bar in conversation view will open the group detail screen.
If false then tapping on navigation bar in conversation view will do nothing.
DEFAULT: true
NOTE: Only works in case of groups.

config.isTapOnNavigationBarEnabled = false

Disable user profile tap action

If true, then tapping on user's profile icon in group chat will open a thread with that user.
If false, then tapping on user's profile icon in group chat will do nothing.
DEFAULT: true
NOTE: You will see the previous messages(if there are any).

config.isProfileTapActionEnabled = true

Change background color of chat detail screen

Use below code to change background color for chat detail screen.
DEFAULT: Color hex :: 0xf9f9f9

config.backgroundColor = UIColor.red

Show bottom line of navigation bar

Below code hides/shows the bottom line in the navigation bar.
If true, it will hide bottom line of navigation bar.
If false, bottom line of navigation bar will be visible.
DEFAULT: true
NOTE: It will be reflected in all the ViewControllers where navigation bar is visible.

config.hideNavigationBarBottomLine = true

Change navigation bar background color.

Use below code to change navigation bar's background color.
DEFAULT: UIColor.navigationOceanBlue()
NOTE: It will be used in all the ViewControllers where navigation bar is visible.

config.navigationBarBackgroundColor = UIColor.red

Change navigation bar tint color

Use below code to change navigation bar's tint color.
DEFAULT: UIColor.navigationTextOceanBlue
NOTE: It will be used in all the ViewControllers where navigation bar is visible.

config.navigationBarItemColor = UIColor.red

Change navigation bar title color.

Use below code to change navigation bar's title color.
DEFAULT: UIColor.black.
NOTE: It will be used in all the ViewControllers where navigation bar is visible.

config.navigationBarTitleColor = UIColor.white

Change status bar style

Use below code to change status bar style. It will be used in all view controllers.
DEFAULT: UIStatusBarStyle.lightContent.

config.statusBarStyle = UIStatusBarStyle.default

Customize Chat Bubble

You can change the font, text color and background color of the message. Below are some of the options that are available. Add this style related changes in your AppDelegate's didFinishLaunchingWithOptions method or anywhere else before the chat is launched.

Chat Bubble Color

The background color of the sent and received chat bubble.

ALKMessageStyle.sentBubble.color = UIColor.lightGray // For sent messages
ALKMessageStyle.receivedBubble.color = UIColor.lightGray // For received messages

Chat Text Font and Color

Use this for changing chat text font and color in the Conversation screen.

ALKMessageStyle.message = Style(font: UIFont.systemFont(ofSize: 14), text: UIColor.black)

Customize ChatBar

Below are the different options you can choose with chat bar.

Change ChatBar bottomView color

Use below code to change ChatBar's bottom view color. This is the view which contains all the attachment and other options.
DEFAULT: UIColor.background(.grayEF)

config.chatBarAttachmentViewBackgroundColor = UIColor.lightGray

Hide Attachment Buttons

To hide all the attachment options add below setting. By default, all will be shown.

Currently, we have a total of five options:

  • contact
  • camera
  • gallery
  • video
  • location
config.chatBar.optionsToShow = .none

// If you want to show just two attachment options:
config.chatBar.optionsToShow = .some(options: [.camera, .location])

// If you want to show all attachment options then use this:
config.chatBar.optionsToShow = .all

Change Attachment Button Icons

Use below config option to change the icons of any attachment options:

config.chatBar.set(
    attachmentIcon: UIImage(named: "galleryIcon"),
    for: .gallery)

config.chatBar.set(
    attachmentIcon: UIImage(named: "custom-Contact"),
    for: .contact)

Hide mic button from ChatBar

Use below code to change visibility of mic button in chat bar.
If true, then mic button will be hidden in chatBar.
If false, then mic button will be visible in chatBar.
DEFAULT: false

config.hideAudioOptionInChatBar = true

Hide line between send button and textView in ChatBar

Use below code to change visibility of line between send button and textView in chatbar.
If true then line between send button and text view will be hidden.
If false then line between send button and text view will be visibl.
DEFAULT: false

config.hideLineImageFromChatBar = true

Change send message icon in chatBar.

Use below code to change send message icon in chatBar.
DEFAULT: send icon in ApplozicSwift asset.

config.sendMessageIcon = UIImage(named: "YOUR_IMAGE_NAME", in: Bundle.main, compatibleWith: nil)

Use Localization

You can localize the strings used in ApplozicSwift SDK by creating localizable strings file with all the keys. For more details check Localization section for ApplozicSwift.
If you are creating localizable file with a custom name then you need to pass the file name here.
DEFAULT: Localizable

config.localizedStringFileName = "YOUR_FILE_NAME"

Change navigationBar right item in chat detail screen.

Use below code to customize navigation bar right item in chat detail screen.
You can show image in that bar item, or hide it completely or use some other system icon.
DEFAULT: UIBarButtonItem.SystemItem.refresh

/// If you want to show image
config.rightNavBarImageForConversationView = UIImage(named: "YOUR_IMAGE_NAME", in: Bundle.main, compatibleWith: nil)

/// If you want to use system icon.
config.rightNavBarSystemIconForConversationView = UIBarButtonItem.SystemItem.add

/// If you want to hide the bar item.
config.hideRightNavBarButtonForConversationView = true

Customize navigation bar items in chat-list.

Below are the different options you can choose with navigation bar items in chat list screen.

Hide back button from chat list.

Use below code to hide back navigation icon in chat list screen.
If true, back button will be hidden.
If false, back button will be visible.
DEFAULT: false

config.hideBackButtonInConversationList = true

Hide navigation bar right item in chat list screen

Use below code to change visibility of start new chat button in navigation bar of chat list screen.
If true then the start new chat button will be hidden.
If false then the start new chat button will be visible.
DEFAULT: false

config.hideStartChatButton = false

Change navigation bar right item image in chat list screen.

Use below code to show custom image in navigation bar right side item in chat list screen.
By default, create group icon image will be used.
DEFAULT: fill_214 icon in ApplozicSwift asset

config.rightNavBarImageForConversationListView = UIImage(named: "YOUR_IMAGE_NAME", in: Bundle.main, compatibleWith: nil)

Handle tap action of navigation bar right item in chat list screen

Use below code to handle click action on navigation bar right side item outside.
DEFAULT: It will open screen to start new chat.

config.handleNavIconClickOnConversationListView = false
config.nsNotificationNameForNavIconClick = "NOTIFICATION_NAME_TO_HANDLE_CLICK"

Change typing indicator name

Use below code to change name used in typing indicator.
If true, it will show user name in typing status. Eg. User is typing
If false, it will show "Someone" in typing status. Eg. Someone is typing
DEFAULT: true

config.showNameWhenUserTypesInGroup = true

Hide start new conversation button in empty chat list

Use below code to change visibility of start new conversation button in chat list screen when there is no chat.
If true then start new conversation button shown in the empty state will be hidden.
If false then start new conversation button shown in the empty state will be visible.
DEFAULT: false

config.hideEmptyStateStartNewButtonInConversationList = true

Customize Date/Information cell.

Use below code to customize colors for date and information cell.

Date cell and information cell Background color

It will change the background color for date/information cell.
DEFAULT: UIColor.gray

config.conversationViewCustomCellBackgroundColor = UIColor.red

Date cell and information cell text color

It will change the text color for date/information cell.
DEFAULT: UIColor.white

config.conversationViewCustomCellTextColor = UIColor.red

Add metadata while sending messages

This is used to add additional information whenever a message is sent. This information will be passed in message's metadata field.

var messageMetadata = [AnyHashable : Any]()
messageMetadata["customKey"] = "customValue"
config.messageMetadata = messageMetadata

Add metadata when suggested replies is selected

This is used to send additional information as metadata when a suggested reply is selected. Message's metadata will contain this key along with the value that will be present in the json. For more information for this use-case check our RichMessage section.

config.quickReplyMetadataKey = "SUGGESTED_REPLY_KEY"

Disable Rich Message action

Use below code to disable click action on all rich messages.
If true then action will be disabled.
If false then action will be enabled.
DEFAULT: false

config.disableRichMessageButtonAction = true

Show Report Message option

To show the report message option to the user, use below config option.

DEFAULT: false

config.isReportMessageEnabled = true

Show Info option in group detail screen

Use the below code to show info option in the action sheet when a user is selected in group detail screen.
If true then info option will be visible.
If false then info option will be hidden.
DEFAULT: false

Now, when this info option is selected, a notification will be posted with the name "UserInfoSelected" with object containing 3 values :

  1. "Id": userId of user
  2. "Name": display name of user
  3. "Controller": reference to the top view controller.
config.showInfoOptionInGroupDetail = true

Channel Detail Configurations

This will guide you on customization in channel detail view like color, font, background color of some views

Customize add member icon

Use below code to show custom image for add member icon.

config.channelDetail.addMemberIcon = UIImage(named: "YOUR_ICON_NAME", in: Bundle.main, compatibleWith: nil)

Broder color of the channel name edit field

Use below code to show to change the border color of the group name.

config.channelDetail.groupNameBorderColor =  UIColor.blue

Participant header

Use below code to change the color, font of header title.

config.channelDetail.participantHeaderTitle = Style(font: UIFont.boldSystemFont(ofSize: 14), text: UIColor.blue)

Channel member name

Use below code to change the color and font of channel member names.

 config.channelDetail.memberName = Style(font: UIFont.boldSystemFont(ofSize: 14), text: UIColor.blue)

Channel group name

Use below code to change the color, font of the channel name.

config.channelDetail.groupName = Style(font: UIFont.boldSystemFont(ofSize: 14), text: UIColor.blue)

Customize channel default group icon

Use below code to change the channel default group icon.

config.channelDetail.defaultGroupIcon = UIImage(named: "YOUR_IMAGE_NAME", in: Bundle.main, compatibleWith: nil)

Edit label under default group icon

Use the below code to change the color, font of the edit label.

 config.channelDetail.editLabel =  Style(font: UIFont.boldSystemFont(ofSize: 14), text: UIColor.red)

Save and invite Button

Use the below code to change the color and font of the button.

config.channelDetail.button = Style(font: UIFont.boldSystemFont(ofSize: 14), text: UIColor.white,background: .blue)

User Interaction Callbacks

In this section, you'll learn what all notifications we post and how to observe them.

On Mute/Unmute Tap

You'll receive this when a user taps on mute/unmute button. In the notification's userinfo we send below key-value pairs.

Key
Type
Description

Muted

Bool

If the Muted flag is true then the conversation is muted.

If the Muted flag is false then the conversation is unmuted.

Controller

UIViewController instance

You can use UIViewController instance to present or push view controller.

ChannelKey

Int

Channel key if its group/channel mute or unmute

UserId

String

UserId will be present for one to one mute or unmute.

NotificationCenter Observer code, you can add this observer to get the callback in your class

NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: ALKNotification.conversationListAction), object: nil, queue: nil, using: {[weak self] notification in
            let notification = notification.userInfo ;

            guard
                let _ = self,
                let data = notification
                else { return }

            if(data["Muted"] != nil){
                let muteFlag =  data["Muted"] as! Bool
                let controller =  data["Controller"] as? UIViewController
                let channelKey =  data["ChannelKey"]
                let userId =  data["UserId"] as? String

            if(userId != nil){
                 print("UserId of user call made for ",userId)
                 print("USER is muted or unmuted ?",muteFlag ? "true" :"false")
              }else{
                  print("Channel channeKey  ",channelKey as! Int)
                 print("Channel is muted or unmuted ?",muteFlag ? "true":"false")
              }

                //Example you can push the view controller or present
            controller?.navigationController?.pushViewController(YOUR-VIEW-CONTROLLER, animated: true)
            }

  })

On Block/Unblock Tap (one-to-one chat)

You'll receive this when a user taps on block/unblock button. In the notification's userinfo we send below key-value pairs.

Key
Type
Description

UserId

String

UserId will be another user whom you have blocked or unblock.

Controller

UIViewController instance

You can use UIViewController instance to present or push view controller.

Blocked

Bool

if true, then the user is blocked.
if false, then the user is unblocked.

NotificationCenter Observer code, you can add this observer to get the callback in your class

NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: ALKNotification.conversationListAction), object: nil, queue: nil, using: {[weak self] notification in
            let notification = notification.userInfo;

            guard
                let _ = self,
                let data = notification
                else { return }

            if(data["Blocked"] != nil){
                let userId = data["UserId"] as? String
                let controller =  data["Controller"] as? UIViewController
                let blockedFlag = data["Blocked"] as! Bool
                if(userId != nil){
                    print("Blocked or Unblocked  @@@ ",blockedFlag ? "true":"false")
                }
            }
})

On Add Participant Button click

You'll receive this when a user taps on add participant button in the group detail screen. In the notification's userinfo we send below key-value pairs.

Key
Type
Description

ChannelKey

Int

Channel key where the add Participate is clicked for

Controller

UIViewController

You can use UIViewController instance to present or push view controller.

AddMember

Bool

If true then clicked on add participate

NotificationCenter Observer code, you can add this observer to get the callback in your class

 NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: ALKCreateGroupViewController.NSCreateGroupViewControllerActionNotification), object: nil, queue: nil, using: {[weak self] notification in
            let notification = notification.userInfo;

            guard
                let _ = self,
                let data = notification
                else { return }

            let channelKey = data["ChannelKey"] as! Int
            let controller =  data["Controller"] as? UIViewController
            let AddMember = data["AddMember"]

            print("Channel key ",channelKey)
})

To disable add participant button in the group detail screen then set this config option. This way you can handle the tap on your side.

  config.disableAddParticipantButton = true

On User Profile Tap

You'll receive this when a user taps on the navigation bar. In the notification's userinfo we send below key-value pairs.

Key
Type
Description

Id

String

userId of user for which it is clicked in navigation bar

Name

String

Name of the user

Controller

UIViewController

You can use UIViewController instance to present or push view controller.

NotificationCenter Observer code, you can add this observer to get the callback in your class

NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: "UserProfileSelected"), object: nil, queue: nil, using: {[weak self] notification in

            let notificationObject = notification.object;

            guard
                let _ = self,
                let data = notificationObject
                else { return }

            let dic = data as! [String: Any];
            let userId = dic["Id"] as? String
            let displayName = dic["Name"] as? String
            let controller = dic["Controller"]  as? UIViewController
            
})

iOS (ApplozicSwift)


iOS Chat UI Customization

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.