Skip to main content

Business Card Message

You can send personal business cards through the IMKit business card plugin. The message will appear in the message list component of the chat UI. By default, the plugin sends a message containing the business card message object RCContactCardMessage (type identifier: RC:CardMsg).

(width=250) (width=250)

Usage

tip

The default chat UI in IMKit does not enable the business card message feature. To use this feature, integrate the IMKit business card plugin (ContactCard) and provide the data to be displayed and sent.

1. Import the Business Card Plugin

IMKit supports the business card plugin. After importing the plugin module, the feature entry will automatically appear in the extension panel. Clicking Personal Business Card in the extension panel will navigate to the contact list page (the app needs to provide the contact list).

  • Before IMKit 5.1.8, the business card plugin (ContactCard) only supported importing via source code.
  • From IMKit 5.1.8 onward, the business card plugin (ContactCard) supports importing via both source code and Framework.

Choose the appropriate import method (Framework or source code) based on how your app integrates IMKit. Do not mix Framework and source code integration methods.

  • Import the business card plugin Framework (requires SDK ≥ 5.1.8)

    pod 'RongCloudIM/ContactCard','~> x.y.z'           #Business Card Framework
  • Import the business card plugin source code

    pod 'RongCloudOpenSource/ContactCard','~> x.y.z'           #Business Card Source Code
tip

x.y.z represents the specific version. Check the latest version on the RC official website SDK download page or CocoaPods repository.

2. Set the Delegate

After importing the business card plugin module, you need to provide a contact list for the plugin. Implement the RCCCContactsDataSource protocol to supply the contact list to the SDK. For details, see RCContactCardKit.h.

[RCContactCardKit shareInstance].contactsDataSource = self;

3. Implement the Delegate Method

- (void)getAllContacts:(void (^)(NSArray<RCCCUserInfo *> *))resultBlock{
//Developers should call their own server API to fetch contact information and pass it to the business card module
[RCDUserInfoManager getAllFriendsFromServer:^(NSArray<RCDFriendInfo *> *_Nonnull userList) {
NSMutableArray *contacts = [NSMutableArray new];
for (RCDFriendInfo *friend in userList) {
RCCCUserInfo *contact = [RCCCUserInfo new];
contact.userId = friend.userId;
contact.name = friend.name;
if (friend.portraitUri.length <= 0) {
friend.portraitUri = [RCDUtilities defaultUserPortrait:friend];
}
contact.portraitUri = friend.portraitUri;
contact.displayName = friend.displayName;
[contacts addObject:contact];
}
resultBlock(contacts);
}];
}

4. Override the Message Tap Method in RCConversationViewController to Handle Business Card Message Clicks.

- (void)didTapMessageCell:(RCMessageModel *)model {
if ([model.content isKindOfClass:[RCContactCardMessage class]]) {
RCContactCardMessage *cardMSg = (RCContactCardMessage *)model.content;
// Execute app-specific logic here
return;
}

[super didTapMessageCell:model];
}

Sending Business Card Messages

Users can click the + button on the right side of the input bar to expand the extension panel. Clicking the personal business card icon will send the business card.

extension(width=250)

Customization

The business card plugin internally defines the business card message content class RCContactCardMessage.h and the business card message display template RCContactCardMessageCell.h.

Customize the UI of Business Card Messages

Business card messages are displayed in the message list using RCContactCardMessageCell. To adjust the built-in message style, we recommend customizing the message Cell and providing it to the SDK. All message templates in IMKit inherit from RCMessageCell, so custom message Cells must also inherit from RCMessageCell. For details, see Modify Message Display Styles.

You can also directly replace the style resources, string resources, and icon resources referenced in the message display template within RongCloud.bundle. For details, see the resources referenced in the IMKit source code RCContactCardMessageCell.m.

Customize the Personal Business Card Page UI

You can modify the top-left button color using the IMKit global navigation button settings:

RCKitConfigCenter.ui.globalNavigationBarTintColor = [UIColor whiteColor];