Add a Conversation to an iOS app
Add and configure the Conversation in your iOS app.
When implemented, a user sees the following displayed below an article in the article view controller:
- Preview of comments (
preConversationVC
) from the conversation - Text box to enter comments
- Button to show all comments
If a user clicks the button to see more comments, the SDK opens a new ViewController which displays all comments from the conversation.
If a user clicks on the text box, the creation screen appears to enable the user to type a comment.
Implementation
- Implement the
SpotImLoginDelegate
protocol. You can read more about it here. You can also provide an empty implementation. This delegate will be called when a user that is not logged in tries to post a comment when guest commenting is not allowed.
extension ArticleViewController: SpotImLoginDelegate {
func startLoginFlow() {
// Show your login flow here, dismiss the UI once the flow is done and SSO is completed
}
}
- Create an instance of
SpotImSDKFlowCoordinator
. Make sure to have a strong reference, otherwise the instance ofSpotImSDKFlowCoordinator
will be deallocated.
SpotIm.createSpotImFlowCoordinator(loginDelegate: self) { result in
switch result {
case .success(let coordinator):
self.spotIMCoordinator = coordinator
case .failure(let error):
print(error)
@unknown default:
print("Got unknown response")
}
}
- Instantiate
preConversationVC
for a specific article. Be sure to replace the placeholder text for thePOST_ID
,url
,title
,subtitle
, andthumbnailUrl
.
ThepreConversationVC
will be passed into thecompletion
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 ofpreConversationVC
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, you can implement SpotImLayoutDelegate
protocol and get a callback via viewHeightDidChange(to newValue: CGFloat)
method. To get the callback please make sure you set your layout delegate into the SpotImSDKFlowCoordinator
before trying to load the view.
spotIMCoordinator.setLayoutDelegate(delegate: YOUR_DELEGATE_IMPLEMENTATION)
Dark mode theme
OpenWeb supports a dark mode theme with a default gray background color. To set the background color to match the parent app you can use the following API.
SpotIm.darkModeBackgroundColor = UIColor.PARENT_APP_DARK_THEME_BACKGROUND_COLOR
By default, SpotIm SDK will take the system theme and set it to the SDK.
If your app supports overriding the system settings manually, you can use the following overrideUserInterfaceStyle API to set it manually to the SDK as well.
SpotIm.overrideUserInterfaceStyle = SPUserInterfaceStyle.dark
Show/Hide Article header
The displayArticleHeader
setting allows you to determine if an article header is displayed. By default, an article header with the article thumbnail, title, and subtitle is presented above the full Conversation and commenting UI.
SpotIm.displayArticleHeader = true|false
Change initial sort type
You can change the conversation initial sort order of comments.
let sortOption = SpotImSortByOption.newest
SpotIm.setInitialSort(option: sortOption)
Argument | Description |
---|---|
option SpotImSortByOption | Type of sort order Possible values include the following: • SpotImSortByOption.best • SpotImSortByOption.newest • SpotImSortByOption.oldest |
Set article section name to display relevant comment labels
Please contact support to learn more about comment labels and request setting remote configure related to comment sections and labels info.
- If default comment label section is set up in the config, comment labels will be enable on all conversations and there is no need to set section name in
SpotImArticleMetadata
. - If custom comment labels are set up in the config, call set section name in
SpotImArticleMetadata
with custom section name to enable or overide existing default section. - If comment label config is not set up, setting section name in
SpotImArticleMetadata
will have no effect.
let articleMetadata = SpotImArticleMetadata(url: "URL TO THE ARTICLE PAGE ON THE WEB",
title: "ARTICLE TITLE",
subtitle: "ARTICLE SUBTITLE",
thumbnailUrl: "URL TO ARTICLE THUMBNAIL IMAGE",
section: "SECTION NAME"
)
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 images to comments
We support adding images to comments from the camera or the photo library.
In order to enable this option in the comment creation screen, please add the NSPhotoLibraryUsageDescription
and the NSCameraUsageDescription
to your project info.plist
file.
For example:
<key>NSPhotoLibraryUsageDescription</key>
<string>This app wants to use your photos.</string>
<key>NSCameraUsageDescription</key>
<string>This app wants to take pictures.</string>
Get a comment counter
To show your users the engagement level of multiple Conversations, you can display the number of user comments that have been posted on each article on your main screen.
The following code example shows how to get and display a comment counters for multiple conversations.
SpotIm.getConversationCounters(conversationIds: [<POST_ID>]) { result in
switch result {
case .success(let counters):
let counter = counter["<SPECIFIC_POST_ID>"]
print(counter.comments)
print(counter.replies)
case .failure(let error):
print(error)
@unknown default:
print("Got unknown response")
}
}
Updated about 1 month ago