Create a group chat

You can create a group chat with three or more participants, guests, or both. Participants are members of a conversation, while guests have lightweight guest access. For an overview of the differences between participants and guests, see: Participant access and guest access.

Create a group chat with participants

To create and start a group chat with participants, take the following steps:

  1. Construct a chat session and define the users of your group chat.

For example, the following code constructs a chat session, and defines the users Alice, Sebastian, and Steve:

1await Talk.ready;
2const me = new Talk.User({
3 id: "123456",
4 name: "Alice",
6});
7const session = new Talk.Session({
8 appId: "<APP_ID>",
9 me: me
10});
11
12const other1 = new Talk.User({
13 id: "654321",
14 name: "Sebastian",
15 email: "[email protected]"
16});
17
18const other2 = new Talk.User({
19 id: "456789",
20 name: "Steve",
21 email: "[email protected]"
22});
23
24...
25
26}

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.

  1. Create a conversation with a unique conversation ID, using the getOrCreateConversation method.
  2. Set the conversation participants using the setParticipant method. Optionally, you can also set any attributes of the conversation, such as a conversation subject, photo, and custom metadata, using the setAttributes method.

For example, the following code creates a conversation, sets the three participants that you defined (here identified as me, other1, and other2), and provides a photo URL and a subject for the conversation:

1await Talk.ready;
2...
3const conversation = session.getOrCreateConversation("<CONVERSATION_ID>");
4conversation.setParticipant(me);
5conversation.setParticipant(other1);
6conversation.setParticipant(other2);
7conversation.setAttributes({
8 photoUrl: "https://talkjs.com/docs/steel-preserve.jpg",
9 subject: "Beautiful steel preserve for rent!"
10});
11
12const chatbox = session.createChatbox();
13chatbox.select(conversation);
14chatbox.mount(document.getElementById("talkjs-container"));
  • Replace <CONVERSATION_ID> with your own unique conversation ID, which you can choose yourself.

You now have a working example of a group chat with three participants. When you run this code, you should see something like the following:

Loading chat...

Enable guest access to a group chat

If you would like to allow users to access a group chat as a guest, you need to enable guest access for that conversation.

To enable people to join a group chat as guests, take the following steps:

  1. Login to your TalkJS dashboard and go to the Settings tab. Under Security settings, enable browser synchronization of users and conversations by unchecking the following two boxes:
  • Disallow user synchronization via the browser
  • Disallow conversation synchronization via the browser

Unchecking these boxes ensures that data on both users and conversations can be updated via the JavaScript SDK.

  1. In the code where you use the select method to select the active conversation, pass an extra asGuest parameter:
1const conversation = session.getOrCreateConversation('<CONVERSATION_ID>');
2const chatbox = session.createChatbox();
3chatbox.select(conversation, { asGuest: true });

You now have guest access to a group chat enabled.

Note: To add a user to a conversation as a guest, do not use the setParticipant method on that user when you create the conversation. This is because setParticipant makes the user a participant of a conversation. Once a user is a participant in a conversation, they cannot also be added as a guest. (Specifying asGuest: true has no effect when a user is already a participant of a conversation.)

If you would like to switch a current conversation participant’s access type to that of guest, then first remove that user from the conversation via the REST API, and then add the user as a guest.

For more on guest access, see: Guests.