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:
Approach | Description |
---|---|
Pre-Conversation | A preview of comments at the end of an article to encourage engagement with a Conversation. |
Full Conversation | A 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:
- 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
}
}
- Create an instance of
SpotImSDKFlowCoordinator
. Make sure to have a strong reference, otherwise the instance ofSpotImSDKFlowCoordinator
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)
}
}
- Instantiate
preConversationVC
for a specific article. Be sure to define the placeholder text for thePOST_ID
,url
,title
,subtitle
, andthumbnailUrl
.
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
}
)
- Add
preConversationVC
as a child to another view controller. - Add the
preConversationVC.view
to a view of another view controller or of a container view. - Lay out the
preConversationVC
view. - Call the
open func didMove(toParent parent: UIViewController?)
method of thepreConversationVC
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 theviewHeightDidChange(to newValue: CGFloat)
method. To get the callback, make sure to set the layout delegate in theSpotImSDKFlowCoordinator
before trying to load the view.spotIMCoordinator.setLayoutDelegate(delegate: YOUR_DELEGATE_IMPLEMENTATION)
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:
- Create an instance of
SpotImSDKFlowCoordinator
. Make sure to have a strong reference, otherwise the instance ofSpotImSDKFlowCoordinator
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)
}
}
- 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")
- Present the full Conversation modally or push the full Conversation to the host app navigator controller. In either scenario, call
openFullConversationViewController
on theSpotImSDKFlowCoordinator
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
Updated 7 months ago