Add a conversation to your app

Implementation

  1. Implement the VFLoginDelegate. This delegate will be called when the user tries to interact with the container in a way that needs authentication. For example: Liking a comment or trying to create their own comment.
    Your app should present your authentication flow and authenticate with Viafoura SDK Authenticate your users
extension ArticleViewController: VFLoginDelegate {
    func startLogin() {
        // Launch your custom login/signup flow
    }
}
  1. Create your VFArticleMetadata object.
let articleMetadata = VFArticleMetadata(
  url: URL(string: "https://demo.viafoura.com/posts/so-you-got-new-engagement-tools-now-what")!,
  title: "So you got New Engagement Tools, Now What?",
  subtitle: "What better way to grow a community than with on-site engagement tools?",
  thumbnailUrl: URL(
    string:
      "https://www.datocms-assets.com/55856/1636662761-impact-engagement.jpg?fit=crop&fm=webp&h=428&w=856"
  )!)

Value

Type

Description

url

URL

URL of the content

title

String

Title of the content

subtitle

String

Subtitle of the content

thumbnailUrl

URL

Content thumbnail URL

  1. Create your VFSettings object.
    For customization options, refer to Use custom colors and fonts
let colors = VFColors(colorPrimary: .green, colorPrimaryLight: .systemGreen)
let settings = VFSettings(colors: colors)
  1. Create the conversation view controller.
let callbacks: VFActionsCallbacks = { type in
    switch type {
    case .writeNewCommentPressed(let actionType):
       guard let newCommentViewController = VFNewCommentViewController.new(newCommentActionType: actionType, containerId: containerId, articleMetadata: articleMetadata, loginDelegate: self, settings: settings) else{
            return
       }
       self.present(newCommentViewController, animated: true)
    case .openProfilePressed(let userUUID, let presentationType):
        guard let profileViewController = VFProfileViewController.new(userUUID: userUUID, presentationType: presentationType, loginDelegate: self, settings: settings) else{
            return
        }
        self.present(profileViewController, animated: true)
       break
    case default:
       break
    }
}
    

guard let preCommentsViewController = VFPreviewCommentsViewController.new(containerId: containerId, articleMetadata: articleMetadata, loginDelegate: self, settings: settings) else {
    return
}

preCommentsViewController.setActionCallbacks(callbacks: callbacks)
  1. Add the conversation view to your view controller. Make sure you have created a container view to add the conversation VC into.
addChild(preCommentsViewController)

youCommentsContainerView.addSubview(preCommentsViewController.view)

preCommentsViewController.view.frame = CGRect(x: 0, y: 0, width: yourCommentsContainerView.frame.width, height: preCommentsViewController.view.frame.height)   
preCommentsViewController.willMove(toParent: self)
preCommentsViewController.didMove(toParent: self)

Implement the VFLayoutDelegate

The view controller content height will change depending on the amount of content present on the container. Listen to height changes by implementing the VFLayoutDelegate and update the container view height accordingly.

extension ArticleViewController: VFLayoutDelegate {
    func containerHeightUpdated(height: CGFloat) {
        self.yourCommentsContainerViewHeight.constant = height
    }
}

Did this page help you?