The Popup Widget

You can also show a conversation in a popup widget that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page. Note that only a single popup can be shown at a time.

The code for showing a popup is virtually identical to the code for showing a Chatbox: Just change createChatbox to createPopup and remove the parameter to the mount function. However, you usually don't want to show the popup right when the page loads, but only when the user clicks some button. This is easy with a little bit of JavaScript: we'll need to put the createPopup call in an event handler.

Let's assume the user is on another user's profile page and you added a button with id="btn-getInTouch" that's supposed to trigger the popup when clicked. Find the lines that start with calling createInbox and change them into the following:

const other = new Talk.User(/* user data from your backend - see previous chapter */);


const conversation = session.getOrCreateConversation(
  Talk.oneOnOneId(me, other)
);
conversation.setParticipant(me);
conversation.setParticipant(other);
const popup = session.createPopup();
popup.select(conversation);
popup.mount({ show: false });


const button = document.getElementById('btn-getInTouch');
button.addEventListener('click', (event) => {
  event.preventDefault();
  popup.show();
});

The line popup.mount({ show: false }) will make sure that the popup will be preloaded in the browser and will only show up after an explicit popup.show() in the button click handler. Optionally you can choose to mount and show it in one go (because e.g. there is no way to preload the data) by calling: popup.mount().

You can make a popup persistent across the page loads by changing keepOpen setting to true.

See the Popup JavaScript API reference for additional events and features.

Looking good? Let's enable notifications.