Start a Conversation

In a real application, we'll need to replace that dummy user data with real user data. If you're not making a real integration yet, feel free to skip to the next section and come back to this later.

Otherwise, let's get the real data from your database and use it to populate the TalkJS chat. You send user information to TalkJS as JavaScript data by creating a User object.

Find the following snippet of code:

1const other = new Talk.User({
2 id: '654321',
3 name: 'Sebastian',
4 email: '[email protected]',
5 photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
6 welcomeMessage: 'Hey, how can I help?',
7 role: 'default',
8});

Now, replace the hard-coded values with fields from your database - typically from the user's account settings. The id field uniquely identifies this user to TalkJS, so choose a value that will never change such as your internal user ID. You don't need to fill in all the information -photoUrl and welcomeMessage are optional. Learn more about the User object in our documentation.

For example, if your backend is written in PHP, you might end up with something like this:

1<?php $user = $database.getUser(654321); ?>
2var other = new Talk.User(
3 <?php echo json_encode(array(
4 "id" => strval($user->id),
5 "name" => $user->name,
6 "email" => $user->email,
7 "photoUrl" => $user->photoUrl,
8 "welcomeMessage" => "Hey, let's have a chat!",
9 "role" => "default"
10 )); ?>
11);

Here we hardcode the user id 654321, but in a live application that will need to be dynamic, based on who the user is chatting with.

Note that this is just an example. Your code will depend on how your backend is structured, so you will need to use this as a guide rather than copying it directly.

After making that change and reloading the page, you should see the same chatbox. However, now you're chatting with an actual user in your system.

Conversations

A bit further down, there's these lines of code:

1const conversation = session.getOrCreateConversation(
2 Talk.oneOnOneId(me, other)
3);
4conversation.setParticipant(me);
5conversation.setParticipant(other);

Note that method name, getOrCreateConversation. If the two given users had been in touch before, TalkJS automatically continues that conversation. If not, a new conversation is started and the other user's welcomeMessage is shown.

The call to Talk.oneOnOneId(me, other) generates a unique Conversation ID based on the IDs of me and other. This is useful if you just want to create a conversation between two people. The other of the arguments does not matter.

Note that the conversation can only be mounted once the current user is part of the conversation, otherwise you must call setParticipant to add them.

Conversation IDs

You can also choose to manage your own conversation IDs. This way, you have full control over which conversations exist for who. A Conversation ID can be anything: a product, a service, a booking, an order, or even a hash of a product and a user id. It depends on your site. All TalkJS needs is a unique key that identifies that topic, so we can tell the different conversations apart.

If you want to be in charge of creating Conversation IDs, call getOrCreateConversation like this:

1const conversation = session.getOrCreateConversation('order_83562938');

Please note that conversation IDs must be globally unique (per App ID).

Read more about choosing the right conversation ID.

Subjects

1const conversation = session.getOrCreateConversation('order_83562938');
2conversation.setAttributes({
3 subject: 'Hair Wax 5 Gallons',
4});

The subject key is optional and should describe the conversation in a human-friendly way. TalkJS will display it above the conversation and optionally in the Inbox's conversation feed. You can include some limited wiki-style formatting here.

Next steps

You have a great working chat now, but your current user isn't set up right yet, showing as "Alice" to all other users. Let's get that fixed.