Conversation

Implement Conversation for the OpenWeb React Native SDK

The OpenWeb React Native SDK enables you to create fluent conversation experiences that fuel quality interactions with community and content.

The SDK exposes one flow to set up Conversation. When the PreConversation view loads, the user sees the following displayed in the ViewController below the article:

  • Preview of 2 comments from the Conversation
  • Text box to create new 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. The user must be logged in to post new comments.



Configure the Conversation

With PreConversation

This approach displays a preview of 2 comments from the Conversation. A viewer can then click a button to load the full Conversation.

Follow these steps to initialize the SDK and configure the Conversation:

  1. Initialize the OpenWeb SDK with your Spot_ID in the root component constructor.

    import { SpotIMAPI } from '@spot.im/react-native-spotim'
    
    ...
    
    SpotIMAPI.init("<Spot_ID>")
    
  2. Load the PreConversation component.

    import { SpotIM } from '@spot.im/react-native-spotim'
    
    ...
    
    <SpotIM
        postId="<POST_ID>"
        url="<POST_URL>"
        title="<POST_TITLE>"
        subtitle="<POST_SUBTITLE>"
        thumbnailUrl="<POST_THUMBNAIL>"
        darkModeBackgroundColor="#<HEX_COLOR>"
        style={{flex: 1}}
    />
    
  3. Open the Conversation screen.

    import { SpotIMAPI } from '@spot.im/react-native-spotim'
    
    ...
    
    try {
        await SpotIMAPI.openFullConversation({
            postId: "<POST_ID>",
            url: "<POST_URL>",
            title: "<POST_TITLE>",
            subtitle: "<POST_SUBTITLE>",
            thumbnailUrl: "<POST_THUMBNAIL>"
        });
    } catch (error) {
        // handle error
    }
    



Full Conversation Only

This approach takes a viewer directly to the full Conversation.

Follow these steps to initialize the SDK and configure the Conversation:

  1. Initialize the OpenWeb SDK with your Spot_ID in the root component constructor.

    import { SpotIMAPI } from '@spot.im/react-native-spotim'
    
    ...
    
    SpotIMAPI.init("<Spot_ID>")
    
  2. Open the Conversation screen.

    import { SpotIMAPI } from '@spot.im/react-native-spotim'
    
    ...
    
    try {
        await SpotIMAPI.openFullConversation({
            postId: "<POST_ID>",
            url: "<POST_URL>",
            title: "<POST_TITLE>",
            subtitle: "<POST_SUBTITLE>",
            thumbnailUrl: "<POST_THUMBNAIL>"
        });
    } catch (error) {
        // handle error
    }
    


Dark Mode Support

The React Native SDK supports dark mode for both Android and iOS.


Android

By default, Android dark mode is set to false.

To support dark mode according to device settings, use the supportAndroidSystemDarkMode property:

<SpotIM
    ...
    supportAndroidSystemDarkMode={true}
/>

In order to force turning on or off dark mode, use the androidIsDarkMode property:

<SpotIM
    ...
    androidIsDarkMode={true}
/>

🚧

The androidIsDarkMode property will not work if supportAndroidSystemDarkMode is set to true.


iOS

By default, iOS dark mode is enabled according to device settings.

In order to force turning on or off dark mode, use the .setIOSDarkMode() method:

SpotIMAPI.setIOSDarkMode(true);


Login Status

The OpenWeb login status API enables you to understand the status of the current user in the Conversation.

SpotIMAPI.getUserLoginStatus()
    .then(status => {
        console.log(status);
      })
    .catch(error => {
        console.error(error);
      })
Login StatusDescription
guestUnregistered guest user

NOTE: If the login status is user_is_logged_in, call startSSO / sso("\<SECRET_JWT>".
loggedInRegistered OpenWeb user

NOTE: If the login status is user_is_logged_out, call the OpenWeb logout method. Avoid calling startSSO / sso("\<SECRET_JWT>").


Logout

To complete a logout, call the OpenWeb logout API when the user logs out of your system.

SpotIMAPI.logout();


Analytics Event Callback

You can receive the OpenWeb analytics event by subscribing to trackAnalyticsEvent.

onTrackAnalyticsEvent(event) {
    console.log('\n', event.type, '\n', event);
}

componentDidMount() {
    ...
    const subscription = SpotIMEventEmitter.addListener('trackAnalyticsEvent', this.onTrackAnalyticsEvent);
}