iOS

Our SDK's 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.

📘
In case you are looking for deeper customization, please feel free to use our UI source code mentioned below for reference to build your own UI.

❗️
This will only work if you are using Applozic framework/pod not ApplozicSwift framework/pod

We provide various UI settings to customise chat view easily. You can add these settings in ALDefaultChatViewSettings method in the ALChatManager file.

Chat Bubble Color

For message received

[ALApplozicSettings setColorForReceiveMessages: [UIColor colorWithRed:255.0/255 green:255.0/255 blue:255.0/255 alpha:1]];

ALApplozicSettings.setColorForReceiveMessages(UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha:1))

For message sent

[ALApplozicSettings setColorForSendMessages: [UIColor colorWithRed:66.0/255 green:173.0/255 blue:247.0/255 alpha:1]];

ALApplozicSettings.setColorForSendMessages(UIColor(red: 66.0/255, green: 173.0/255, blue: 247.0/255, alpha:1))

Chat Background

[ALApplozicSettings setChatWallpaperImageName:@"<WALLPAPER NAME>"];

ALApplozicSettings.setChatWallpaperImageName("<WALLPAPER NAME>")

Chat Screen

Hide profile Image

[ALApplozicSettings setUserProfileHidden: NO];

ALApplozicSettings.setUserProfileHidden(false)

Hide refresh button

[ALApplozicSettings hideRefreshButton: NO];

ALApplozicSettings.hideRefreshButton(flag)

Chat Title

[ALApplozicSettings setTitleForConversationScreen: @"Recent Chats"];

ALApplozicSettings.setTitleForConversationScreen("Recent Chats")

Text Input Background Color

[ALApplozicSettings setMsgTextViewBGColor:[UIColor lightGrayColor]];

ALApplozicSettings.setMsgTextViewBGColor(UIColor.lightGray)

User Icon Colors

You can use this to change the colour of user icon characters(in case of no display picture):

NSMutableDictionary *colourDictionary = [[NSMutableDictionary alloc] init];

[colourDictionary setObject:@"#4FC3F7" forKey:@"A"];
[colourDictionary setObject:@"#F06292" forKey:@"B"];
[colourDictionary setObject:@"#BA68C8" forKey:@"C"];
[colourDictionary setObject:@"#9575CD" forKey:@"D"];
[colourDictionary setObject:@"#7986CB" forKey:@"E"];
[colourDictionary setObject:@"#4FC3F7" forKey:@"F"];
[colourDictionary setObject:@"#E06055" forKey:@"G"];
[colourDictionary setObject:@"#4DD0E1" forKey:@"H"];
[colourDictionary setObject:@"#4DB6AC" forKey:@"I"];
[colourDictionary setObject:@"#57BB8A" forKey:@"J"];
[colourDictionary setObject:@"#9CCC65" forKey:@"K"];
[colourDictionary setObject:@"#D4E157" forKey:@"L"];
[colourDictionary setObject:@"#FDD835" forKey:@"M"];
[colourDictionary setObject:@"#F6BF26" forKey:@"N"];
[colourDictionary setObject:@"#FFA726" forKey:@"O"];
[colourDictionary setObject:@"#FF8A65" forKey:@"P"];
[colourDictionary setObject:@"#C2C2C2" forKey:@"Q"];
[colourDictionary setObject:@"#90A4AE" forKey:@"R"];
[colourDictionary setObject:@"#A1887F" forKey:@"S"];
[colourDictionary setObject:@"#A3A3A3" forKey:@"T"];
[colourDictionary setObject:@"#AFB6E0" forKey:@"U"];
[colourDictionary setObject:@"#B39DDB" forKey:@"V"];
[colourDictionary setObject:@"#C2C2C2" forKey:@"W"];
[colourDictionary setObject:@"#80DEEA" forKey:@"X"];
[colourDictionary setObject:@"#BCAAA4" forKey:@"Y"];
[colourDictionary setObject:@"#AED581" forKey:@"Z"];
[colourDictionary setObject:@"#E6B0AA" forKey:@"0"];
[colourDictionary setObject:@"#F1948A" forKey:@"1"];
[colourDictionary setObject:@"#C39BD3" forKey:@"2"];
[colourDictionary setObject:@"#7FB3D5" forKey:@"3"];
[colourDictionary setObject:@"#5DADE2" forKey:@"4"];
[colourDictionary setObject:@"#76D7C4" forKey:@"5"];
[colourDictionary setObject:@"#7DCEA0" forKey:@"6"];
[colourDictionary setObject:@"#73C6B6" forKey:@"7"];
[colourDictionary setObject:@"#7DCEA0" forKey:@"8"];
[colourDictionary setObject:@"#F9E79F" forKey:@"9"];

 [ALApplozicSettings setUserIconFirstNameColorCodes:colourDictionary];

Group Messaging

Disable group functionality

[ALApplozicSettings setGroupOption: YES];

ALApplozicSettings.setGroupOption(true)

Hide Group Exit Button

[ALApplozicSettings setGroupExitOption:NO];

ALApplozicSettings.setGroupExitOption(false)

Hide Group Member-Add Button (Admin only)

[ALApplozicSettings setGroupMemberAddOption:NO];

ALApplozicSettings.setGroupMemberAddOption(false)

Hide Group Member-Remove Button (Admin only)

[ALApplozicSettings setGroupMemberRemoveOption:NO];

ALApplozicSettings.setGroupMemberRemoveOption(false)

Disable Group Info (Tap on group Title)

[ALApplozicSettings setGroupInfoDisabled:YES];

ALApplozicSettings.setGroupInfoDisabled(true)

Disable Group Info Edit (Edit group name and image)

[ALApplozicSettings setGroupInfoEditDisabled:YES];

ALApplozicSettings.setGroupInfoEditDisabled(true)

Enable broadcast group create option (Create broadcast group option )

[ALApplozicSettings setBroadcastGroupEnable:YES];

ALApplozicSettings.setBroadcastGroupEnable(true)

Change google location Map key in the below settings

[ALUserDefaultsHandler setGoogleMapAPIKey:@"AIzaSyBnWMTGs1uTFuf8fqQtsmLk-vsWM7OrIXk"]; //REPLACE WITH YOUR GOOGLE MAPKEY

ALUserDefaultsHandler.setGoogleMapAPIKey("AIzaSyBnWMTGs1uTFuf8fqQtsmLk-vsWM7OrIXk")  //REPLACE WITH YOUR GOOGLE MAPKEY

Changing the font size in the chat screen

[ALApplozicSettings setChatCellTextFontSize:15];

  [ALApplozicSettings setChannelCellTextFontSize:15];

ALApplozicSettings.setChatCellTextFontSize(15)

 ALApplozicSettings.setChannelCellTextFontSize(15)

Group Action Messages Color

Use this change the background and text color of group action messages like "Created a group" etc.

[ALApplozicSettings setChannelActionMessageBgColor: <UIColor>];
[ALApplozicSettings setChannelActionMessageTextColor: <UIColor>];

Enable reply option or disable option set `YES` for enabling, `NO` for disable

[ALApplozicSettings replyOptionEnabled:YES];

ALApplozicSettings.replyOptionEnabled(true)

Enable forward option or disable `YES` for enabling, `NO` for disable

[ALApplozicSettings forwardOptionEnableOrDisable:YES];

ALApplozicSettings.forwardOptionEnableOrDisable(true)

Enable Swipe Audio Record

You can enable or disable using below settings

[ALApplozicSettings enableQuickAudioRecording:YES];
[ALApplozicSettings.enableNewAudioDesign:YES];

ALApplozicSettings.enableQuickAudioRecording(true)
ALApplozicSettings.enableNewAudioDesign(true)

Sending message meta in all conversations

You can use the below settings and pass your own key-value this will go in all the messages in the chat.

NSMutableDictionary *messageMetadata = [[NSMutableDictionary alloc] init];
[messageMetadata setValue:@"messageMetaDataValue1" forKey:@"key1"];
[messageMetadata setValue:@"messageMetaDataValue2" forKey:@"key2"];
[ALApplozicSettings setMessageMetadata:messageMetadata];

Enable contact/user search from server

You can add the below settings to enable the contact/user search from the server

Note: You need to click the search button to see the results

[ALApplozicSettings enableContactSearch:YES];

ALApplozicSettings.enableContactSearch(true)

Enable or Disable the unread count badge in an app icon

You can enable or disable the badge count in an app icon by using below settings in ALChatmanager file
Make sure setting is added only once in ALChatmanager file

0 - For disabling the badge count in-app icon
1 - For Enable the badge count in-app icon

[ALUserDefaultsHandler setUnreadCountType:0];

ALUserDefaultsHandler.setUnreadCountType(0)

Pin contact at the top of the contact listing screen

You can add these setting in ALDefaultChatViewSettings method in the ALChatManager file.

[ALApplozicSettings setSupportContactUserId:@"<SUPPORT-CONTACT-USERID>"];

ALUserDefaultsHandler.setSupportContactUserId("<SUPPORT-CONTACT-USERID>")

NOTE: To show the contact at the top the contact needs to exist you can check this link for adding support contact.

Customizing attachment options.

You can hide particular attachment options or attachment button itself by using below settings. You need to use below codes to hide different options from action sheet.

:camera // hide camera
:gallery // hide attachment form gallery
:audio //hide audio attachment options
:video //hide video attachment options
:location //hide location sharing options
:blockUser //hide block user options
:shareContact //hide contact sharing options
:attachmentbutton //hide attachment button

NSArray*[email protected][@":audio",@":video",@":location",@":shareContact"];

[ALApplozicSettings setHideAttachmentsOption:attachmentOptionToHide];

let attachmentOptionToHide = [":audio", ":video", ":location", ":shareContact"]
  ALApplozicSettings.setHideAttachmentsOption(attachmentOptionToHide)

Enable message search

In iOS, message search is based on the server for this you need to send the request at [email protected] for enabling message search for your appId

🚧
NOTE: Message search will only work if it's enabled for your APP_ID And also make sure to use the latest version of Applozic >= 7.9.+

You can add these settings in ALDefaultChatViewSettings method in the ALChatManager file.

[ALApplozicSettings enableMessageSearch:YES];

ALApplozicSettings.enableMessageSearch(true)

Enable Document Sharing

We support documents like pdf, doc etc. through iCloud. Add below setting in the ALChatManager to enable this option. It will be shown along with the other attachment options.

[ALApplozicSettings enableDocumentOption:YES];

ALApplozicSettings.enableDocumentOption(true)

Theme Customization

Set Color for Navigation Bar

[ALApplozicSettings setColorForNavigation: [UIColor colorWithRed:66.0/255 green:173.0/255 blue:247.0/255 alpha:1]];

ALApplozicSettings.setColorForNavigation(UIColor(red: 66.0/255, green: 173.0/255, blue: 247.0/255, alpha:1))

Set Colour for Navigation Bar Item

[ALApplozicSettings setColorForNavigationItem: [UIColor whiteColor]];

ALApplozicSettings.setColorForNavigationItem(UIColor.whiteColor())

Hide Tab Bar (Profile tab)

[ALUserDefaultsHandler setBottomTabBarHidden: YES];

ALUserDefaultsHandler.setBottomTabBarHidden(true)

. Set Font Face

[ALApplozicSettings setFontaFace: @"Helvetica"];

[ALApplozicSettings setFontaFace: @"Helvetica"];

Enable the one-to-one chat with the group user

Open the file ALChatManager.m and find the setting ALDefaultChatViewSettings and add the following setting.

[ALApplozicSettings openChatOnTapUserProfile: YES];

Notification sound configuration

If you want to change default sound notification then while doing login you need to pass the notification sound file name which you added to your project this is the login link you need to use the below code

[user setNotificationSoundFileName:@"notification sound file name"];

user.notificationSoundFileName = "notification sound file name"

Enable or disable the receiver profile in one to one chat

[ALApplozicSettings setReceiverUserProfileOption:YES];

ALApplozicSettings.setReceiverUserProfileOption(true)

Image compression settings

You can change the max compression factor and change the max size for compression

[ALApplozicSettings setMaxCompressionFactor:0.1f];
 [ALApplozicSettings setMaxImageSizeForUploadInMB:3];

ALApplozicSettings.setMaxCompressionFactor(0.1f)
 ALApplozicSettings.setMaxImageSizeForUploadInMB(3)

User Interaction Callbacks

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

On User Profile Tap

Use the below code to get the profile tap notification event to your app

/// add the observer to listen the tap event 
[[NSNotificationCenter defaultCenter]
     addObserver:self
     selector:@selector(onProfileTap:)
     name:ThirdPartyProfileTapNotification
     object:nil];

/// Once user taps you will get the details here 
-(void)onProfileTap:(NSNotification *)notification {
    NSDictionary *tapUserInfoDictionary = notification.userInfo;
    NSString * userId = [tapUserInfoDictionary valueForKey:ThirdPartyDetailVCNotificationALContact];
    ALContactService * contactService = [[ALContactService alloc] init];
    ALContact * contact = [contactService loadContactByKey:@"userId" value:userId];
    NSLog(@"onProfileTap userId %@", contact.userId);
}

/// Add the observer 
NotificationCenter.default.addObserver(self, selector: #selector(onProfileTap(notification:)), name: NSNotification.Name(rawValue: ThirdPartyDetailVCNotificationALContact), object: nil)    
    
/// Once user taps you will get the details here 
@objc func onProfileTap(notification: NSNotification) {
        guard let tapUserInfoDictionary = notification.userInfo else {
            return
        }
        let userId = tapUserInfoDictionary[ThirdPartyDetailVCNotificationALContact] as? String
        let contactService = ALContactService()
        let contact = contactService.loadContact(byKey: "userId", value: userId)

        print("UserId  %@", contact?.userId)
        print("Display name %@", contact?.getDisplayName())

}

NOTE: Disable the existing profile tap using the below code

[ALApplozicSettings openChatOnTapUserProfile:NO];

ALApplozicSettings.openChat(onTapUserProfile: false)

Container View

You can also add our ChatList view as a subview. To do that enter the below code in your ViewController's viewDidLoad method:

UIView * containerView = [[UIView alloc] init];
containerView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:containerView];

[containerView.leadingAnchor constraintEqualToAnchor: self.view.leadingAnchor].active = true;
[containerView.trailingAnchor constraintEqualToAnchor: self.view.trailingAnchor].active = true;
[containerView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = true;
[containerView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = true;

// Add child view controller view to container
NSBundle * bundle = [NSBundle bundleForClass:ALMessagesViewController.class];
UIStoryboard * storyboard = [UIStoryboard storyboardWithName: @"Applozic" bundle:bundle];
UIViewController * controller = [storyboard instantiateViewControllerWithIdentifier:@"ALViewController"];
[self addChildViewController: controller];
controller.view.translatesAutoresizingMaskIntoConstraints = false;
[containerView addSubview:controller.view];

[controller.view.leadingAnchor constraintEqualToAnchor: containerView.leadingAnchor].active = true;
[controller.view.trailingAnchor constraintEqualToAnchor: containerView.trailingAnchor].active = true;
[controller.view.topAnchor constraintEqualToAnchor:containerView.topAnchor].active = true;
[controller.view.bottomAnchor constraintEqualToAnchor:containerView.bottomAnchor].active = true;

[controller didMoveToParentViewController:self];

let containerView = UIView()
containerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(containerView)
NSLayoutConstraint.activate([
    containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
    containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0),
    containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0),
    containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0),
    ])

// Add child view controller view to container
let story = UIStoryboard(name: "Applozic", bundle: Bundle(for: ALMessagesViewController.self))
let controller = story.instantiateViewController(withIdentifier: "ALViewController")
addChildViewController(controller)
controller.view.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(controller.view)

NSLayoutConstraint.activate([
    controller.view.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
    controller.view.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
    controller.view.topAnchor.constraint(equalTo: containerView.topAnchor),
    controller.view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
    ])

controller.didMove(toParentViewController: self)

In ALChatManager.m file in method ALDefaultChatViewSettings set the viewController name using the below settings: Pass your view controller name where the ChatList is added to

[ALApplozicSettings setMsgContainerVC:[YOUR-VIEW-CONTROLLER-NAME description]];

ALApplozicSettings.setMsgContainerVC(YOUR-VIEW-CONTROLLER-NAME .description())

To start the contacts view Controller on click on the navigation bar button you can use this code to start it

UIStoryboard* storyboard = [UIStoryboard storyboardWithName:@"Applozic" bundle:[NSBundle bundleForClass:ALChatViewController.class]];
ALNewContactsViewController *contactVC = (ALNewContactsViewController *)[storyboard instantiateViewControllerWithIdentifier:@"ALNewContactsViewController"]; contactVC.forGroup = [NSNumber numberWithInt:0];
[self.navigationController pushViewController:contactVC animated:YES];

let storyboard = UIStoryboard(name: "Applozic", bundle: Bundle(for: ALChatViewController.self))
let contactVC = storyboard.instantiateViewController(withIdentifier: "ALNewContactsViewController") as? ALNewContactsViewController
        contactVC?.forGroup = NSNumber(value: 0)
   if let contactVC = contactVC {
       navigationController?.pushViewController(contactVC, animated: true)
   }

Sample Container view controller source code

Swift sample ContinerListViewController

Objective-c sample ContinerListViewController

UI Source Code

For complete control over UI, you can download our open source chat UI toolkit and change it as per your designs :

https://github.com/AppLozic/Applozic-iOS-SDK

Import Applozic iOS Library into your Xcode project.

It contains the UI related source code, icons, views and other resources which you can customize based on your design needs.

Sample app with integration is available under sampleapp

📘
Have Question Or Suggestion?
You can drop us your query at [email protected]

Customise Pod

If you have added our SDK using CocoaPods then you should not directly modify our pod. If you modify our pod and later you want to update the pod then all the local changes will be removed.

The right way to do is to fork our repo then clone the repo and do the changes. Once you are done with the changes then push it. Now what you need to do is to use this forked repo in the pod. You need to pass the URL of this forked repo.

In your podfile you need to write it in this way:

pod 'Applozic', :git => '<url_of_your_forked_repo>'

then run pod install in the terminal

Later, when you want to update our SDK then just fetch the changes from our repo, and merge the changes to your forked repo. It will be updated.

If you just want to keep your changes locally, then clone the repo and do the changes. In your podfile, pass the path of your local repo.

Audio/Video call with Applozic chat

🚧
We do not provide audio/video call from Applozic SDK side below setting can help you in implementing the third party integration.
You can enable the call button in one to one chat pre-built UI and launch your own screen to start an audio/video call.

You can create a storyboard with name AudioVideo and in that storyboard create your view controller.

❗️
Note: Your view controller must be a subclass of ALAudioVideoBaseVC

After this, you will have to add these settings in ALDefaultChatViewSettings method in the ALChatManager file.

How does the below code work?

Step: 1

Below setting will enable the call button(Audio/Video) in the UI.
[ALApplozicSettings setAudioVideoEnabled: YES];

Step: 2

Below code informs to Applozic that user is trying to access the calling feature and you will have to add the third-party code to start the audio/video calling.

[ALApplozicSettings setAudioVideoClassName: NameOfYOurViewControllerHERE];

[ALApplozicSettings setAudioVideoEnabled: YES];
[ALApplozicSettings setAudioVideoClassName: NameOfYOurViewControllerHERE];/// Replace with your view controller name

ALApplozicSettings.setAudioVideoEnabled(true)
ALApplozicSettings.setAudioVideoClassName(NameOfYOurViewControllerHERE) /// Replace with your view controller name

📘

❗️

Chat Bubble Color

For message received

For message sent

Chat Background

Chat Screen

Hide profile Image

Hide refresh button

Chat Title

Text Input Background Color

User Icon Colors

Group Messaging

Disable group functionality

Hide Group Exit Button

Hide Group Member-Add Button (Admin only)

Hide Group Member-Remove Button (Admin only)

Disable Group Info (Tap on group Title)

Disable Group Info Edit (Edit group name and image)

Enable broadcast group create option (Create broadcast group option )

Change google location Map key in the below settings

Changing the font size in the chat screen

Group Action Messages Color

Enable reply option or disable option set YES for enabling, NO for disable

Enable forward option or disable YES for enabling, NO for disable

Enable Swipe Audio Record

Sending message meta in all conversations

Enable contact/user search from server

Enable or Disable the unread count badge in an app icon

Pin contact at the top of the contact listing screen

Customizing attachment options.

Enable message search

🚧

Enable Document Sharing

Theme Customization

Set Color for Navigation Bar

Set Colour for Navigation Bar Item

Hide Tab Bar (Profile tab)

. Set Font Face

Enable the one-to-one chat with the group user

Notification sound configuration

Enable or disable the receiver profile in one to one chat

Image compression settings

User Interaction Callbacks

On User Profile Tap

Container View

UI Source Code

📘Have Question Or Suggestion?

Customise Pod

Audio/Video call with Applozic chat

🚧

❗️

What's Next

Enable reply option or disable option set `YES` for enabling, `NO` for disable

Enable forward option or disable `YES` for enabling, `NO` for disable

📘
Have Question Or Suggestion?