--- schema_version: "1" id: e91d49977374fbb208abfb72da56363f40bf6eb4aaf7b5d0f6d4fe99aec3a94b title: Build a UI SDK App for iOS collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/service-cloud/messaging-in-app/guides/ios-ui-sdk.md canonical_url: https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-ui-sdk.html source_site: developer.salesforce.com content_type: documentation content_hash: 580ed6cd52d8ec5bf86ef241878797ca9fa56506c767c9e61b699c05618d01d1 products: - Enhanced In-App Chat - Service Cloud Developer Content --- # 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](https://help.salesforce.com/s/articleView?id=service.miaw_custom_prechat_2.htm). ### 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](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_mobile.htm) 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](https://help.salesforce.com/s/articleView?id=service.miaw_intro_landing.htm). 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](https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-notifications.md). ## 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](https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-colors.md). - 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](https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-strings.md). - 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](https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-icons.md). ## 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](https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-enhance.md). ## Sample App For an example app, see the [UI SDK example in GitHub](https://github.com/Salesforce-Async-Messaging/messaging-in-app-ios/tree/master/examples/MessagingUIExample).