This guide will help you to quickly add the TalkJS Inbox to your React application. You might also want to read our end-to-end React tutorials:

Get your APP ID

To get started, create an account or login to your dashboard to get your appId.

Install TalkJS

Add TalkJS to your project by installing it.

npm install talkjs --save

# or, if you use yarn
yarn add talkjs

Import TalkJS in your Component

Import TalkJS in the component where you want the Inbox to live.

import Talk from "talkjs";

Create a TalkJS user

The first step is to create a TalkJS user. The Talk.User object is used to synchronize user data with TalkJS, so we can display it inside the chat UI.

For this guide, we will create a TalkJS user assuming that the currentUser is passed as a prop to our component. Replace the currentUser to whatever object you use to retrieve your user data. If you are using a Class Component, you can do this in the componentDidMount method of the component.

class InboxComponent extends Component {
   componentDidMount() {
        const currentUser = this.props.currentUser;
        Talk.ready.then(() => {
            var me = new Talk.User({
                id: currentUser.id,
                name: currentUser.name,
                email: currentUser.email,
                photoUrl: currentUser.photo,
                welcomeMessage: "Hey there! How are you? :-)"
            });
        })
   }
}
 

If you are using Hooks, you can use the useEffect hook to do this. Remember to pass an empty array as a second argument to prevent the component from re-rendering every time the component updates.

const InboxComponent = () => {
    useEffect(() => {
        const currentUser = this.props.currentUser;
        Talk.ready.then(() => {
            var me = new Talk.User({
                id: currentUser.id,
                name: currentUser.name,
                email: currentUser.email,
                photoUrl: currentUser.photo,
                welcomeMessage: "Hey there! How are you? :-)"
            });
        })
  }, [])
}

Create a TalkJS session

A session represents a user's active browser tab. It also authenticates your app with TalkJS. To create a session, you need your appId gotten from your dashboard and the current TalkJS user.

window.talkSession = new Talk.Session({
    appId: "YOUR_APP_ID",
    me: me
});

Remember to replace YOUR_APP_ID with the appId found in the TalkJS dashboard at https://talkjs.com/dashboard/login. Better yet, log into the dashboard and navigate to the docs there and we'll have filled them out for you.

Create a conversation

A conversation happens between two or more people. So far we have just created one TalkJS user. Next, we'll create another user which we'll create a conversation with. For this example, we'll use a hardcoded dummy user.

var other = new Talk.User({
    id: "654321",
    name: "Sebastian",
    email: "[email protected]",
    photoUrl: "https://demo.talkjs.com/img/sebastian.jpg",
    welcomeMessage: "Hey, how can I help?"
});

Next, we create a conversation. The getOrCreateConversation method attempts to get the conversation between the two users if it previously exists or create a new one otherwise. The Talk.oneOnOneId method predictably computes a Conversation ID based on participants' ids. Use this method if you want to simply create a conversation between two users. You may want to create a group conversation or generate a conversation ID associated with a transaction that happened on your platform e.g. a purchase. You can find how to do that here.

var conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other))

Next, we set the participants of the conversation to the users we created above.

conversation.setParticipant(me);
conversation.setParticipant(other);

One more step to go.

Create and Mount the Inbox

The Inbox is one of the UI types of TalkJS. It shows a user's conversation history and it allows them to write messages. You can find more UI types here. To create the Inbox add this to your method.

var inbox = talkSession.createInbox({selected: conversation});

You need to call the Inbox mount method after creating the Inbox to make it visible on your app.

In the constructor method of the component, we create a (ref)[https://reactjs.org/docs/refs-and-the-dom.html].

constructor(props) {
    super(props);
    this.talkjsContainer = React.createRef();
}

If you are using hooks, you can assign the ref to a variable instead.

const talkjsContainer = React.createRef();

In the render method of the component, add an element with the same ref that the Inbox will be mounted on. Note that TalkJS is not part of React's virtual DOM. React will simply create an empty container div, which TalkJS will render an Inbox UI into.

render() {
    return() {
        <div ref={this.talkjsContainer}></div>
    }
}

Then, in the Talk.ready callback in componentDidMount, we mount the inbox in the div that talkjsContainer refers to.

inbox.mount(this.talkjsContainer.current);

That is it, the inbox should be running on your app now. Here is the final result and the full code for this.

Click on the result tab to see the Inbox. Go ahead, have a chat with Sebastian. He won't respond until a few steps from now but hey, it's a start! If you get an error, verify that appId is correct.

In the next few sections, we'll go through all of the code you just pasted. We'll explain what happens and help you tune it to your needs.

We also have several examples for different use cases in React on our examples repository on GitHub.

Let's first make sure we chat with a real user!