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
YES
for enabling, NO
for disable[ALApplozicSettings replyOptionEnabled:YES];
ALApplozicSettings.replyOptionEnabled(true)
Enable forward option or disable YES
for enabling, NO
for 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 the below settings in the ALChatManager
file .m or .swift inside a method name ALDefaultChatViewSettings
Make sure setting is added only once in ALChatManager
file .m or .swift
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
Updated a day ago
What's Next
Chat localization |