How to Implement Chat in your E-Commerce iOS App
Tags: swift, ios, beginners, tutorial
Published: 2020-07-29 13:58:19

---
title: How to Implement Chat in your E-Commerce iOS App
published: true
description: 
tags: Swift, iOS, Beginners, Tutorial
cover_image: https://i.imgur.com/JHm5Nx1.png
canonical_url: https://getstream.io/blog/e-commerce-chat-ios/
---

In this tutorial, we'll integrate chat in an e-commerce app using [Stream Chat's Swift SDK](https://github.com/getstream/stream-chat-swift/). It's crucial for buyers that may need immediate communication for payments, delivery status, last-minute changes, and refunds.

![Screenshot shows an e-commerce iOS app screen with a chat button that leads to the chat screen, also pictured](https://i.imgur.com/JHm5Nx1.png)

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

If you get lost during this tutorial, you can check the completed project in this [GitHub repo](https://github.com/GetStream/e-commerce-chat-ios/). 

## 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 & SDKs.
> - [Stream Chat & Messaging](https://getstream.io/chat/)

## Set up the Stream Chat dependency

To install the [Stream Chat](https://getstream.io/chat/) dependency, we'll use [CocoaPods](https://cocoapods.org/). 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:

{% gist https://gist.github.com/cardoso/75f7cfe1678cc23c785dc1ad3845d9b1 %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/75f7cfe1678cc23c785dc1ad3845d9b1) - TIP: If you refresh the page, it may fix it!

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](https://getstream.io/), create the application, and make sure to select development instead of production.

![Screenshot of a user creating a development application at GetStream.io](https://dev-to-uploads.s3.amazonaws.com/i/o6nhrm361eeh7qkhla8q.png)

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.

![Screenshot of skip auth checks and permission being enabled in a Stream App dashboard](https://dev-to-uploads.s3.amazonaws.com/i/ir0vtvh2rgowvy0lohn0.png)

You can see the documentation about authentication [here](https://getstream.io/chat/docs/tokens_and_authentication/?language=swift) and permissions [here](https://getstream.io/chat/docs/chat_permission_policies/?language=swift).  

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](https://getstream.io/docs/auth_and_permissions/), so users can interact with your app securely.

![Screenshot of credentials on stream dashboard](https://dev-to-uploads.s3.amazonaws.com/i/1bl76070ym1iiw211wef.png)

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.

{% gist https://gist.github.com/cardoso/a6cb823607a30b946e91000ad89fbd24 %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/a6cb823607a30b946e91000ad89fbd24)

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](https://getstream.io/chat/) 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 Buyer, and the other to join as a Seller. 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 sellers. For this tutorial, the screen will look similar to the screenshot below.

![Screenshot shows an app with two buttons, one to join as a buyer, and the other to join as the seller](https://i.imgur.com/vRinhro.png)

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.

![Image shows storyboard with a JoinViewController embedded in a navigation controller](https://i.imgur.com/0QvlBGW.png)

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`:

{% gist https://gist.github.com/cardoso/1c6d908e3b806e85ea8439e7f7101962 %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/1c6d908e3b806e85ea8439e7f7101962)

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

{% gist https://gist.github.com/cardoso/2fb16f2166197f94357327659e92dab7 %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/2fb16f2166197f94357327659e92dab7)

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`:

{% gist https://gist.github.com/cardoso/f6270858d2dd198cf44a9e99aa931aa7 %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/f6270858d2dd198cf44a9e99aa931aa7)

That code will make sure the `buyerButton` stays in the center of the screen and the `sellerButton` 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`:

{% gist https://gist.github.com/cardoso/5d182a8c86ccb2b8dc9690f3537aba1d %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/5d182a8c86ccb2b8dc9690f3537aba1d)

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

{% gist https://gist.github.com/cardoso/5c5ff07dc4534a7d4fba5b14a682037c %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/5c5ff07dc4534a7d4fba5b14a682037c)

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

We'll create `BuyerViewController` in the next step.

## Create the Buyer Screen

Now, let's create the screen that represents our regular app and through which a regular buyer 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.

![Screenshot shows an app window with a support button that leads to a chat screen with the seller](https://i.imgur.com/EEfW7Hj.png)

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

{% gist https://gist.github.com/cardoso/ee3c9841aa2d62f072a5f22f9007a60d %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/ee3c9841aa2d62f072a5f22f9007a60d)

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

{% gist https://gist.github.com/cardoso/e38536b473c9e4bf1bc84f8fe6360d48 %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/e38536b473c9e4bf1bc84f8fe6360d48)

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`:

{% gist https://gist.github.com/cardoso/577768794a7f1a0af5c0df77ddf5d58d %}
(dev.to might be showing a different snippet due to a bug, if so link is here: https://gist.github.com/cardoso/577768794a7f1a0af5c0df77ddf5d58d)

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

![Screenshot shows a fully featured chat screen with the seller](https://i.imgur.com/5eckVvp.png)

If you're a seller, you'll be able to see all channels created by buyers and access the chat screen for each of them.

![Screenshots show a channels list and a chat screen](https://i.imgur.com/8iGm3rY.png)

## E-commerce chat completed

Congratulations! You've implemented the basis of a functioning chat system for your e-commerce app with Stream Chat. I encourage you to browse through [Stream Chat's docs](https://getstream.io/chat/docs/introduction/?language=swift) and experiment with the project you just built.