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: "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: "https://www.datocms-assets.com/55856/1636662761-impact-engagement.jpg?fit=crop&fm=webp&h=428&w=856")
ValueTypeDescription
urlURL StringURL of the content
titleStringTitle of the content
subtitleStringSubtitle of the content
thumbnailUrlURL StringContent 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):
        let newCommentViewController = VFNewCommentViewController.new(
            newCommentActionType: actionType,
            containerId: containerId,
            articleMetadata: articleMetadata,
            loginDelegate: self,
            settings: settings
        )
        self.present(newCommentViewController, animated: true)
    case .openProfilePressed(let userUUID, let presentationType):
        let profileViewController = VFProfileViewController.new(
            userUUID: userUUID,
            presentationType: presentationType,
            loginDelegate: self,
            settings: settings
        )
        self.present(profileViewController, animated: true)
        break
    }
} 

let preCommentsViewController = VFPreviewCommentsViewController.new(
  containerId: containerId, 
  articleMetadata: articleMetadata, 
  loginDelegate: self, 
  settings: settings
)
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(viewController: VFUIViewController, height: CGFloat) {
        self.yourCommentsContainerViewHeight.constant = height
    }
}