Customizable views on iOS
Customize the UI components in your app
Every Viafoura widget hands its individual subviews to your app before it draws them, so
you can restyle or hide any element listed here. This page is the complete list for iOS,
generated from VFCustomizableView
Set the delegate on any widget's view controller, then switch on the case you care about.
The callback also receives the current VFTheme, so you can style light and dark mode
differently.
viewController.setCustomUIDelegate(customUIDelegate: self)
func customizeView(theme: VFTheme, view: VFCustomizableView) {
switch view {
case .commentCellNameLabel(let label):
label.font = .preferredFont(forTextStyle: .headline)
case .previewPoweredByView(let poweredByView):
poweredByView.isHidden = true
default:
break
}
}Comments preview (Live Comments)
The comments widget embedded on an article — header, write prompt, comment list and footer.
| Case | Description |
|---|---|
previewEmptyCommentsView(emptyCommentsView: VFEmptyCommentsView) | Empty state shown when the conversation has no comments yet. |
previewSeeMoreCommentsButton(button: VFButton) | Button at the bottom that opens the full conversation. |
previewCommentsBottomSeparator(separator: VFSeparatorView) | Separator under the last comment cell. |
previewTitleLabel(label: VFLabel) | Widget title above the comment list. |
previewPrivacyLabel(label: VFLabel) | Privacy and terms line under the composer prompt. |
previewUserPromptLabel(label: VFLabel) | Invitation text shown to logged-out readers. |
previewLoginLabel(label: VFLabel) | "Log in" link in the logged-out invitation. |
previewAuthOrLabel(label: VFLabel) | Separator word between the log in and sign up links. |
previewSignupLabel(label: VFLabel) | "Sign up" link in the logged-out invitation. |
previewUserImage(image: VFImageView) | Signed-in reader's avatar photo in the write prompt. |
previewUserAvatar(avatar: VFUserAvatarView) | Initials avatar used in the write prompt when the reader has no photo. |
previewUserSomeoneWritingLabel(label: VFLabel) | "Someone is writing" typing indicator. |
previewNewCommentsNotificationView(view: VFNewCommentsNotificationView) | Pill announcing comments that arrived in realtime. |
previewCommentPrompt(view: UIView) | Tappable write-a-comment prompt card. |
previewNotificationBellView(view: UIView) | Notification bell in the header. |
previewHeaderView(view: UIView) | Header row holding the title, sort control and bell. |
previewSortImage(image: VFImageView) | Icon of the sort control. |
previewSortLabel(label: VFLabel) | Current sort name on the sort control. |
previewAllComments(view: UIView) | Container holding all rendered comment cells. |
previewPoweredByView(poweredByView: VFPoweredByViafouraView) | "Powered by Viafoura" badge. |
previewSkeletonView(skeletonView: UIView) | Loading skeleton shown before the comments arrive. |
previewFollowView(followView: VFFollowView) | Follow-conversation control in the header. |
previewBackgroundView(view: UIView) | Root background of the comments preview widget. |
Comment cell
One comment row, used by the comments preview and the full conversation.
| Case | Description |
|---|---|
commentCellExpandRepliesLoading(loadingView: VFLoadingView) | Spinner shown while replies load. |
commentCellExpandRepliesImage(image: VFImageView) | Chevron next to the show-replies label. |
commentCellExpandRepliesLabel(label: VFLabel) | "Show replies" label under a comment. |
commentCellDateLabel(label: VFLabel) | Relative timestamp of the comment. |
commentCellNameLabel(label: VFLabel) | Author display name. |
commentCellContentLabel(label: VFLabel) | The comment body text. |
commentCellOptionsButton(button: VFButton) | Overflow control that opens the comment options sheet. |
commentCellLikeImage(image: VFImageView) | Like icon. |
commentCellLikeLabel(label: VFLabel) | Like count. |
commentCellDislikeImage(image: VFImageView) | Dislike icon. |
commentCellTrustedView(view: VFTrustedView) | "Trusted" badge. |
commentCellModeratorView(view: VFModeratorView) | "Moderator" badge. |
commentCellAuthorView(view: VFAuthorView) | "Author" badge for the article's author. |
commentCellFollowView(view: UIView) | Follow-author control inside the cell. |
commentCellDislikeLabel(label: VFLabel) | Dislike count. |
commentCellReplyLabel(label: VFLabel) | Reply action label. |
commentCellReplyImage(image: VFImageView) | Reply icon. |
commentCellUserImage(image: VFImageView) | Comment author's avatar photo. |
commentCellUserAvatar(view: UIView) | Initials avatar used when the author has no photo. |
commentCellUserIndicator(image: VFImageView) | Small badge image overlaid on the author avatar. |
commentCellAwaitingModerationView(view: VFAwaitingModerationView) | Banner shown while the comment awaits moderation. |
commentCellCustomBadge(badge: VFCustomBadgeView) | Custom badge configured for the user. |
commentCellPinnedView(view: VFPinnedView) | "Pinned" marker. |
commentCellEditorPickView(view: VFEditorPicksView) | "Editor's pick" marker. |
commentCellUrlPreviewContainer(view: UIView) | Link preview card attached to the comment. |
commentCellUrlPreviewTitleLabel(label: VFLabel) | Title inside the link preview card. |
commentCellUrlPreviewDescriptionLabel(label: VFLabel) | Description inside the link preview card. |
commentCellUrlPreviewSiteNameLabel(label: VFLabel) | Site name inside the link preview card. |
commentCellSeparator(separator: VFSeparatorView) | Divider between comment cells. |
writeReplyUserImage(image: VFImageView) | Reader's avatar photo in the inline reply row under a comment. |
writeReplyUserAvatar(view: VFUserAvatarView) | Initials avatar in the inline reply row under a comment. |
Comment composer
The new comment, reply and edit screen.
| Case | Description |
|---|---|
postButton(button: VFButton) | Submit button that posts the comment. |
postTextView(textField: VFTextView) | The comment text input. |
postCloseImage(image: VFImageView) | Close control of the composer. |
postUserImage(image: VFImageView) | Reader's avatar photo in the composer. |
postUserAvatar(avatar: VFUserAvatarView) | Initials avatar in the composer when the reader has no photo. |
postMetadataTitle(label: VFLabel) | Article title in the composer's metadata card. |
postMetadataImage(image: VFImageView) | Article thumbnail in the composer's metadata card. |
postReplyToUserImage(image: VFImageView) | Avatar photo of the user being replied to. |
postReplyToUserAvatar(avatar: VFUserAvatarView) | Initials avatar of the user being replied to. |
postMetadataDescription(label: VFLabel) | Article description in the composer's metadata card. |
postHeaderDescription(label: VFLabel) | Header line describing the action (comment, reply or edit). |
postPlaceholderLabel(label: VFLabel) | Placeholder text shown inside the empty input. |
postImageSkeletonView(skeletonView: VFSkeletonView) | Skeleton for the thumbnail while the metadata card loads. |
postTitleSkeletonView(skeletonView: VFSkeletonView) | Skeleton for the title while the metadata card loads. |
postDescriptionSkeletonView(skeletonView: VFSkeletonView) | Skeleton for the description while the metadata card loads. |
postBackgroundView(view: UIView) | Root background of the composer screen. |
Profile
The reader's own profile and other readers' profiles.
| Case | Description |
|---|---|
profileNameLabel(label: VFLabel) | Profile display name. |
profileLogoutLabel(label: VFLabel) | Log out action. |
profileCloseImage(image: VFImageView) | Close control of the profile screen. |
profileNotificationSettingsImage(image: VFImageView) | Notification settings icon in the profile header. |
profileLikesLabel(label: VFLabel) | Likes counter. |
profileFollowersLabel(label: VFLabel) | Followers counter. |
profileActivityLabel(label: VFLabel) | Activity counter. |
profileCommentsLabel(label: VFLabel) | Comments counter. |
profileUserImage(image: VFImageView) | Profile avatar photo. |
profileUserAvatar(avatar: VFUserAvatarView) | Initials avatar when the user has no photo. |
profileSegmentedControl(segmentedControl: VFSegmentedControl) | Segmented control that switches between profile tabs. |
profileCommunityTabView(tabView: VFTabView) | Community tab container. |
profileFollowView(view: VFFollowView) | Follow control on another reader's profile. |
profileMuteView(view: VFMuteView) | Mute control on another reader's profile. |
profileBackgroundView(view: UIView) | Root background of the profile screen. |
Activity feed and user lists
Rows inside the profile's feed tab and the followers/following lists.
| Case | Description |
|---|---|
userCommentDescLabel(label: VFLabel) | Line describing the activity in a profile feed row. |
userCommentOriginalImage(image: VFImageView) | Thumbnail of the article the feed row's comment belongs to. |
userCommentOriginalTitle(label: VFLabel) | Title of the article the feed row's comment belongs to. |
userCommentContentLabel(label: VFLabel) | The comment text in a profile feed row. |
userCommentSeparator(separator: VFSeparatorView) | Divider between profile feed rows. |
userCommentDateLabel(label: VFLabel) | Timestamp of a profile feed row. |
userCellImage(image: VFImageView) | Avatar photo in a followers or following row. |
userCellAvatarView(view: VFUserAvatarView) | Initials avatar in a followers or following row. |
userCellNameLabel(label: VFLabel) | Display name in a user list row. |
userCellActionDateLabel(label: VFLabel) | Action and date line in a user list row. |
userCellBadgeLabel(label: VFLabel) | Badge text in a user list row. |
userCellBadgeView(view: UIView) | Badge container in a user list row. |
userCellSeparator(separator: VFSeparatorView) | Divider between user list rows. |
userCellFollowView(view: VFFollowView) | Follow control in a user list row. |
userCellMuteView(view: VFMuteView) | Mute control in a user list row. |
Engagement Starter
The engagement starter widget.
| Case | Description |
|---|---|
conversationStarterBackgroundView(view: UIView) | Root background of the engagement starter. |
conversationStarterHeaderLabel(label: VFLabel) | Small header line above the title. |
conversationStarterTitleLabel(label: VFLabel) | Title of the default variant. |
conversationStarterDescriptionLabel(label: VFLabel) | Description of the default variant. |
conversationStarterFeaturedCommentLabel(label: VFLabel) | Text of the featured comment in the editor's pick variant. |
conversationStarterActionButton(button: VFButton) | Call-to-action button. |
Live Chat
The live chat widget and its message rows.
| Case | Description |
|---|---|
chatCellDateLabel(label: VFLabel) | Message timestamp. |
chatCellUserNameLabel(label: VFLabel) | Message author name. |
chatPostView(view: UIView) | Send control next to the message input. |
chatPostImage(image: VFImageView) | Send icon. |
chatPostLoading(loadingView: VFLoadingView) | Spinner shown while a message is sending. |
chatTextView(textView: VFTextView) | Message input. |
chatBackgroundView(backgroundView: UIView) | Root background of the live chat widget. |
chatLoading(loadingView: VFLoadingView) | Spinner for the initial message load. |
chatLoadingMore(loadingView: VFLoadingView) | Spinner shown when paging older messages. |
Live Questions
The live questions widget, its question rows, composer and hosts list.
| Case | Description |
|---|---|
liveQuestionCellUserAvatar(avatar: VFUserAvatarView) | Initials avatar of the question's author. |
liveQuestionCellUserImage(image: UIImageView) | Avatar photo of the question's author. |
liveQuestionCellUserNameLabel(label: VFLabel) | Question author's display name. |
liveQuestionCellDateLabel(label: VFLabel) | Question timestamp. |
liveQuestionCellContentLabel(label: VFLabel) | Question text. |
liveQuestionCellLikeButton(button: UIButton) | Like control on a question. |
liveQuestionCellLikeLabel(label: VFLabel) | Like count on a question. |
liveQuestionCellDislikeButton(button: UIButton) | Dislike control on a question. |
liveQuestionCellDislikeLabel(label: VFLabel) | Dislike count on a question. |
liveQuestionCellReplyButton(button: UIButton) | Reply control on a question. |
liveQuestionCellOptionsButton(button: UIButton) | Overflow control on a question. |
liveQuestionCellReplyingToLabel(label: VFLabel) | "Replying to" line shown on a reply. |
liveQuestionCellPinnedView(view: VFPinnedView) | Pinned marker on a question. |
liveQuestionCellHostPillView(view: UIView) | "Host" pill on questions and answers from a host. |
liveQuestionCellSeparator(view: UIView) | Divider between question rows. |
liveQuestionCellAnnouncementLabel(label: VFLabel) | Text of an announcement row. |
liveQuestionCellAnnouncementIcon(image: UIImageView) | Icon of an announcement row. |
liveQuestionCellAnnouncementBackground(view: UIView) | Background of an announcement row. |
liveQuestionCellAnswerLabel(label: VFLabel) | Text of a host's answer block. |
liveQuestionCellAnswerIcon(image: UIImageView) | Icon of a host's answer block. |
liveQuestionCellAnswerBackground(view: UIView) | Background of a host's answer block. |
liveQuestionsHostCellNameLabel(label: VFLabel) | Host name in the hosts list. |
liveQuestionsHostCellBadgeLabel(label: VFLabel) | Host badge text in the hosts list. |
liveQuestionsHostCellBadgePillView(view: UIView) | Host badge pill in the hosts list. |
liveQuestionsHostCellContainerView(view: UIView) | Container of a hosts list row. |
liveQuestionsHostsListBackgroundView(view: UIView) | Background of the hosts list. |
liveQuestionComposerUserAvatar(view: UIView) | Reader's initials avatar in the ask-a-question pill. |
liveQuestionComposerUserImage(image: UIImageView) | Reader's avatar photo in the ask-a-question pill. |
liveQuestionComposerHintLabel(label: VFLabel) | Hint text inside the ask-a-question pill. |
liveQuestionComposerPillView(view: UIView) | Tappable ask-a-question pill. |
liveQuestionTitleLabel(label: VFLabel) | Widget title. |
liveQuestionPoweredByView(view: VFPoweredByViafouraView) | "Powered by Viafoura" badge. |
liveQuestionBackgroundView(view: UIView) | Root background of the live questions widget. |
liveQuestionStatusChipView(view: UIView) | Status chip showing whether the session is live or closed. |
liveQuestionStatusDotView(view: UIView) | Dot inside the status chip. |
liveQuestionStatusLabel(label: VFLabel) | Text inside the status chip. |
Trending
The vertical trending list and the trending carousel.
| Case | Description |
|---|---|
trendingVerticalBackgroundView(view: UIView) | Root background of the vertical trending list. |
trendingVerticalTitleLabel(label: VFLabel) | Section title of the vertical trending list. |
trendingVerticalFullImage(image: VFImageView) | Article thumbnail in a full-size trending row. |
trendingVerticalFullImageIcon(image: VFImageView) | Icon overlaid on the full-size row's thumbnail. |
trendingVerticalFullTitle(label: VFLabel) | Article title in a full-size trending row. |
trendingVerticalFullCount(label: VFLabel) | Comment count in a full-size trending row. |
trendingVerticalViewMoreButton(button: VFButton) | "View more" button under the trending list. |
trendingCarouselTitle(label: VFLabel) | Article title on a trending carousel card. |
trendingCarouselImage(image: VFImageView) | Article thumbnail on a trending carousel card. |
trendingCarouselCount(label: VFLabel) | Comment count on a trending carousel card. |
trendingCarouselBackgroundView(view: UIView) | Background of a trending carousel card. |
Notifications
The notification bell and the notification list rows.
| Case | Description |
|---|---|
notificationContentImage(image: VFImageView) | Actor photo or content thumbnail in a notification row. |
notificationAvatarView(view: VFUserAvatarView) | Actor's initials avatar in a notification row. |
notificationRemoveImage(image: VFImageView) | Dismiss control on a notification row. |
notificationContentLabel(label: VFLabel) | Notification text. |
notificationDateLabel(label: VFLabel) | Notification timestamp. |
notificationTrendingCountImage(image: VFImageView) | Comment-count icon on a trending notification row. |
notificationTrendingImage(image: VFImageView) | Article thumbnail on a trending notification row. |
notificationTrendingIcon(image: VFImageView) | Trending icon on a trending notification row. |
notificationGroupTitleLabel(label: UILabel) | Section header of a notification group (today, yesterday, older, active). |
notificationBellText(label: VFLabel) | Unread counter next to the bell. |
notificationBellIcon(icon: VFImageView) | Bell icon of the standalone notification bell. |
Report flow
The report-a-comment sheet, step by step.
| Case | Description |
|---|---|
reportReasonOptionLabel(label: VFLabel) | Each selectable reason row. |
reportTitleLabel(label: VFLabel) | Title of the report sheet. |
reportPickReasonLabel(label: VFLabel) | "Pick a reason" heading on the reason list. |
reportStartCloseLabel(label: VFLabel) | Cancel action on the first report step. |
reportStartDescriptionLabel(label: VFLabel) | Explanation on the first report step. |
reportStartButton(button: VFButton) | Primary button on the first report step. |
reportChosenTitleLabel(label: VFLabel) | Title shown after a reason is chosen. |
reportChosenDescriptionLabel(label: VFLabel) | Description shown after a reason is chosen. |
reportChosenCloseLabel(label: VFLabel) | Cancel action after a reason is chosen. |
reportChosenButton(button: VFButton) | Confirm button after a reason is chosen. |
reportThanksLabel(label: VFLabel) | Confirmation message once the report is sent. |
reportThanksButton(button: VFButton) | Dismiss button on the confirmation step. |
Bottom sheets
The sort picker and the comment options sheet.
| Case | Description |
|---|---|
bottomPickerView(view: UIView) | Background of the bottom sheet used for sort and options. |
bottomPickerTitleLabel(label: VFLabel) | Title of the bottom sheet. |
bottomPickerLabel(label: VFLabel, isActive: Bool) | Label of an option row in the bottom sheet. |
bottomPickerSeparator(separatorView: VFSeparatorView) | Divider between option rows in the bottom sheet. |
bottomPickerIcon(image: VFImageView) | Icon next to an option row in the bottom sheet. |
Updated 4 days ago
What’s Next
Did this page help you?