Customizations

With the OpenWeb SDK's OWCustomizations protocol, you can craft a unique, unified appearance that aligns with your brand's identity.

Through OWCustomizations, you can achieve the following:

Modify the sort settings of comments through the OWSortingCustomizations protocol or aligning sort option names with specific branding terminology

Tailor UI elements, such as headers and navigation, through the OWCustomizableElementCallback callback

public protocol OWCustomizations {
    var fontFamily: OWFontGroupFamily { get set }
    var sorting: OWSortingCustomizations { get }
    var themeEnforcement: OWThemeStyleEnforcement { get set }
    var statusBarEnforcement: OWStatusBarEnforcement { get set }
    var navigationBarEnforcement: OWNavigationBarEnforcement { get set }
    func addElementCallback(_ callback: @escaping OWCustomizableElementCallback)
}

The following sections explain how to configure and define these settings.

Fonts

var manager: OWManagerProtocol = OpenWeb.manager

var customizations: OWCustomizations = manager.ui.customizations

customizations.fontFamily = OWFontGroupFamily

Setting	Description
OWFontGroupFamily OWFontGroupFamily	Defines the UI font See: `OWFontGroupFamily`

Sorting

The OWSortingCustomizations protocol defines the sort settings for the comments within the user interface.

var manager: OWManagerProtocol = OpenWeb.manager

var customizations: OWCustomizations = manager.ui.customizations

let sorting: OWSortingCustomizations = customizations.sorting
sorting.setTitle("BEST!!!" , forOption: .best)
sorting.initialOption = .use(sortOption:.newest)

initialOption

Defines the initial sorting of comments

sorting.initialOption = .use(sortOption: OWSortOption)

Setting	Description
.use(sortOption: OWSortOption)	Permits defining the initial sort order of the comments shown in the user interface
.useServerConfig	Uses the sort order defined in the Admin Panel

setTitle()

Assigns a custom name to an available sorting option

This method enables you to align sort option names with your branding or specific regional wording.

setTitle(_ title: String , forOption option: OWSortOption)

Argument	Description
title	Custom name for the sort option Example: "BEST!!!"
option	Sort order option to which the custom name is applied

Theme Enforcement

The SDK enables you to enforce themes for several UI elements. Each is listed in this section.

Navigation Bar

var manager: OWManagerProtocol = OpenWeb.manager

var customizations: OWCustomizations = manager.ui.customizations

customizations.navigationBarEnforcement = OWNavigationBarEnforcement

Property	Description
OWNavigationBarEnforcement OWNavigationBarEnforcement	Defines the navigation bar appearance to enforce See: `OWNavigationBarEnforcement`

Status Bar

When customizing the status bar style, the following steps must be completed prior to theme enforcement:

In the info.plist file, set View controller-based status bar appearance to YES.

To support status bar style customization when presentionalMode: .push(navigationController: UINavigationController) is set in a flows approach, subclass UINavigationController and incorporate the following code.
```
class HostApplicationNavigationController: UINavigationController {
    override var preferredStatusBarStyle: UIStatusBarStyle {
        return topViewController?.preferredStatusBarStyle ?? .default
    }
}
```

var manager: OWManagerProtocol = OpenWeb.manager

var customizations: OWCustomizations = manager.ui.customizations

customizations.statusBarEnforcement = OWStatusBarEnforcement

Property	Description
OWStatusBarEnforcement OWStatusBarEnforcement	Defines the status bar appearance to enforce See: `OWStatusBarEnforcement`

Theme

var manager: OWManagerProtocol = OpenWeb.manager

var customizations: OWCustomizations = manager.ui.customizations

customizations.themeEnforcement = OWThemeStyleEnforcement

Property	Description
OWThemeStyleEnforcement OWThemeStyleEnforcement	Enforces either dark or light mode for the entire SDK, regardless of the device's active theme mode See: `OWThemeStyleEnforcement`

UI Customization

The SDK allows you to customize UI elements.

var manager: OWManagerProtocol = OpenWeb.manager

var customizations: OWCustomizations = manager.ui.customizations

let customizableClosure: OWCustomizableElementCallback = { element, source, style, postId in
    switch element {
      case .communityQuestion(let textView):
        // Do your customizations to the text view
      case .default:
        break
    }
} 
customizations.addElementCallback(customizableClosure) // Allow multiple callbacks

Setting	Description
OWCustomizableElementCallback OWCustomizableElementCallback	Callback for defining a user interface component to customize See: OWCustomizableElementCallback

Enumerations

OWCustomizableElement

Setting Description

Setting	Description
OWCustomizableElement OWCustomizableElement	UI component to customize Possible Values: `.articleDescription(element: OWArticleDescriptionCustomizableElement)` `.commentCreationCTA(element: OWCommentCreationCTACustomizableElement)` `.commentingEnded(element: OWCommentingEndedCustomizableElement)` `.communityGuidelines(element: OWCommunityGuidelinesCustomizableElement)` `.communityQuestion(element: OWCommunityQuestionCustomizableElement)` `.emptyState(element: OWEmptyStateCustomizableElement)` `.emptyStateCommentingEnded(element: OWEmptyStateCommentingEndedCustomizableElement)` `.header(element: OWHeaderCustomizableElement)` `.navigation(element: OWNavigationCustomizableElement)` `.onlineUsers(element: OWOnlineUsersCustomizableElement)` `.summary(element: OWSummaryCustomizableElement)` `.summaryHeader(element: OWSummaryHeaderCustomizableElement)`

OWCustomizableElement OWCustomizableElement

UI component to customize

Possible Values:

.articleDescription(element: OWArticleDescriptionCustomizableElement)
.commentCreationCTA(element: OWCommentCreationCTACustomizableElement)
.commentingEnded(element: OWCommentingEndedCustomizableElement)
.communityGuidelines(element: OWCommunityGuidelinesCustomizableElement)
.communityQuestion(element: OWCommunityQuestionCustomizableElement)
.emptyState(element: OWEmptyStateCustomizableElement)
.emptyStateCommentingEnded(element: OWEmptyStateCommentingEndedCustomizableElement)
.header(element: OWHeaderCustomizableElement)
.navigation(element: OWNavigationCustomizableElement)
.onlineUsers(element: OWOnlineUsersCustomizableElement)
.summary(element: OWSummaryCustomizableElement)
.summaryHeader(element: OWSummaryHeaderCustomizableElement)

OWArticleDescriptionCustomizableElement

Setting	Description
OWArticleDescriptionCustomizableElement OWHeaderCustomizableElement	Options for customization Possible Values: `.author(label: UILabel)` `.image(imageView: UIImageView)` `.title(label: UILabel)`

OWCommentCreationCTACustomizableElement

Setting	Description
OWCommentCreationCTACustomizableElement OWCommentCreationCTACustomizableElement	Options for customization Possible Values: `.container(view: UIView)` `.placeholder(label: UILabel)`

OWCommentingEndedCustomizableElement

Setting	Description
OWCommentingEndedCustomizableElement OWCommentingEndedCustomizableElement	Options for customization Possible Values: `.icon(image: UIImageView)` `.title(label: UILabel)`

OWCommunityGuidelinesCustomizableElement

Setting	Description
OWCommunityGuidelinesCustomizableElement OWCommunityGuidelinesCustomizableElement	Options for customization Possible Values: `.compact(containerView: UIView, icon: UIImageView, textView: UITextView)` `.regular(textView: UITextView)`

OWCommunityQuestionCustomizableElement

Setting	Description
OWCommunityQuestionCustomizableElement OWCommunityQuestionCustomizableElement	Options for customization Possible Values: `.compact(containerView: UIView, label: UILabel)` `.regular(textView: UITextView)`

OWEmptyStateCommentingEndedCustomizableElement

Setting	Description
OWEmptyStateCommentingEndedCustomizableElement OWEmptyStateCommentingEndedCustomizableElement	Options for customization Possible Values: `.icon(image: UIImageView)` `.title(label: UILabel)`

OWEmptyStateCustomizableElement

Setting	Description
OWEmptyStateCustomizableElement OWEmptyStateCustomizableElement	Options for customization Possible Values: `.icon(image: UIImageView)` `.title(label: UILabel)`

OWHeaderCustomizableElement

Setting	Description
OWHeaderCustomizableElement OWHeaderCustomizableElement	Options for customization Possible Values: `.close(button: UIButton)` `.title(label: UILabel)`

OWNavigationCustomizableElement

Setting	Description
OWNavigationCustomizableElement OWNavigationCustomizableElement	Options for customization Possible Values: `.navigationBar(_ navigationBar: UINavigationBar)` `.navigationItem(_ navigationItem: UINavigationItem)`

OWOnlineUsersCustomizableElement

Setting	Description
OWOnlineUsersCustomizableElement OWSummaryHeaderCustomizableElement	Options for customization Possible Values: `.counter(label: UILabel)` `.icon(image: UIImageView)`

OWSummaryCustomizableElement

Setting	Description
OWSummaryCustomizableElement OWSummaryCustomizableElement	Options for customization Possible Values: `.commentsTitle(label: UILabel)` `.sortByTitle(label: UILabel)`

OWSummaryHeaderCustomizableElement

Setting	Description
OWSummaryHeaderCustomizableElement OWSummaryHeaderCustomizableElement	Options for customization Possible Values: `.counter(label: UILabel)` `.title(label: UILabel)`

OWCustomizableElementCallback

typealias OWCustomizableElementCallback = (
  element: OWCustomizableElement, 
  sourceType: OWViewSourceType, 
  style: OWThemeStyle, 
  postId: String?
) -> Void

customizations.addElementCallback(customizableClosure)

Argument	Description
element OWCustomizableElement	User interface component to customize See: OWCustomizableElement
postId string	Unique article identifier that is specific to the article page The ideal `postId` has the following characteristics: Aligns with the URL slug (`an-article-title`) or article ID (`14325`) Is less than 50 characters, ideally 15 characters Uses a combination of letters, number, dashes (-), or hyphens (_) Except for the regex `[^\w\s\-\:\.\$\~]`, does not include special characters
sourceType OWViewSourceType	Location of the user interface element See: OWViewSourceType
style OWThemeStyle	Theme to apply to the element See: OWThemeStyle

OWFontGroupFamily

Setting	Description
OWFontGroupFamily OWFontGroupFamily	Options to set the UI font Possible Values: `.default` `.custom(fontFamily: String)`

OWNavigationBarEnforcement

Setting	Description
OWNavigationBarEnforcement OWNavigationBarEnforcement	Style of navigation bar to enforce Possible Values: `.keepOriginal` `.style(_ style: OWNavigationBarStyle)`

OWNavigationBarStyle

Setting	Description
OWNavigationBarStyle OWNavigationBarStyle	Navigation bar style options Possible Values: `.regular` (Default) `.largeTitles`

OWSortOption

Setting	Description
OWSortOption string	Options for sorting comments Possible Values: `.best` `.newest` `.oldest`

OWStatusBarEnforcement

Setting	Description
OWStatusBarEnforcement OWStatusBarEnforcement	Style of status bar to enforce Possible Values: `.matchTheme` `.style(_ style: UIStatusBarStyle)`

OWThemeStyle

Setting	Description
OWThemeStyle string	Options for theme styles Possible Values: `.light` (default) `.dark`

OWThemeStyleEnforcement

customizations.themeEnforcement = .theme(_ theme: OWThemeStyle)

Property	Description
.none	No theme style is enforced
.theme(_ theme: OWThemeStyle)	Sets the theme style that is enforced See: `OWThemeStyle`

OWViewSourceType

Setting	Description
OWViewSourceType string	Options for a user interface location when customizing UI elements Possible Values: `.preConversation` `.conversation` `.commentCreation` `.commentThread` `.reportReason`