Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Build an iOS Chat App with Xcode

The Embedded Service SDK for Mobile Apps makes it easier to add chat, using your chatbot, right into your iOS app. That’s what we’re here to do. For the full lowdown, check out the Service SDK Developer Center, but for now let’s see what this thing can do with a quick tutorial.

Create an iOS App in Xcode

Even though this step walks you through the whole process of adding a chatbot to an iOS mobile app, we assume that you’ve built at least one iOS app before. If you’ve never tried your hand at iOS development, check out Swift Essentials and especially Xcode Essentials, where we walk through building and designing an iOS Light app.

  1. Create a new Single View App in Xcode.
    The template menu in Xcode with Single View App selected.
  2. Add your app information.
    • Product Name: ChatbotTestApp
    • Organization Identifier: Team.Cody
    • Language: Swift
    • User Interface: Storyboard
    • Uncheck the boxes for Use Core Data, Include Unit Tests, and Include UI Tests. The option menu for a new app with spaces for Product Name, Organization Identifier, Language, User Interface, and more.
  3. Click Next.
  4. Select the folder where you want to save this app and click Create.

Install the Service SDK

Follow these quick instructions to install the SDK. If you want the complete details, refer to Install the Service SDK for iOS.

  1. If you didn’t do this in the first step, download the SDK framework files from the Service SDK download page. The zip file contains a few different frameworks. The only two frameworks that we need are ServiceCore and ServiceChat.
  2. Copy ServiceCore.framework and ServiceChat.framework from your project folder and paste them into the same folder as Info.plist.
    Asset list with ServiceChat.framework and ServiceCore.framework highlighted.
  3. Once you create the app, you should be in the General page of your app in Xcode. Scroll down to the Frameworks, Libraries, and Embedded Content section of your Xcode project General settings, add the ServiceCore and ServiceChat files.
    • Click the +
    • Click Add Other... | Add Files ...
    • Select the ServiceCore.framework and ServiceChat.framework that you pasted into your project folder in step 2.The General settings page in Xcode with ServiceCore and ServiceChat highlighted by a rounded box under the Embedded Binaries section.

Because the chat experience with an agent could involve transferring an image, you need to provide descriptions for why the app might access the device’s camera and photo library.

Add string values for "Privacy - Camera Usage Description" and "Privacy - Photo Library Usage Description" in your Info.plist file. To learn more about these properties, see Cocoa Keys in Apple’s reference documentation.

  • Open your Info.plist file as Source Code (control+click > Open As),
  • Add these values as XML to the property list dictionary section (labeled as <dict>).
<key>NSCameraUsageDescription</key>
<string>Used when sending an image to an agent.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Used when sending an image to an agent.</string>
  • Save your work.

Add a Chat Button

With the SDK installed, it’s time to bring the app to life. 

  1. Go to Main.storyboard and search for button in the Library (⇧⌘L).
  2. Drag a button into the view.
    The button dragged into the app view, with the library search open.
  3. Name the button Chat with an Expert
  4. Align the button so that it shows on the view no matter how the device is oriented. One simple way to do this is by centering the button horizontally and vertically.
    • With your button selected, click the Alignment Constraints button at the bottom of the storyboard.
    • Check the boxes next to Horizontally in Container and Vertically in Container.
    • Make sure the value is 0 in both cases.
    • Select Add 2 Constraints.
      The Chat with an Expert button centered in vertical view.

You now have a working app with a button. The button doesn’t do anything yet. Let’s fix that.

Connect the Chat Button

Connect the button to a method in the ViewController class. To do this, turn on the Assistant while viewing the storyboard.

  1. Click the Adjust Editor Options button.
  2. Select Assistant.

Assistant highlighted by a mouse hover.

This action displays a split screen with the storyboard on the left and the ViewController code on the right. 

  1. Secondary click (control+click) the button in the storyboard to open up the menu.
  2. Click the circle next to Touch Up Inside and drag it into the ViewController class on the right. The Chat with an Expert button menu open and a drag path from Touch Up Inside to the ViewController class.
  3. Name the action chatButtonTapped The action method option menu open, and chatButtonTapped in the name field.
  4. Click Connect to add the action.
  5. You just wired the method to the button. Now close the assistant editor window.
  6. Select the ViewController.swift class from the file browser and check out our new method.

The ViewController.swift class selected and the @IBAction func method highlighted by a red rounded box.

Configure Chat

Before we get the button to start a chatbot session, let’s get things configured. First, we import the Service SDK into our class so we can use the framework. 

At the top of the ViewController.swift file, in a new line under the existing import statement, import ServiceChat: import ServiceChat

At the top of the class, right after the class is defined, let’s add four constant values for our configuration information that we saved from the previous step. You can find more information in the Service SDK dev guide Get Chat Settings from Your Org. Change the placeholder values for these constants with your Pod Name, Org ID, Deployment ID, and Button ID.

let POD = "YOUR_POD_NAME"
let ORG_ID = "YOUR_ORG_ID"
let DEPLOYMENT_ID = "YOUR_DEPLOYMENT_ID"
let BUTTON_ID = "YOUR_BUTTON_ID"

Below those values, let’s add a variable that we use to specify chat configuration information

var chatConfig: SCSChatConfiguration?

Then, configure the SDK in the viewDidLoad method. If your app is more complex than this single-view-controller app that we’re creating, just keep in mind that you only need to call this configuration code one time in the lifecycle of your app, so you may want to move it outside of the view controller.

override func viewDidLoad() {
  super.viewDidLoad()
  chatConfig = SCSChatConfiguration(liveAgentPod: POD,
                                    orgId: ORG_ID,
                                    deploymentId: DEPLOYMENT_ID,
                                    buttonId: BUTTON_ID)
}

Great, we have our app configured. We’re almost ready to test it out. Keep going! You’re doing fine.

Start a Chatbot Session

The final step is to start a chat session, which we can do from the button handler we created earlier. From this method, let’s call the showChat method.

@IBAction func chatButtonTapped(_ sender: Any) {
        ServiceCloud.shared().chatUI.showChat(with: chatConfig!)
}

Since we’re throwing a lot of new information your way, let’s break down exactly what’s going on in this command.

  • ServiceCloud: This class is the entry point into the Service SDK.
  • shared(): This static method gets the singleton instance of the ServiceCloud class.
  • chatUI: This property gets the SCSChatInterface object, which is the entry point into the chat feature of the Service SDK.
  • showChat: This method shows the chat UI. This method has a few variants. We’re using the simplest method that only requires a chat configuration object (SCSChatConfiguration). There is another variant that is used if you want to display a pre-chat form.

If you’ve followed all these instructions, your ViewController.swift file looks like this:

import UIKit
import ServiceChat
class ViewController: UIViewController {
    let POD = "YOUR_POD_NAME"
    let ORG_ID = "YOUR_ORG_ID"
    let DEPLOYMENT_ID = "YOUR_DEPLOYMENT_ID"
    let BUTTON_ID = "YOUR_BUTTON_ID"
    var chatConfig: SCSChatConfiguration?
    override func viewDidLoad() {
        super.viewDidLoad()
        chatConfig = SCSChatConfiguration(liveAgentPod: POD,
                                          orgId: ORG_ID,
                                          deploymentId: DEPLOYMENT_ID,
                                          buttonId: BUTTON_ID)
    }
    @IBAction func chatButtonTapped(_ sender: Any) {
        ServiceCloud.shared().chatUI.showChat(with: chatConfig!)
    }
}

If your code doesn’t look exactly like this, it’s OK. You went from Salesforce to Xcode and the Services SDK. It’s a juggle. If you need to, revisit the sections above and clean things up as necessary. We are here to test your bot once you get the code in shape.

Test Your Bot!

Let’s see what happens when we build and run the app in the simulator.

Xcode top toolbar, with the Build button highlighted by a mouse hover over.

Click the Play button at the top left of the project. When the app launches, click the chat button. A thumbnail of the chatbot session appears on the right side of the screen.

An iPhone with the Einstein Bot thumbnail open on the right of the screen.

Click the thumbnail. You can have a complete interaction with your chatbot, including menus and buttons and any other smarts you’ve added to your bot along the way.

An iPhone with a chat message from an Einstein Bot, including buttons to help the customer select whether their conversation is Order or Appointment related.

Pretty cool, huh? Our app is already wired up to our bot. As you can probably tell, there’s more work to be done. For one, we need to make our bot smarter to make the conversation more personal and valuable to customers. This is what we do in the next step.

There’s also lots we haven’t covered about using this SDK. For example:

  • Pre-chat Forms: You can display a pre-chat form before starting a session, so that your bot (or agent) can use this information right away.
  • State Changes and Error Handling: We haven’t written any code yet to detect state changes or handle error conditions.
  • Branding and Customization: You can fully brand the look and feel of the chat UI and customize the colors, strings, and fonts.
  • Roll Your Own UI: You can even build your own UI and simply use the Chat Core API to communicate with the underlying chat functionality.

To get the full story on using this SDK, check out all the chat-related topics in the Service SDK developer guide: Using Chat with the Service SDK for iOS.