Go to openweb.com

Customizations

Suggest Edits

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

Customized Theme

var manager: OWManagerProtocol = OpenWeb.manager

var 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)
)



Background Color
Light and dark theme background color customizations

Light and dark theme background color customizations

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

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

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

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

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

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

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




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




Navigation Bar Enforcement

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




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




Status Bar Enforcement

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

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

info.plist settings

  1. 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 Enforcement

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
OWCustomizableElement OWCustomizableElement UI component to customize

Possible Values:

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:

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

Updated 3 days ago

Next Step