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
Adapt your app's appearance through the theme settings of the OWTheme
Tailor UI elements, such as headers and navigation, through the OWCustomizableElementCallback callback

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

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

Customization Settings

Comment Actions

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.commentActions = OWCommentActionsCustomizations

Property	Description
OWCommentActionsCustomizations OWTheme	Enables granular comment actions customization See: `OWCommentActionsCustomizations`

OWCommentActionsCustomizations

Defines the style and color comment actions

OWCommentActionsCustomizations(
    fontStyle:OWCommentActionsFontStyle,
    color: OWCommentActionsColor
)

Property	Description
fontStyle OWCommentActionsFontStyle	Styling of the font See: `OWCommentActionsFontStyle`
color OWCommentActionsColor	Color the comment actions See: `OWCommentActionsColor`

Customized Theme

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.customizedTheme = OWTheme

Property	Description
OWTheme OWTheme	Enables granular theme customization See: `OWTheme`

OWTheme

Defines the color to use for UI items in light (lightColor) and dark (darkColor) modes

⚠️
When customizing an OWTheme property, both lightColor and darkColor must be defined.

OWTheme(
    skeletonColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    skeletonShimmeringColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    primarySeparatorColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    secondarySeparatorColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    tertiarySeparatorColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    primaryTextColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    secondaryTextColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    tertiaryTextColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    primaryBackgroundColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    secondaryBackgroundColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    primaryBorderColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    loaderColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    brandColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteUpUnselectedColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteDownUnselectedColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteUpSelectedColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteDownSelectedColor: OWColor(lightColor: UIColor, darkColor: UIColor)
)

Background Color

OWTheme(
    primaryBackgroundColor: OWColor(lightColor: .white, darkColor: .black),
    secondaryBackgroundColor: OWColor(lightColor: .yellow, darkColor: .blue)
)

Property	Description
primaryBackgroundColor	Background color of the entire Conversation
secondaryBackgroundColor	Background color of secondary items Menus Comment entry text field

Borders

Light and dark theme border customizations

OWTheme(
    primaryBorderColor: OWColor(lightColor: .red, darkColor: .yellow)
)

Property	Description
primaryBorderColor	Primary border color of the following UI elements: Comment entry field Menus

Brand

Light and dark theme brand color customization

OWTheme(
    brandColor: OWColor(lightColor: .green, darkColor: .yellow)
)

Property	Description
brandColor	Primary color of the brand used in the following instances: Comment call-to-action text, such as View 1 reply and Collapse thread Button background color

Loaders

Light and dark theme loader color customization

OWTheme(
    loaderColor: OWColor(lightColor: .red, darkColor: .yellow)
)

Property	Description
loaderColor	Color of the loading icon

Separators

Light and dark theme separator customizations

OWTheme(
    primarySeparatorColor: OWColor(lightColor: .blue, darkColor: .green),
    secondarySeparatorColor: OWColor(lightColor: .red, darkColor: .purple),
    tertiarySeparatorColor: OWColor(lightColor: .yellow, darkColor: .teal)
)

Property	Description
primarySeparatorColor	Color of the main separators: Directly beneath the page title Directly beneath the Converation snippet (NOTE: The color is a slightly lighter alpha.) Between parent messages
secondarySeparatorColor	Color of pipe separator between the numbers of total comments and total commenters
tertiarySeparatorColor	Color of the separators surrounding the comments pane: Directy beneath the Sort by filter and above the first visible message Directly beneath the last visible comment and above the comment entry text field Midline dots between the Reply link, Like/Dislike icons, and the Share link

Skeleton Color

Light and dark theme skeleton customizations

OWTheme(
    skeletonColor: OWColor(lightColor: .red, darkColor: .yellow),
    skeletonShimmeringColor: OWColor(lightColor: .green, darkColor: .teal)
)

Property	Description
skeletonColor	Primary color of the UI element visual placeholder that appears while the UI element is loading
skeletonShimmeringColor	Secondary color used to cause the illusion of movement and shimmering Unlike the examples above, a gradient is applying to the color used for the `skeletonColor` with varying shades of a neutral color auch as gray.

Text Color

Light and dark theme text customizations

OWTheme(
    primaryTextColor: OWColor(lightColor: .black, darkColor: .white),
    secondaryTextColor: OWColor(lightColor: .red, darkColor: .blue),
    tertiaryTextColor: OWColor(lightColor: .yellow, darkColor: .teal),
)

Property	Description
primaryTextColor	Color of message text
secondaryTextColor	Color of username and selected Sort by option
tertiaryTextColor	Color of other text items: Article text Comment date Icons (Like, Dislike) Number of comments Reply link Share link Sort by label Text field placeholder text Username of original commenter shown above a user response

Voting Arrows

OWTheme(
    voteUpUnselectedColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteDownUnselectedColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteUpSelectedColor: OWColor(lightColor: UIColor, darkColor: UIColor),
    voteDownSelectedColor: OWColor(lightColor: UIColor, darkColor: UIColor)
)

Property	Description
voteDownSelectedColor	Color of the vote down icon when selected
voteDownUnselectedColor	Color of the vote down icon when not selected
voteUpSelectedColor	Color of the vote up icon when selected
voteUpUnselectedColor	Color of the vote up icon when not selected

Fonts

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.fontFamily = OWFontGroupFamily

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

Navigation Bar Enforcement

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.navigationBarEnforcement = OWNavigationBarEnforcement

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

Sorting

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

let manager: OWManagerProtocol = OpenWeb.manager

let 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

Status Bar Enforcement

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
    }
}
```

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.statusBarEnforcement = OWStatusBarEnforcement

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

Theme Enforcement

let manager: OWManagerProtocol = OpenWeb.manager

let 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.

let manager: OWManagerProtocol = OpenWeb.manager

let 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

OWCommentActionsColor

Setting	Description
OWCommentActionsFontStyle OWCommentActionsFontStyle	Options for the color Possible Values: `.default` `.brandColor`

OWCommentActionsFontStyle

Setting	Description
OWCommentActionsFontStyle OWCommentActionsFontStyle	Options for font style Possible Values: `.default` `.semiBold`

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)` `.loginPrompt(element: OWLoginPromptCustomizableElement)` `.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)
.loginPrompt(element: OWLoginPromptCustomizableElement)
.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)`

OWLoginPromptCustomizableElement

Setting	Description
OWLoginPromptCustomizableElement OWNavigationCustomizableElement	Options for customizing the login prompt Possible Values: `.arrowIcon(imageView: UIImageView)` `.lockIcon(imageView: UIImageView)` `.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

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`