How to Implement In-App Support Chat on iOS

In this tutorial, we'll build an in-app support system using Stream Chat's Swift SDK, which you can quickly integrate in new or existing apps. It's crucial for users that may need immediate information or assistance in completing a task. It's frequently present in banking, e-commerce, delivery, and ride sharing apps.

Those screenshots show a button leading to a support chat screen where the user can get information in real time from an agent. This is what we'll build.

If you get lost during this tutorial, you can check the completed project in this GitHub repo.

What is Stream Chat?

Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure. Drive in-app conversion, engagement, and retention with the Stream Chat messaging platform API & Chat SDKs.

• Stream Chat & Messaging

Set up the Stream Chat dependency

To install the Stream Chat dependency, we'll use CocoaPods. If you prefer Carthage or Swift Package Manager, they're also supported.

In your project's folder, if you aren't already using CocoaPods, run pod init and add StreamChat to the Podfile. It should look similar to this:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'InAppSupportChatApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for InAppSupportChatApp
  pod 'StreamChat', '~> 2.2'
end

After you do that, run pod install, wait a bit for it to finish, and open the project via the .xcworkspace that was created.

Configure the Stream Chat dashboard

Sign up at GetStream.io, create the application, and make sure to select development instead of production.

To make things simple for now, let's disable both auth checks and permission checks. Make sure to hit save. When your app is in production, you should keep these enabled.

You can see the documentation about authentication here and permissions here.

Now, save your Stream credentials, as we'll need them to power the chat in the app in the next step. Since we disabled auth and permissions, we'll only really need the key for now, but in production, you'll use the secret in your backend to implement proper authentication to issue user tokens for Stream Chat, so users can interact with your app securely.

As you can see, I've blacked out my keys. You should make sure to keep your credentials safe.

Configure Stream Chat SDK

Now that we've set up the project and Stream Chat dashboard let's configure the SDK's singleton with the Stream Chat App's key you got in the last step. The didFinishLaunchingWithOptions function in AppDelegate.swift should look similar to the following snippet.

import UIKit
import StreamChatClient

...
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        Client.configureShared(.init(apiKey: "31e2eqp53qu3", logOptions: .info))
        return true
    }
...

That will configure the Client.shared instance, which will be used by the Stream Chat UI components to make calls to the Stream Chat API and subscribe to events.

Create the Join Screen

Let's start building the "Join" screen. This screen consists of two UIButton instances. One to join as a User, and the other to join as an Agent. This is, of course, an oversimplification to make this tutorial short and get to the chat features faster. In your complete app, you'll need proper registration, database, and all that. It's also likely that you'll want a separate app for the agents. For this tutorial, the screen will look similar to the screenshot below.

Go to the storyboard, select the default view controller, and click Editor > Embed In > Navigation Controller. That will place it under a navigation controller, which we'll use to navigate to the next screen.

Make sure to rename ViewController to JoinViewController, so you don't get confused later on. You can do this easily by right-clicking on ViewController in ViewController.swift and selecting refactor.

To make things simple, let's leave the storyboard like this and use only code from now on. To set up the two buttons, we need the following code in JoinViewController.swift:

import UIKit

class JoinViewController: UIViewController {
    let userButton = UIButton()
    let agentButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        title = "Join"
        
        setupViews()
        setupConstraints()
        setupHandlers()
    }
}

That code sets up the views, the constraints, and the handlers we need. Let's start by extending JoinViewController to define setupViews:

extension JoinViewController {
    func setupViews() {
        setupUserButton()
        setupAgentButton()
    }
    
    private func setupUserButton() {
        userButton.translatesAutoresizingMaskIntoConstraints = false
        userButton.setTitleColor(.systemBlue, for: .normal)
        userButton.setTitle("User 👤", for: .normal)
        userButton.titleLabel?.font = .systemFont(ofSize: 32)
        
        view.addSubview(userButton)
    }
    
    private func setupAgentButton() {
        agentButton.translatesAutoresizingMaskIntoConstraints = false
        agentButton.setTitleColor(.systemBlue, for: .normal)
        agentButton.setTitle("Agent 👩‍💻", for: .normal)
        agentButton.titleLabel?.font = .systemFont(ofSize: 32)
        
        view.addSubview(agentButton)
    }
}

That code will create the buttons and add them to the controller's view. Next, we need to define constraints between the three. Let's do this by extending JoinViewController to define setupConstraints:

extension JoinViewController {
    func setupConstraints() {
        view.addConstraints([
            userButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            userButton.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor, constant: -100),
            agentButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            agentButton.centerYAnchor.constraint(equalTo: userButton.centerYAnchor, constant: 100)
        ])
    }
}

That code will make sure the userButton stays in the center of the screen and the agentButton below it. Now we need to set up the handlers for when the user presses the buttons. Let's do this again by extending the controller to define setupHandlers:

import StreamChat
import StreamChatClient

extension JoinViewController {
    func setupHandlers() {
        userButton.addTarget(self, action: #selector(handleUserButtonPress), for: .touchUpInside)
        agentButton.addTarget(self, action: #selector(handleAgentButtonPress), for: .touchUpInside)
    }
    
    @objc private func handleUserButtonPress() {
        Client.shared.set(user: .init(id: .random()), token: .development) { result in
            switch result {
            case .success:
                let userVC = UserViewController()
                self.navigationController?.pushViewController(userVC, animated: true)
            case .failure(let error):
                print(error)
            }
        }
    }
    
    @objc private func handleAgentButtonPress() {
        Client.shared.set(user: .init(id: "Agent"), token: .development) { result in
            switch result {
            case .success:
                let channelsVC = ChannelsViewController()
                channelsVC.title = "Support Queue"  
                channelsVC.presenter = .init(filter: .equal("type", to: "messaging"))
                self.navigationController?.pushViewController(channelsVC, animated: true)
            case .failure(let error):
                print(error)
            }
        }
    }
}

That code will make it so when the user button is pressed, a UserViewController is presented, and when the agent button is pressed a ChannelsViewController, which is provided by Stream Chat, is presented for an agent to see the open support channels. Additionally, we're generating a random id for the user using the String extension below.

import Foundation

extension String {
    static func random(length: Int = 10) -> String {
        let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
        return String((0..<length).map{ _ in letters.randomElement()! })
    }
}

In a real-world app this is normally defined in the registration and login processes.

We'll create UserViewController in the next step.

Create the User Screen

Now, let's create the screen that represents our regular app and through which a regular user can access the support chat. There are many ways different apps use to access their support system, such as floating buttons and menu items. In this tutorial we'll introduce a button in the navigation bar for opening the support chat. It will look similar to the screenshot below.

The first step is to create a UserViewController.swift file and paste the code below.

import UIKit

class UserViewController: UIViewController {
    let supportButton = UIBarButtonItem()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupHandlers()
    }
}

That code sets up the views and the handlers we need. Let's start by extending JoinViewController to define setupViews:

import UIKit

extension UserViewController {
    func setupViews() {
        view.backgroundColor = .systemBackground
        setupSupportButton()
    }
    
    func setupSupportButton() {
        supportButton.image = UIImage(systemName: "exclamationmark.bubble")
        navigationItem.rightBarButtonItem = supportButton
    }
}

That code will place the support button at the top right in the navigation bar. However, we still need to define the handler for that button press. Let's do that by defining setupHandlers:

import StreamChat
import StreamChatClient

extension UserViewController {
    func setupHandlers() {
        supportButton.target = self
        supportButton.action = #selector(handleSupportButtonPress)
    }
    
    @objc func handleSupportButtonPress() {
        let uid = Client.shared.user.id
        let channel = Client.shared.channel(type: .messaging, id: "support-\(uid)")
        channel.extraData = ChannelExtraData(name: "\(uid) support")
        channel.create { _ in 
            channel.add(user: .init(id: "Agent")) { _ in
                
            }
        }
        
        let chatVC = ChatViewController()
        chatVC.presenter = .init(channel: channel)
        chatVC.title = "Support"
        
        let navigation = UINavigationController(rootViewController: chatVC)
        
        self.present(navigation, animated: true, completion: {
            
        })
    }
}

That code will create a support channel and present a ChatViewController, provided by Stream Chat, that will have all the behavior we need for the chat.

If you're an agent, you'll be able to see all support channels created by users and access the chat screen for each of them.

Wrapping up

Congratulations! You've built the basis of a functioning in-app support chat system with Stream Chat. I encourage you to browse through Stream Chat's docs and experiment with the project you just built.