Salesforce Docs Portal

Build a UI SDK App for iOS

The UI SDK allows you to add Enhanced In-App Chat into your iOS app with a ready-to-go user experience. Just add the Interface view to your app. You can customize the colors and strings so that the Messaging user interface looks natural in your app. Enhance the experience with push notifications, hidden pre-chat data, user verification, and other features.

This article applies to the following implementations:

UI SDK Core SDK
✅

Step 1. Import the Framework

Import the frameworks from wherever you’re using the SDK.

import SMIClientCore // For the core classes
import SMIClientUI   // For the UI-related classes

Step 2. Configure the UI Session

Create a UIConfiguration instance. To create a configuration instance, you can point to the config file you previously downloaded from your org, or you can manually add the values from within this config file.

tip: This example creates a random UUID for the conversation ID. However, if you want this conversation to persist even after the app is restarted, be sure to use the same conversation ID. Also, if you want to see this same conversation across multiple devices, in addition to using the same conversation ID, turn on user verification, which is described in the Enhance the Experience section.

note: Don't use user IDs or other IDs as the ConversationID. Conversation IDs establish a permanent link with a user and are only available to the user who created it. Using a different existing ID instead of a unique ID can result in access issues or errors while developing or testing your Enhanced Chat integration. To pass existing IDs required for your flow, use the Pre-chat feature.

OPTION 1: Configure Using the Config File

Once you've added the config.json file to your project, you can reference it from the code.

// Get the path for the config file
guard let configPath = Bundle.main.path(forResource: "configFile",
                                        ofType: "json") else {
    // TO DO: Handle error
    return
}

// Get a URL for the config file
let configURL = URL(fileURLWithPath: configPath)

// Generate a random conversation ID
// (But be sure to use the SAME conversation ID if you want
// to continue this conversation across app restarts or
// across devices!)
let conversationID = UUID()

// Create a configuration object
let config = UIConfiguration(url: configURL, conversationId: conversationID)

note: To learn how to download the config file from your org, see Configure an Enhanced In-App Chat Deployment in Salesforce Help. This file contains the Service API URL, the org ID, and the API name for the deployment. For example:

{
  "OrganizationId": "00ZZZ0000000Zzz",
  "DeveloperName": "MyMessagingForInAppDeployment",
  "Url": "https://zzzz.my.api.url.salesforce-scrt.com"
}

OPTION 2: Configure Manually with Config Info

If you don't want to use the config.json file in your project, you can configure the SDK manually using the Service API URL, the org ID, and the API name for the deployment.

// Get a URL for the service API path
guard let serviceAPIURL = URL(string: "URL_TO_MY_SERVICE_API") else {
    // TO DO: Handle error
    return
}

// Generate a random conversation ID
// (But be sure to use the SAME conversation ID if you want
// to continue this conversation across app restarts or
// across devices!)
let conversationID = UUID()

// Create a configuration object
let config = UIConfiguration(serviceAPI: serviceAPIURL,
                             organizationId: "ORG_ID",
                             developerName: "API_NAME_OF_DEPLOYMENT",
                             conversationId: conversationID)

Step 3. Add the View to Your App

If you're using SwiftUI, add the Interface view to your view, using the UIConfiguration instance to initialize and display the chat feed.

struct ContentView: View {
    @State var config: UIConfiguration

    var body: some View {
        Interface(config)
    }
}

If you're using Swift or Objective-C, add the InterfaceViewController or the ModalInterfaceViewController view controller to your app, using the UIConfiguration instance to initialize the view controller. The ModalInterfaceViewController lets you present your chat to users modally.

let chatVC = InterfaceViewController(config)
self.present(chatVC, animated: true, completion: nil)

// Create a modalInterfaceViewController if you want to present your chat to the user modally
let chatVC = ModalInterfaceViewController(config)

//Set your presentation style
chatVC.modalPresentationStyle = .popover
 self.present(chatVC, animated: true, completion: nil)

note: Without any additional code, the UI SDK automatically provides your customers with Messaging features such as pre-chat forms, bot support, file attachments, and estimated wait time. To learn how to configure these features in your org, visit our Enhanced Chat learning map.

In your mobile app, make a call into the SDK with device token information during registration. To learn more, see Set Up Messaging Notifications for iOS.

Step 4. Customize the UI

note: This step is optional.

The UI SDK automatically brands the app with a default color scheme, provides icons for all UI elements, and uses default text for all UI labels. However, you can customize these elements with the UI SDK.

  • To customize the color scheme in your app, create color sets in your Assets catalog using the SDK's token names. To learn more, see Customize Colors for iOS.
  • To customize any UI text, create a localizable resource file in your app and override the string values. To learn more, see Customize Strings for iOS.
  • To customize the icons and images used throughout the SDK, add an asset to your project's Assets catalog using the associated keyword. To learn more, see Customize Icons for iOS.

Step 5. Enhance the Experience

note: This step is optional.

You can enhance your users' experience by adding push notifications, passing information to Salesforce about a verified user, sending hidden pre-chat fields, adjusting chat button visibility based on business hours, and more.

For enhanced features, see Enhance the Experience for iOS.

Sample App

For an example app, see the UI SDK example in GitHub.