Vue

This guide will help you to quickly add the TalkJS Inbox to your Vue application. You might also want to read our end-to-end Vue tutorials:

Get your appId

To get started, create an account or login to your dashboard to get your appId.

Install TalkJS

Add TalkJS to your project by installing it.

npm install talkjs --save
# or, if you use yarn
yarn add talkjs

In this guide we’ll create a Single File Component which will be using the TalkJS Inbox. Create Inbox.vue wherever you keep the rest of your components in your project.

Add the TalkJS container to your template

In the template of Inbox.vue we will need to add a div which will act as the container for TalkJS.

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

We'll add a script tag to our template, and import TalkJS.

//Inbox.vue
<script>
import Talk from 'talkjs';
</script>

Next, let's add a name and declare the props that we will need for our component. In this example we’ll only need one prop; an object representing the current user.

javascript
//Inbox.vue
export default {
name: 'Inbox',
props: {
currentUser: {
type: Object,
required: true
}
}
}

Getting TalkJS up and running

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

javascript
//Inbox.vue
async mounted() {
await Talk.ready
}

Create a TalkJS user

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

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

Create a TalkJS session

A session represents a user's active browser tab. It also authenticates your app with TalkJS. To create a session, you need your appId gotten from your dashboard and the current TalkJS user. Add this to the Talk.ready callback.

javascript
const talkSession = new Talk.Session({
appId: 'YOUR_APP_ID',
me: me,
});

Remember to replace YOUR_APP_ID with the appId found in the TalkJS dashboard.

Create a conversation

A conversation happens between two or more people. So far we have just created one TalkJS user. Next, we'll create another user which we'll create a conversation with. For this example, we'll use a hardcoded dummy user.

javascript
const other = new Talk.User({
id: '654321',
name: 'Sebastian',
photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
welcomeMessage: 'Hey, how can I help?',
role: 'default',
});

Next, we 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 predictably computes a Conversation ID based on participants' ids. Use this method if you want to simply 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 e.g. a purchase. You can find how to do that here.

javascript
const conversation = talkSession.getOrCreateConversation(
Talk.oneOnOneId(me, other)
);

Next, we set the participants of the conversation to the users we created above.

javascript
conversation.setParticipant(me);
conversation.setParticipant(other);

Create and mount the Inbox

The Inbox is one of the UI types of TalkJS. It shows a user's conversation history and it allows them to write messages. You can find more UI types here. To create the Inbox add this to your method.

javascript
var inbox = talkSession.createInbox();
inbox.select(conversation);

You need to call the Inbox mount method after creating the Inbox to make it visible on your app. We will pass the element we create at the beginning of this guide to this method. Add the following code next.

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

That's it, you've got yourself a Vue Inbox component ready to be used in your app. Add it your App.vue and pass an object as the currentUser prop, and you’re good to go!

Here is the full code of this example:

html
//Inbox.vue
<template>
<div ref="talkjs" style="width: 1000px; margin: 30px; height: 500px">
<i>Loading chat...</i>
</div>
</template>
<script>
import Talk from 'talkjs';
export default {
name: 'Inbox',
props: {
currentUser: {
type: Object,
required: true
}
},
async mounted() {
await Talk.ready
const me = new Talk.User({
id: this.currentUser.id,
name: this.currentUser.name,
email: this.currentUser.email,
photoUrl: this.currentUser.photoUrl,
welcomeMessage: "Hey there! How are you? :-)",
role: "booker"
})
const talkSession = new Talk.Session({
appId: 'YOUR_APP_ID',
me: me,
});
const other = new Talk.User({
id: '654321',
name: 'Sebastian',
photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
welcomeMessage: 'Hey, how can I help?',
role: 'default',
});
const conversation = talkSession.getOrCreateConversation(
Talk.oneOnOneId(me, other)
);
conversation.setParticipant(me);
conversation.setParticipant(other);
const inbox = talkSession.createInbox();
inbox.select(conversation);
inbox.mount(this.$refs.talkjs);
}
}
</script>

In the next few sections, we'll go through all of the code you just pasted. We'll explain what happens and help you tune it to your needs.

Let's first make sure we chat with a real user!