Add a Conversation to React-Native app

The OpenWeb SDK exposes one major flow to set up. When the PreConversation view is loaded, a user sees the following displayed below an article in the article view controller:

  • 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. To post new comments, the user must be logged in.



Use the following steps to initialize the SDK and configure the Conversation:

    1. Import the OpenWeb modules

import { SpotIM, SpotIMEventEmitter, SpotIMAPI } from '@spot.im/react-native-spotim'

    2. Initialize OpenWeb SDK with your Spot_ID in your root component constructor

SpotIMAPI.init("<Spot_ID>")

    3.Load PreConversation View in React-Native

<SpotIM
    postId="<POST_ID>"
    url="<POST_URL>"
    title="<POST_TITLE>"
    subtitle="<POST_SUBTITLE>"
    thumbnailUrl="<POST_THUMBNAIL>"
    darkModeBackgroundColor="#<HEX_COLOR>"
    style={{flex: 1}}
/>


Logout

Call the OpenWeb logout API whenever a user logs out of your system.

SpotIMAPI.logout();


Login status

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

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

You should call startSSO / sso("<SECRET_JWT>") if your own login status is 'user is logged in'.
LoggedInRegistered OpenWeb user

You should avoid calling startSSO / sso("<SECRET_JWT>") in this case. If you own status is 'user is logged out', call the OpenWeb logout method.


Analytics event callback

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

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

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


Did this page help you?