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.
1import SMIClientCore // For the core classes
2import SMIClientUI // For the UI-related classesStep 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.
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.
Tip
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.
Note
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.
1// Get the path for the config file
2guard let configPath = Bundle.main.path(forResource: "configFile",
3 ofType: "json") else {
4 // TO DO: Handle error
5 return
6}
7
8// Get a URL for the config file
9let configURL = URL(fileURLWithPath: configPath)
10
11// Generate a random conversation ID
12// (But be sure to use the SAME conversation ID if you want
13// to continue this conversation across app restarts or
14// across devices!)
15let conversationID = UUID()
16
17// Create a configuration object
18let config = UIConfiguration(url: configURL, conversationId: conversationID)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:
1{
2 "OrganizationId": "00ZZZ0000000Zzz",
3 "DeveloperName": "MyMessagingForInAppDeployment",
4 "Url": "https://zzzz.my.api.url.salesforce-scrt.com"
5}Note
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.
1// Get a URL for the service API path
2guard let serviceAPIURL = URL(string: "URL_TO_MY_SERVICE_API") else {
3 // TO DO: Handle error
4 return
5}
6
7// Generate a random conversation ID
8// (But be sure to use the SAME conversation ID if you want
9// to continue this conversation across app restarts or
10// across devices!)
11let conversationID = UUID()
12
13// Create a configuration object
14let config = UIConfiguration(serviceAPI: serviceAPIURL,
15 organizationId: "ORG_ID",
16 developerName: "API_NAME_OF_DEPLOYMENT",
17 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.
1struct ContentView: View {
2 @State var config: UIConfiguration
3
4 var body: some View {
5 Interface(config)
6 }
7}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.
1let chatVC = InterfaceViewController(config)
2self.present(chatVC, animated: true, completion: nil)1// Create a modalInterfaceViewController if you want to present your chat to the user modally
2let chatVC = ModalInterfaceViewController(config)
3
4//Set your presentation style
5chatVC.modalPresentationStyle = .popover
6 self.present(chatVC, animated: true, completion: nil)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.
Note
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
This step is optional.
Note
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
This step is optional.
Note
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.
j