This document discusses how the Talkdesk SDK can be visually customized to fit the style of any iOS app.
Talkdesk SDK was developed with UI customization in mind and leverages the standard iOS way to customize appearance: UIAppearance. Besides Apple’s documentation we also encourage you to read NSHipster’s entry on UIAppearance.
This section focuses only on configuring appearance of components rendered by the SDK inside
InteractionViewController. Views that are not rendered inside the
InteractionViewController can only be handled by the host application - this can include
UIPageControl, or any other visual element that is wrapping or laid over the
The following sub-sections will describe how to customize the different visual elements that can be rendered by the SDK.
Please check the API documentation of each visual element for more information.
ProgressIndicatorHUD presents an activity indicator and is used by the SDK when processing or communicating with Talkdesk. It looks like this:
As you can see there are two different components:
Both these elements can be customized to use your app’s colors. The title font can also be customized. The following element shows the elements:
Please check the UILabel documentation to know which properties can be customized.
ProgressIndicator the following properties can be customized:
lineWidth- the width of the circle’s line
strokeColor- the color used for the activity segment
Below you can find a snippet demonstrating how to customize the views:
// Progress Indicator let progressIndicatorAppearanceProxy = ProgressIndicator.appearance( whenContainedInInstancesOf: [ProgressIndicatorHUD.self] ) progressIndicatorAppearanceProxy.lineWidth = 20 progressIndicatorAppearanceProxy.strokeColor = .blue // Title Label let titleLabelProxy = UILabel.appearance( whenContainedInInstancesOf: ([ProgressIndicatorHUD.self] ) titleLabelProxy.titleColor = .blue titleLabelProxy.titleFont = .monospacedDigitSystemFontOfSize( 24.0, weight: UIFontWeightBold )
Here is how it might look like:
As of version 0.4 of the SDK there is a single View Controller to render the visual content sent by Talkdesk:
VisualViewController. This View Controller can be used to compose visual elements into different types of screens.
The following image shows all the supported visual element types:
All of the visual elements are compliant with
Here you can find the list of supported elements linking to the proper documentation page where you can find information regarding the customizable properties:
As an example, if you wanted to make the title text color blue for a
TextVisualItemTableViewCell you would do the following:
TextVisualItemTableViewCell.appearance().setTextColor(.blue, forSubtype: .title)
If you click on the country flag in the
VisualViewController you can have the country prefix code automatically added to the number. The following screen cast shows this interaction:
As you can see the
CountryPickerViewController is presented inside a
UINavigationController on the
VisualViewController. If you’re already using
UIAppearance proxy on your application this is picked automatically. In case you are not using and want to customize the colors of the title and the button check the snippet below:
let titleDict: [String: AnyObject] = [NSForegroundColorAttributeName: UIColor.blue] let navBarProxy = UINavigationBar.appearance(whenContainedInInstancesOf: [UINavigationController.self]) navBarProxy.titleTextAttributes = titleDict let uiButtonProxy = UIButton.appearance(whenContainedInInstancesOf: [UINavigationController.self]) uiButtonProxy.tintColor = .blue
Please note that all instances of the
UIButton in your application will be affected with the above code. To limit the appearance customization to a smaller scope, you can pass a more specific list of containers to
whenContainedInInstancesOf:, similar to what you would do in a language such as CSS.
The final effect is something like the following: