Documentation
Go to openweb.com
Start typing to search…

Customizations

Configure the OpenWeb iOS SDK's appearance and behavior through the OWCustomizations protocol to align with your brand identity. Customize themes, fonts, navigation, and UI elements.

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
PropertyDescription
OWCommentActionsCustomizations OWThemeEnables granular comment actions customization. See: OWCommentActionsCustomizations

OWCommentActionsCustomizations

Defines the style and color comment actions

OWCommentActionsCustomizations(
    fontStyle:OWCommentActionsFontStyle,
    color: OWCommentActionsColor
)
PropertyDescription
fontStyle OWCommentActionsFontStyleStyling of the font. See: OWCommentActionsFontStyle
color OWCommentActionsColorColor the comment actions. See: OWCommentActionsColor


Customized Theme

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.customizedTheme = OWTheme
PropertyDescription
OWTheme OWThemeEnables 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
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)
)
PropertyDescription
primaryBackgroundColorBackground color of the entire Conversation
secondaryBackgroundColorBackground 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)
)
PropertyDescription
primaryBorderColorPrimary 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)
)
PropertyDescription
brandColorPrimary color of the brand used in the following instances: Comment call-to-action text (View 1 reply, 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)
)
PropertyDescription
loaderColorColor 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)
)
PropertyDescription
primarySeparatorColorColor of the main separators: Directly beneath the page title, Directly beneath the Conversation snippet, Between parent messages
secondarySeparatorColorColor of pipe separator between the numbers of total comments and total commenters
tertiarySeparatorColorColor of the separators surrounding the comments pane: Beneath Sort by filter, Beneath last visible comment, Midline dots between Reply link and 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)
)
PropertyDescription
skeletonColorPrimary color of the UI element visual placeholder that appears while the UI element is loading
skeletonShimmeringColorSecondary color used to cause the illusion of movement and shimmering. A gradient is applied with varying shades of neutral color such 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),
)
PropertyDescription
primaryTextColorColor of message text
secondaryTextColorColor of username and selected Sort by option
tertiaryTextColorColor 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


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)
)
PropertyDescription
voteDownSelectedColorColor of the vote down icon when selected
voteDownUnselectedColorColor of the vote down icon when not selected
voteUpSelectedColorColor of the vote up icon when selected
voteUpUnselectedColorColor of the vote up icon when not selected



Fonts

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.fontFamily = OWFontGroupFamily
SettingDescription
OWFontGroupFamily OWFontGroupFamilyDefines the UI font. See: OWFontGroupFamily



Navigation Bar Enforcement

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.navigationBarEnforcement = OWNavigationBarEnforcement
PropertyDescription
OWNavigationBarEnforcement OWNavigationBarEnforcementDefines 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)
SettingDescription
.use(sortOption: OWSortOption)Permits defining the initial sort order of the comments shown in the user interface
.useServerConfigUses 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)
ArgumentDescription
titleCustom name for the sort option. Example: "BEST!!!"
optionSort 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
    }
}
let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.statusBarEnforcement = OWStatusBarEnforcement
PropertyDescription
OWStatusBarEnforcement OWStatusBarEnforcementDefines the status bar appearance to enforce. See: OWStatusBarEnforcement



Theme Enforcement

let manager: OWManagerProtocol = OpenWeb.manager

let customizations: OWCustomizations = manager.ui.customizations

customizations.themeEnforcement = OWThemeStyleEnforcement
PropertyDescription
OWThemeStyleEnforcement OWThemeStyleEnforcementEnforces 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
SettingDescription
OWCustomizableElementCallback OWCustomizableElementCallbackCallback 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

OWCustomizableElement OWCustomizableElement

UI component to customize.
Possible Values:

  • .articleDescription
  • .commentCreationCTA
  • .commentingEnded
  • .communityGuidelines
  • .communityQuestion
  • .emptyState
  • .emptyStateCommentingEnded
  • .header
  • .loginPrompt
  • .navigation
  • .onlineUsers
  • .summary
  • .summaryHeader

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.
Ideal postId:

  • Aligns with URL slug or article ID
  • Less than 50 characters
  • Uses letters/numbers/dashes/hyphens
  • No 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)
PropertyDescription
.noneNo 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 9 days ago

Next Step