Conversation Appearance Customization

Customize the appearance of the Conversation in your iOS app.

You can customize aspects of the appearance of the preview comments and Conversation, such as the theme, article settings, and comment sort order.



Dark mode theme

OpenWeb supports a dark mode theme with a default gray background color. To set the background color to match the parent app you can use the following API.

SpotIm.darkModeBackgroundColor = UIColor.PARENT_APP_DARK_THEME_BACKGROUND_COLOR

By default, the system theme will be set to the SDK. If your app supports overriding the system settings manually, you can use the following overrideUserInterfaceStyle API to set it manually to the SDK as well.

SpotIm.overrideUserInterfaceStyle = SPUserInterfaceStyle.dark


Show/Hide Article header

The displayArticleHeader setting allows you to determine if an article header is displayed. By default, an article header with the article thumbnail, title, and subtitle is presented above the full Conversation and commenting UI.

SpotIm.displayArticleHeader = true|false


Sort Order

Change initial sort type

You can change the conversation initial sort order of comments.

let sortOption = SpotImSortByOption.newest
SpotIm.setInitialSort(option: sortOption)
ArgumentDescription
option SpotImSortByOptionType of sort order

Possible values include the following:
   •SpotImSortByOption.best
   • SpotImSortByOption.newest
   • SpotImSortByOption.oldest

Customize the text for sorting options

// Method signature
setCustomSortByOptionText(option: SpotImSortByOption, text: String)

// SpotImSortByOption enum
enum SpotImSortByOption {
    case best
    case newest
    case oldest
}

// Example
SpotIm.setCustomSortByOptionText(option: .best, text: "CustomTitle")


Set article section name to display relevant comment labels

Please contact your PSM to learn more about comment labels and request setting remote configure related to comment sections and labels info.

When custom labels are set up in the config, call set section name in SpotImArticleMetadata with a custom section name to enable or overide the existing default section.

In the following scenarios, SpotImArticleMetadata should not be called:

  • If the default comment label section is set up in the config, comment labels will be enabled on all Conversations. There is no need to set the section name in SpotImArticleMetadata .
  • If the comment label config is not set up, setting the section name in SpotImArticleMetadata will have no effect.
let articleMetadata = SpotImArticleMetadata(url: "URL TO THE ARTICLE PAGE ON THE WEB", 
                                            title: "ARTICLE TITLE", 
                                            subtitle: "ARTICLE SUBTITLE", 
                                            thumbnailUrl: "URL TO ARTICLE THUMBNAIL IMAGE",                                                                 
                                            section: "SECTION NAME"
)

spotIMCoordinator?.preConversationController(
    withPostId: "POST ID",
    articleMetadata: articleMetadata,
    numberOfPreLoadedMessages: 2, // This is optional, Default = 2, Maximum = 15
    navigationController: navigationController,
    completion: { [weak self] preConversationVC in
    // add preConversationVC to your view controller
  }
)