Group Chats

TalkJS also allows you to start a conversation with more than two people. If you don't need group chats, just skip to the next section.

Participants can be added or removed at any time during the lifetime of the conversation. Note: Group chats are limited to 50 participants on the Basic and Growth plans. On the Enterprise plan, the limit is customisable to fit your needs. For larger chat rooms that bypass this limit, see the documentation on Super Group Chats.

Let's define participants of the group chat first:

JS (ESNext)


await Talk.ready;
const me = new Talk.User({
    id: "123456",
    name: "Alice",
    email: "[email protected]"
});
const session = new Talk.Session({
    appId: "YOUR_APP_ID",
    me: me
});

const other1 = new Talk.User({
    id: "654321",
    name: "Sebastian",
    email: "[email protected]"
});

const other2 = new Talk.User({
    id: "456789",
    name: "Steve",
    email: "[email protected]"
});

...

}


Talk.ready.then(function() {
    var me = new Talk.User({
        id: "123456",
        name: "Alice",
        email: "[email protected]"
    });
    window.talkSession = new Talk.Session({
        appId: "YOUR_APP_ID",
        me: me
    });

    var other1 = new Talk.User({
        id: "654321",
        name: "Sebastian",
        email: "[email protected]"
    });

    var other2 = new Talk.User({
        id: "456789",
        name: "Steve",
        email: "[email protected]"
    });

    ...
});

Remember to replace YOUR_APP_ID with the data you can find in the dashboard at https://talkjs.com/dashboard/login. Better yet, log into the dashboard and navigate to the docs there and we'll have filled them out for you.

In order to start a conversation, you need to provide a distinguishable conversation ID.

JS (ESNext)


await Talk.ready;
...
const conversation = session.getOrCreateConversation("CONVERSATION_ID");
conversation.setParticipant(me);
conversation.setParticipant(other1);
conversation.setParticipant(other2);
conversation.setAttributes({
    photoUrl: "https://demo.talkjs.com/img/11.jpg",
    subject: "Beautiful Steel Preserve for rent!"
});

const chatbox = session.createChatbox();
chatbox.select(conversation);
chatbox.mount(document.getElementById("talkjs-container"));


Talk.ready.then(function() {
    ...
    var conversation = window.talkSession.getOrCreateConversation("CONVERSATION_ID");
    conversation.setParticipant(me);
    conversation.setParticipant(other1);
    conversation.setParticipant(other2);
    conversation.setAttributes({
        photoUrl: "https://demo.talkjs.com/img/11.jpg",
        subject: "Beautiful Steel Preserve for rent!"
    });

    var chatbox = talkSession.createChatbox();
    chatbox.select(conversation);
    chatbox.mount(document.getElementById("talkjs-container"));
});

See getOrCreateConversation, setParticipant and setAttributes in the JS SDK reference for more information on how to set up and tune a conversation.

When you run this code, you should see something like this:

Loading chat...

Note that in this example we mounted the conversation inside a Chatbox, We could have just as easily used any other UI, or navigated a current UI to the new conversation using select.