The Sendbird UIKit helps you quickly build in-app chat with customizable, pre-built UI components. The UIKit is for developers looking to quickly build a modern, full-featured, and scalable chat experience. With built-in standard chat features, ready-made designed UI components, and the ability to customize the overall theme and components’ colors and fonts, the Sendbird UIKit is a must-have for building modern chat.
This guide is intended to be a springboard to additional resources for customization. This guide will review the main points of customization with links to samples, tutorials, and open-source code. We will also outline how to restrict SDK actions, and then conclude with general FAQs.
Ready? Let’s begin! 💻
When considering customization of the Sendbird UIKit, it is essential to consider the available components. Please find a list of components below.
Now let’s talk about customization, one of the UIKit’s most valuable features. Many developers start with the UIKit’s out-of-the-box components and then choose to customize features by overriding them since many classes are subclassable with overridable methods. For example, some developers opt to override or disable certain functions, such as hiding the ‘Members’ list in the chat view or rendering a custom message with custom functionality when selecting the default attachment icon.
Sendbird provides quick-start samples. For the UIKit, there are some custom samples on how you might override certain classes and functions.
By default, the UIKit renders a channel list, and the user selects the channel in which to chat. It’s also possible to avoid showing the channel list with the UIKit and render a chat directly by loading the channel by the channel_url. The chat view can be nested and loaded in a tab inside your application. Please see additional resources below.
The UIKit is open source, thus you can see the code. This is beneficial when you are trying to customize. We don’t recommend forking the source directly as that limits future support should you need to update the SDK version later on.
The following may be especially useful:
In general, the Sendbird team can help you restrict access to certain SDK actions for your application such as creating channels, inviting users, or updating messages through the client apps. Please see below the table of actions that can be restricted. Please also let Sendbird know if you would like to restrict any of these actions; send us a message, contact your Customer Success Manager, or check out our support center.
|User List||Open Channel creation||Group Channel update only by operators||File Messages|
|User update||Group Channel creation||Group Channel image update only by operators||File Messages with URLs|
|Group Channel update||Group Channel name update only by operators||Message update|
|Group Channel invite||Non-operators can mention in the channel|
|Group Channel leave||Operators can ban other operators|
|Group Channel deletion||Operator can edit other operators|
With the UIKit, you may need to hide certain buttons or customize certain classes to suit your needs. Please let us know if you have a specific list of features that you are looking to either customize or block access to within the UIKit; you can send us a message, contact your Customer Success Manager, or check out our support center.
It’s possible to hide the channel settings view so that users cannot access the channel information or actions. By hiding the channel information section, not only do we hide the channel information such as the chat notifications and members list, but we also hide actions such as searching in a channel, leaving a channel, and editing a channel.
For example, on Android, set the setUseHeaderRightButton to false when creating the channel fragment.
It’s possible to override the functionality for the Channel settings. For example, on iOS, override the SBUChannelViewController’s showChannelSettings() function.
This code comes from the iOS Sendbird custom sample app when selecting the ChannelVC_Overriding option. Download the sample app to try it out.
It’s possible to hide the icon within the UIKit that permits creating a channel. For example, with React, set the channel right header icon’s visibility to ‘hidden’.
There are two ways to access the ‘Leave Channel’ option within the UIKit. Find examples for Android and iOS below on how to restrict access.
The above listeners give the channel as a parameter if you need to customize settings based on the type of channel.
iOS is similar to Android:
To disable the leave option completely, customize the SBUChannelListViewController and the SBUChannelSettingsViewController.
Users have the option to attach files, images, and documents. When selecting the plus icon (+) in the message input box, this triggers that list of actions by default.
Override the didSelectActionSheetItem(index: Int, identifier: Int) function to specify a custom action and then call super.didSelectActionSheetItem(index: Int, identifier: Int) to call upon the default actions.
Override the setInputLeftButtonListener(View.OnClickListener) if you need to create your own action list. The ChannelFragment class provides takeCamera(), takePhoto(), takeFile() methods out-of-the-box so it’s easy to reuse those methods in your custom implementation.
And that’s a wrap! We have seen how the Sendbird UIKit is the fastest way to integrate Sendbird chat. We’ve discussed the UIKit, customization options, and restrictions of SDK actions. If you are looking for more flexibility and features, check out our chat SDKs.
Happy chat building! 👩💻
Stay up-to-date on the latest technical content from Sendbird.