In-app Chat UIKit
  • iOS : Swift
  • Android
  • Web
  • Overview
  • Quick start
    • Integrate the SDK
    • Start a chat
  • Run the sample code
  • UI components
  • SDK downloads
  • Release notes

Integrate the SDK

Last updated:2022-11-14 14:55

In-app Chat UIKit is a set of UI components implemented based on the In-app Chat SDK, it includes UI components such as the conversation and message components. With the help of the In-app Chat UIKit, you can quickly build your chat app and focus on building your business logic.

Prerequisites

  • Go to ZEGOCLOUD Admin Console and do the following:
    1. Create a project, and get the AppID and AppSign of your project.
    2. Subscribe to the In-app Chat service (Contact technical support if the subscript doesn't go well).
      /Pics/InappChat/ActivateZIMinConsole2.png
  • Environment-specific requirements:
    • Xcode 13.0 or later
    • An iOS device that is running on iOS 12.0 or later
    • The device is connected to the internet.

Integrate the SDK

Add SDK dependencies (using CocoaPods)

The Cocoapods version needs to be 1.10.0 or later.

  1. Open the Terminal, enter the root directory of the project, and run the following to create a Podfile file.
pod init
  1. Open Podfile, add pod 'ZIMKit', and change MyProject to your target name.
target 'MyProject' do
  use_frameworks!
  pod 'ZIMKit'
end
  1. Execute pod repo update to update the local index to make sure the latest version of SDK can be installed.
pod repo update
  1. Execute pod install to install the SDK.
pod install

Integrate In-app Chat UIKit into the project

  1. Initialize the In-app Chat UIKit.
/// AppDelegate.swift
import UIKit
import ZIMKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        let appID: UInt32 = <#your appID#> // The AppID you get from ZEGOCLOUD Admin Console.
        let appSign: String = <#your appSign#> // The AppSign you get from ZEGOCLOUD Admin Console.
        ZIMKitManager.shared.initWith(appID: appID, appSign: appSign)
    }
}
  1. Log in to In-app Chat UIKit.

After initializing the In-app Chat UIKit, you will need to log in by calling the connectUser: method with your user information.

You can customize rules to generate the user ID and user name. We recommend that you set a meaningful user ID. You can associate the user ID with your business account system.

import UIKit
import ZIMKit

/// your viewController.swift
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let connectUserButton = UIButton(type: .custom)
        connectUserButton.setTitle("Connect User And Show", for: .normal)
        connectUserButton.frame = .init(x: 100, y: 100, width: 250, height: 50)
        connectUserButton.addTarget(self, action: #selector(connectUserAction), for: .touchUpInside)
        connectUserButton.backgroundColor = .orange
        view.addSubview(connectUserButton)

    }

    @objc func connectUserAction(_ sender: Any) {
        // Your ID as a user.
        let userID: String = "<#your userID#>" 
        // Your name as a user.
        let userName: String = "<#your userName#>" 
        // The image you set as the user avatar must be network image. e.g., https://storage.zego.im/IMKit/avatar/avatar-0.png
        let userAvatarUrl: String = "<#your userAvatarUrl#>" 

        let userInfo = UserInfo(userID, userName)
        userInfo.avatarUrl = userAvatarUrl
        ZIMKitManager.shared.connectUser(userInfo: userInfo) { [weak self] error in
            //  Display the UI views after connecting the user successfully. 
            if error.code == .success {
                self?.showConversationListVC()
            }    
        }
    }
}
  1. Display the conversation component of the In-app Chat UIKit.
/// your viewController.swift
func showConversationListVC() {
    let conversationVC = ConversationListVC()
    let nav = UINavigationController(rootViewController: conversationVC)
    nav.modalPresentationStyle = .fullScreen
    self.present(nav, animated: true)
}

Configure your project

  1. Select the Source Code mode to open the Info.plist file.
  1. Add the following to the dict part:
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to use zimkit.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We require photo access to use zimkit.</string>

Conversation component effect:

More to explore

Get support

Need help or want to raise your questions? Click the button below to join our Discord community to get quick responses.

Join Discord community