Switching Between Conversations
Tuesday, June 2, 2020 6:22 AMOnce you've added a chatbox or popup to your site, and you have some conversations going, you might want your users to be able to switch between them.
In a popup
Let's say you have a few buttons on a page, each corresponding to a conversation topic:
<button onclick="buttonClicked(this.innerHTML)">Conversation A</button>
<button onclick="buttonClicked(this.innerHTML)">Conversation B</button>
<button onclick="buttonClicked(this.innerHTML)">Conversation C</button>
Then we can define buttonClicked(conversationId)
as follows
let popup;
function buttonClicked(conversationId) {
// assume `session` has been set elsewhere
const conversation = session.getOrCreateConversation(conversationId);
if (popup) {
popup.show(); //in case popup is hidden
popup.select(conversation) //select the conversation clicked on
}
else {
//if there is no existing popup, create one
popup = session.createPopup(conversation);
popup.mount({show: true});
}
}
function buttonClicked(conversationId) {
// assume `window.talkSession` has been set elsewhere
var conversation = window.talkSession.getOrCreateConversation(conversationId);
if (window.popup) {
window.popup.show(); //in case popup is hidden
window.popup.select(conversation) //select the conversation clicked on
}
else {
//if there is no existing popup, create one
window.popup = window.talkSession.createPopup(conversation);
window.popup.mount({show: true});
}
}
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.
In a chatbox
Assuming someChatbox
exists, we can simply do:
function buttonClicked(conversationId) {
const conversation = window.talkSession.getOrCreateConversation(conversationId);
someChatbox.select(conversation);
}
function buttonClicked(conversationId) {
var conversation = window.talkSession.getOrCreateConversation(conversationId);
someChatbox.select(conversation);
}