Add a Conversation to an 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

1. 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
    }
}

2. Create an instance of SpotImSDKFlowCoordinator. Make sure to have a strong reference, otherwise the instance of SpotImSDKFlowCoordinator 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")
    }
}

3. Instantiate preConversationVC for a specific article. Be sure to replace 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
  }
)

4. Add preConversationVC as a child to another view controller.
5. Add the preConversationVC.view to a view of another view controller or of a container view.
6. Lay out the preConversationVC view.
7. Call the open func didMove(toParent parent: UIViewController?) method of 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, 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)

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")
    }
}