Appearance Customization

This document discusses how the Talkdesk SDK can be visually customized to fit the style of any iOS app.

Overview

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 UINavigationBar, UIPageControl, or any other visual element that is wrapping or laid over the InteractionViewController.

Visual elements

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.

Progress Indicator

The ProgressIndicatorHUD presents an activity indicator and is used by the SDK when processing or communicating with Talkdesk. It looks like this:

Progress Indicator Screen

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:

Progress Screen elements

Please check the UILabel documentation to know which properties can be customized.

On the 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:

Customized Progress Screen

VisualViewController

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:

Visual Items

All of the visual elements are compliant with UIAppearanceProxy.

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)

Country Picker

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:

Country Picker 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 UINavigationBar and 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:

Country Picker customized