Popup

The popup chat displays at the bottom right of the page when the user clicks a button. For an example of what it looks like, see our support chat.

Users can't switch between conversations in a popup. Therefore, you may want to use both the popup and the inbox in your application: the popup 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.

Note that only a single popup can be shown at a time.

How to display a popup

The popup 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 and then displays it in a popup with the createPopup method. In this example we've set show to false so that the popup doesn't appear until you click the button:

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 popup = session.createPopup();
15popup.select(conversation);
16popup.mount({ show: false });

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.

You may also want to create your own button to click on. As an example, say you have the following button:

1<button type="button" id="btn-openPopup">Open popup</button>

You can then add an event handler to show the popup:

1const button = document.getElementById("btn-openPopup");
2button.addEventListener("click", (event) => {
3  event.preventDefault();
4  popup.show();
5});

To make your popup persistent across page loads, change the keepOpen setting to true. See the createPopup method reference docs for more options.