The Inbox

The TalkJS Inbox is what you've seen up until now. Chat history on the left, selected conversation on the right.

It's designed to act as the messaging center of your app, and it usually lives on its own page.

It looks like this:

Loading chat...

If you want your app to have an inbox, now would be a good moment to make a separate page for it, typically with a URL such as yoursite.com/inbox or yourapp.com/messages. Cut&paste all the code you wrote up until now to that page.

Just the inbox

In fact, the code you have now does two separate things:

  1. It creates the inbox
  2. It starts or continues a conversation with a user.

You probably don't always need step 2. Many TalkJS customers therefore give their inbox page an optional parameter, which tells the page to start a new conversation, and not just show the message history.

For example, you could design a URL path like yoursite.com/inbox?chatWith=12345, and only generate the code you edited in the previous chapter if the chatWith parameter is given. Then, from anywhere else in your app, you can make a button link to that URL that lets the current user start a new conversation with a given other user.

For showing the inbox without starting a new conversation find the lines that contain createInbox and change them into the following:

const inbox = session.createInbox();
inbox.mount(document.getElementById('inbox-container'));

See the Inbox JavaScript API reference for additional events and features.

Also, check out our tutorial on how to filter the conversations shown on the inbox using Feed Filters. Feed filters can be used for a wide variety of use cases. We have another tutorial showing how to use them to archive chats.

Next step is to tweak the placement of your Inbox.