Add a popup UI

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 could use buttons to allow users to switch between conversations in a popup chat UI.

Note that only a single popup can be shown on a page at any one time.

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:


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 popup = session.createPopup();
13popup.select(conversation);
14popup.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:


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

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


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

Switch conversations

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

Let's say you have a few buttons on a page, each corresponding to a conversation topic:


HTML
1<button onclick="buttonClicked(this.innerHTML)">Conversation A</button>
2<button onclick="buttonClicked(this.innerHTML)">Conversation B</button>
3<button onclick="buttonClicked(this.innerHTML)">Conversation C</button>

Then we can define buttonClicked(conversationId) as follows


JavaScript
1let popup;
2
3function buttonClicked(conversationId) {
4  // assume `session` has been set elsewhere
5  const conversation = session.getOrCreateConversation(conversationId);
6
7  if (popup) {
8    popup.show(); //in case popup is hidden
9    popup.select(conversation); //select the conversation clicked on
10  } else {
11    //if there is no existing popup, create one
12    popup = session.createPopup();
13    popup.select(conversation);
14    popup.mount({ show: true });
15  }
16}

When the user clicks on a button, the text within the button is used as a conversation id. The popup then makes this the active conversation. select takes either a Conversation object or conversation id as its parameter - see select.

Add a popup UI

How to display a popup

Switch conversations