UI Customization

Customize Conversation UI components in your iOS app

The SpotImCustomUIDelegate allows you to customize UI components, such as the login prompt, Conversation footer, and navigation title.

2088 2241

SpotImCustomUIDelegate Reference

#ComponentCustomizableView
1Login promptloginPrompt(textView: UITextView)
3Say control in the Conversation (shown) or Pre-Conversation (not shown)sayControl(labelContainer: BaseView, label: BaseLabel)
4Community questioncommunityQuestion(textView: UITextView)
5Footerfooter(view: UIView)
6Navigation titlenavigationItemTitle(label: UILabel)

NOTE: set SpotIm.enableCustomNavigationItemTitle = true
7Community guidelinescommunityGuidelines(textView: UITextView)
8Create Comment action buttoncommentCreationActionButton(button: BaseButton)
9Read-only labelreadOnlyLabel(label: UILabel)
10Empty state read-only labelemptyStateReadOnlyLabel(label: UILabel)
11Headerheader(titleLabel: UILabel, counterLabel: UILabel)


Customize UI components

Use the following steps to customize UI components:

  1. Implement the SpotImCustomUIDelegate protocol.
extension ArticleViewController: SpotImCustomUIDelegate {
  func customizeView(view: CustomizableView, isDarkMode: Bool, source: SPViewSourceType?, postId: String) {
      switch view {
      case .loginPrompt(let textView):
          // set your own customization
          break
      // set more customizations to another CustomizableView
      default:
          break
      }
  }
}

  1. In SpotIm.createSpotImFlowCoordinator, set the SpotImCustomUIDelegate to the coordinator.
SpotIm.createSpotImFlowCoordinator(loginDelegate: self) { result in
  switch result {
  case .success(let coordinator):
      self.spotIMCoordinator = coordinator
      coordinator.setCustomUIDelegate(delegate: self) // set the delegate
  }
}