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 and 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.

Conversations in the inbox

A conversation only shows up in the conversation list of the inbox if the conversation contains at least one message. This is to ensure that the conversation list only shows conversations in which there is activity, and to avoid overwhelming the user with empty conversations.

To make a conversation show up in the conversation list, you can send either a system message or a user message on behalf of a user to that conversation. An automatic welcome message set at the user level doesn't make the conversation show up in the conversation list of an inbox.

Resources

You can use the following resources when working with the inbox pre-built chat UI: