The Chatbox

The chatbox displays a single conversation:

Loading chat...

It takes up less space than the inbox and it's designed to be embedded in your app near an order, a booking, or a user profile. To learn how to adjust the placement of your chatbox, see UI placement.

Users can't switch between conversations in a chatbox. Therefore, you may want to use both the chatbox and the inbox in your application: the chatbox right by its context, and the inbox on its own page so that users can get back to old conversations. Alternatively, you may want to use buttons to switch between conversations.

How to display a chatbox

The chatbox chat UI is available as part of the JavaScript SDK, as a React and React Native component and as a Flutter widget. The example below shows the JS SDK, but the idea is similar for other SDKs.

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


JavaScript
1const me = new Talk.User("sample_user_alice");
2const session = new Talk.Session({
3        appId: '<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 chatbox = session.createChatbox();
15chatbox.select(conversation);
16chatbox.mount(document.getElementById("talkjs-container"));

You'll need to replace <APP_ID> with your TalkJS App ID. You can find your App ID in the Settings tab of the TalkJS dashboard.

See the createChatbox method reference docs for more options.