Add a chatbox UI

The chatbox displays a single conversation.

Loading chat...

You can embed a chatbox in your app for example near an order, a booking, or a user profile. To learn how to adjust the placement of your chatbox, see Resize your chat UI.

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 session = new Talk.Session({
2  appId: "<APP_ID>",
3  userId: "sample_user_alice",
4});
5
6const other = session.user("sample_user_sebastian");
7
8const conversation = session.conversation("<CONVERSATION_ID>");
9conversation.createIfNotExists();
10conversation.participant(other).createIfNotExists();
11
12const chatbox = session.createChatbox();
13chatbox.select(conversation);
14chatbox.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.

Switch conversations

You might want your users to be able to switch between multiple conversations in a chatbox UI.

To achieve this, assuming someChatbox exists, you can do:


JavaScript
1function buttonClicked(conversationId) {
2  const conversation =
3    window.talkSession.getOrCreateConversation(conversationId);
4  someChatbox.select(conversation);
5}