Conversation

Initialize the OpenWeb SDK and configure Conversation in your iOS app.

The OpenWeb iOS SDK provides two approaches to create a fluid Conversation experience for your app:

ApproachDescription
Pre-ConversationA preview of comments at the end of an article to encourage engagement with a Conversation.
Full ConversationA full-page Conversation experience that initiates when the user triggers a CTA button.


Pre-Conversation

Using interactive comment features, Pre-Conversation enables users to easily scan and digest comments in their feed:

  • Preview of comments from the Conversation in a Pre-Conversation ViewController
  • Textbox to enter comments
  • Button to show all comments

If a user clicks on the text box, the comment creation screen appears which enables the user to type a comment. If a user clicks the button to see more comments, the SDK opens a new ViewController which displays all comments from the Conversation.


Implementation

Use the following steps to add a Pre-Conversation:

  1. Implement the SpotImLoginDelegate protocol. This delegate is called when an unlogged user tries to post a comment when guest commenting is not allowed. An empty implementation can also be provided.

πŸ“˜

You can learn more about the SpotImLoginDelegate in the Implement SSO for the OpenWeb iOS SDK article.

extension ArticleViewController: SpotImLoginDelegate {
   func startLoginUIFlow(navigationController: UINavigationController)
      // Show your login UI flow here, you can either `push` or `present` it
      // Once the flow is done and SSO is completed we will dismiss the whole navigation stack
      // You can still dismiss your UI at the end, but we will do it regardless  
   }

   func renewSSOAuthentication(userId: String) {
      // Renew SSO - Basically silent SSO again to keep the user connected
      // This function will be called once a token is no longer valid and a user was connected from before
      // Follow the above steps to renew the SSO
   }
}
  1. Create an instance of SpotImSDKFlowCoordinator. Make sure to have a strong reference, otherwise the instance of SpotImSDKFlowCoordinator will be deallocated.
SpotIm.createSpotImFlowCoordinator(loginDelegate: self) { [weak self] result in
    guard let self = self else { return }                                                     
        switch result {
            case .success(let coordinator):
            self.spotIMCoordinator = coordinator
            case .failure(let error):
            print(error)
        }
}
  1. Instantiate preConversationVC for a specific article. Be sure to define the placeholder text for the POST_ID, url, title, subtitle, and thumbnailUrl.

The preConversationVC will be passed into the completion block.

let articleMetadata = SpotImArticleMetadata(url: "URL TO THE ARTICLE PAGE ON THE WEB", 
                                            title: "ARTICLE TITLE", 
                                            subtitle: "ARTICLE SUBTITLE", 
                                            thumbnailUrl: "URL TO ARTICLE THUMBNAIL IMAGE")

spotIMCoordinator?.preConversationController(
    withPostId: "POST ID",
    articleMetadata: articleMetadata,
    numberOfPreLoadedMessages: 2, // This is optional, Default = 2, Maximum = 15
    navigationController: navigationController,
    completion: { [weak self] preConversationVC in
    // add preConversationVC to your view controller
  }
)
  1. Add preConversationVC as a child to another view controller.
  2. Add the preConversationVC.view to a view of another view controller or of a container view.
  3. Lay out the preConversationVC view.
  4. Call the open func didMove(toParent parent: UIViewController?) method of the preConversationVC instance.
preConversationVC.view.translatesAutoresizingMaskIntoConstraints = false

self.addChild(preConversationVC)
self.containerView.addSubview(preConversationVC.view)

preConversationVC.view.topAnchor.constraint(equalTo: self.containerView.topAnchor).isActive = true
preConversationVC.view.leadingAnchor.constraint(equalTo: self.containerView.leadingAnchor).isActive = true
preConversationVC.view.bottomAnchor.constraint(equalTo: self.containerView.bottomAnchor).isActive = true
preConversationVC.view.trailingAnchor.constraint(equalTo: self.containerView.trailingAnchor).isActive = true

preConversationVC.didMove(toParent: self)

πŸ“˜

Make sure the container view can be resized when the PreConversationViewController is filled with comments.

To understand when the view gets resized, implement theSpotImLayoutDelegate protocol and get a callback through the viewHeightDidChange(to newValue: CGFloat) method. To get the callback, make sure to set the layout delegate in the SpotImSDKFlowCoordinator before trying to load the view.

spotIMCoordinator.setLayoutDelegate(delegate: YOUR_DELEGATE_IMPLEMENTATION)
  1. (Optional) Customize the Conversation.
  2. Monetize the Conversation.


Full Conversation

This approach allows you to open a full Conversation screen directly without displaying a Pre-Conversation ViewController.


Implementation

Use the following steps to add a Full Conversation:

  1. Create an instance of SpotImSDKFlowCoordinator. Make sure to have a strong reference, otherwise the instance of SpotImSDKFlowCoordinator will be deallocated.
SpotIm.createSpotImFlowCoordinator(loginDelegate: self) { [weak self] result in
    guard let self = self else { return }                                                     
        switch result {
            case .success(let coordinator):
            self.spotIMCoordinator = coordinator
            case .failure(let error):
            print(error)
        }
}
  1. Create and define SpotImArticleMetadata.
let articleMetadata = SpotImArticleMetadata(url: "URL TO THE ARTICLE PAGE                                           ON THE WEB", 
                      title: "ARTICLE TITLE", 
                      subtitle: "ARTICLE SUBTITLE", 
                      thumbnailUrl: "URL TO ARTICLE THUMBNAIL IMAGE")
  1. Present the full Conversation modally or push the full Conversation to the host app navigator controller. In either scenario, call openFullConversationViewController on the SpotImSDKFlowCoordinator instance.
self.coordinator.openFullConversationViewController(
  postId: self.postId,
  articleMetadata: self.metadata,
  presentationalMode: .present(viewController: self),
    completion: completionHandler)

// Method signature:
public func openFullConversationViewController(postId: String,
                                   articleMetadata: SpotImArticleMetadata,
                                   presentationalMode: SPViewControllerPresentationalMode,
                                   selectedCommentId: String? = nil,
                                   completion: SPShowFullConversationCompletionHandler? = nil)

// SPViewControllerPresentationalMode enum
public enum SPViewControllerPresentationalMode {
    case present(viewController: UIViewController)
    case push(navigationController: UINavigationController)
}
self.coordinator.openFullConversationViewController(
  postId: self.postId,
  articleMetadata: self.metadata,
  presentationalMode: .push(navigationController: self.navigationController!)
    completion: completionHandler)

// Same method as on the "Present Conversation modally" tab but with .push mode
  1. (Optional) Customize the Conversation.
  2. Monetize the Conversation.