Vue

To get started, create an account or login to your dashboard to get your App ID. You can get your App ID from the Settings page of the dashboard.

Add TalkJS to your project by installing it.

1npm install talkjs --save
2
3# or, if you use yarn
4yarn add talkjs

In this guide you'll create a Single File Component which uses the TalkJS Inbox. Create Inbox.vue wherever you keep the rest of your components in your project.

In the template of Inbox.vue you need to add a div that acts as the container for TalkJS.

1//Inbox.vue
2<template>
3  <div ref="talkjs" style="width: 90%; margin: 30px; height: 500px">
4    <i>Loading chat...</i>
5  </div>
6</template>

Add a script tag to your template, and import TalkJS:

1//Inbox.vue
2<script>
3  import Talk from 'talkjs';
4</script>

Next, add a name and declare the props that you need for your component. In this example you only need one prop: an object representing the current user.

1//Inbox.vue
2
3export default {
4        name: 'Inbox',
5        props: {
6            currentUser: {
7              type: Object,
8              required: true
9          }
10        }
11    }

You can then import this component in the place you want it in your app (in our example, it's in App.vue):

1// App.vue
2
3<script setup>
4import Inbox from "./components/Inbox.vue";
5
6const me = {
7  id: "sample_user_alice",
8  name: "Alice",
9  email: "[email protected]",
10  photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
11  welcomeMessage: "Hi!",
12};
13</script>
14
15<template>
16  <header></header>
17
18  <main>
19    <Inbox :currentUser="me" />
20  </main>
21</template>

You want to set up your inbox as soon as the component gets mounted, so do that inside the mounted lifecycle hook. The TalkJS SDK loads asynchronously, so you need to wait for the Talk.ready promise before you can proceed. Don't forget to add async before mounted() to make the function asynchronous.

1//Inbox.vue
2async mounted() {
3  await Talk.ready
4}

Create a TalkJS user. The Talk.User object is used to synchronize user data with TalkJS, so you can display it inside the chat UI. For this guide, you will create a TalkJS user assuming that the currentUser is passed as a prop to your component. Please note that in this example you add several properties to your user, but only the id is required.

1//Inbox.vue
2
3const me = new Talk.User({
4  id: this.currentUser.id,
5  name: this.currentUser.name,
6  email: this.currentUser.email,
7  photoUrl: this.currentUser.photoUrl,
8  welcomeMessage: "Hey there! How are you? :-)",
9  //The welcomeMessage is the first message any other user will see when they start a chat with this user
10  role: "booker"
11})

A session represents a user's active browser tab. It also authenticates your app with TalkJS. To create a session, you need your App ID, which you can get from the Settings page of your dashboard, and the current TalkJS user. Add this to the Talk.ready callback.

1const talkSession = new Talk.Session({
2  appId: '<APP_ID>',
3  me: me,
4});

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. For this tutorial, we recommend using the App ID for TalkJS's Test Mode.

A conversation happens between two or more people. So far you have just created one TalkJS user. Next, create another user to have a conversation with. For this example, you'll use a hard-coded dummy user.

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});

Next, create a conversation. The getOrCreateConversation method attempts to get the conversation between the two users if it previously exists or create a new one otherwise. The Talk.oneOnOneId method computes a conversation ID based on participants' IDs. Use this method if you want to create a conversation between two users. You may want to create a group conversation, or generate a conversation ID associated with a transaction that happened on your platform, such as a purchase. You can find how to do that in the documentation on the conversation ID.

1const conversation = talkSession.getOrCreateConversation(
2  Talk.oneOnOneId(me, other)
3);

Next, set the participants of the conversation to the users you created.

1conversation.setParticipant(me);
2conversation.setParticipant(other);

The inbox is one of the UI types of TalkJS. It shows a user's conversation history and it allows them to write messages. To create the inbox, add this to your method:

1var inbox = talkSession.createInbox();
2inbox.select(conversation);

You need to call the inbox mount method after creating the inbox to make it visible on your app. Pass the element you create at the beginning of this guide to this method. Add the following code next:

1inbox.mount(this.$refs.talkjs);

That's it. You now have a Vue inbox component ready to be used in your app. Add it your App.vue, pass an object as the currentUser prop, and you’re good to go.

Here is the full code for the Inbox component:

1//Inbox.vue
2
3<template>
4    <div ref="talkjs" style="width: 1000px; margin: 30px; height: 500px">
5        <i>Loading chat...</i>
6    </div>
7</template>
8
9<script>
10    import Talk from 'talkjs';
11    export default {
12        name: 'Inbox',
13        props: {
14            currentUser: {
15              type: Object,
16              required: true
17          }
18        },
19        async mounted() {
20          await Talk.ready
21          const me = new Talk.User({
22            id: this.currentUser.id,
23            name: this.currentUser.name,
24            email: this.currentUser.email,
25            photoUrl: this.currentUser.photoUrl,
26            welcomeMessage: "Hey there! How are you? :-)",
27            role: "booker"
28          })
29
30          const talkSession = new Talk.Session({
31            appId: '<APP_ID>',
32            me: me,
33          });
34
35          const other = new Talk.User({
36            id: '654321',
37            name: 'Sebastian',
38            email: '[email protected]',
39            photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
40            welcomeMessage: 'Hey, how can I help?',
41          });
42
43          const conversation = talkSession.getOrCreateConversation(
44            Talk.oneOnOneId(me, other)
45          );
46
47          conversation.setParticipant(me);
48          conversation.setParticipant(other);
49
50          const inbox = talkSession.createInbox();
51          inbox.select(conversation);
52
53          inbox.mount(this.$refs.talkjs);
54
55        }
56    }
57</script>

For full working code for this example, see our GitHub repo.

In this guide, you've added powerful user-to-user chat to your Vue app. You also learned more about the fundamentals of TalkJS, and how it all fits together.

Most importantly, you've built a starting point to try out all the features TalkJS offers. For example, you could create a new UI theme in the Theme Editor, customize your chat with action buttons or HTML panels, or enable email notifications.