Inbox

The inbox displays your conversation list on the left and your current selected conversation on the right:

Loading chat...

Try sending a message to see the conversation show up in the conversation list.

The inbox is designed to act as the messaging center of your app, and it usually lives on its own page.

To learn how to adjust the size and styling of your inbox, see UI placement.

How to display an inbox

The inbox chat UI is available as part of the JavaScript SDK and as a React component. The example below shows the JS SDK, but the idea is similar for the React SDK.

The following code sets up a conversation between two sample users, creates an inbox and mounts it in a div with an id of talkjs-container:


1const me = new Talk.User("sample_user_alice");
2const session = new Talk.Session({
3        appId: '<APP_ID>', // replace with your app ID
4        me: me,
5      });
6
7const other = new Talk.User("sample_user_sebastian");
8
9const conversation = session.getOrCreateConversation(
10  Talk.oneOnOneId(me, other)
11);
12conversation.setParticipant(me);
13conversation.setParticipant(other);
14const inbox = session.createInbox();
15inbox.select(conversation);
16inbox.mount(document.getElementById("talkjs-container"));

See the createInbox method reference docs for more options.

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.

You can filter the conversations shown in the inbox with conversation list filters.