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.
To create and start a group chat with participants, take the following steps:
- 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: me10});1112const other1 = new Talk.User({13 id: "654321",14 name: "Sebastian",16});1718const other2 = new Talk.User({19 id: "456789",20 name: "Steve",22});2324...2526}
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.
- Create a conversation with a unique conversation ID, using the getOrCreateConversation method.
- 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});1112const 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:
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:
- 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.
- 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.