Vue
This guide will help you to quickly add the TalkJS Inbox to your Vue application.
To get started, create an account or login to your dashboard to get your appId
.
Add TalkJS to your project by installing it.
npm install talkjs --save
For this guide we'll assume that you will be using Vue's single file component. First, in the template we add an element which the TalkJS inbox will be mounted on.
<template><div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px"><i>Loading chat...</i></div></template>
Import TalkJS in the script part of your component.
<script>import Talk from 'talkjs';</script>
The setup for TalkJS will take place in the mounted
hook of the component.
First, we 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. Replace the currentUser
to whatever object you use to retrieve your user data.
javascriptexport default {name: 'Inbox',props: {currentUser: {type: Object,required: true}},mounted: function() {Talk.ready.then(function() {var me = new Talk.User({id: currentUser.id,name: currentUser.name,email: currentUser.email,photoUrl: currentUser.photo,welcomeMessage: "Hey there! How are you? :-)",role: "default"});}}
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.
javascriptwindow.talkSession = new Talk.Session({appId: 'YOUR_APP_ID',me: me,});
Remember to replace YOUR_APP_ID with the appId
found in the TalkJS dashboard.
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.
javascriptvar other = new Talk.User({id: '654321',name: 'Sebastian',photoUrl: 'https://demo.talkjs.com/img/sebastian.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.
javascriptvar conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other));
Next, we set the participants of the conversation to the users we created above.
javascriptconversation.setParticipant(me);conversation.setParticipant(other);
One more step to go.
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.
javascriptvar 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.
javascriptinbox.mount(document.getElementById('talkjs-container'));
That's it, the inbox should be running on your app now. Here is the full code for this and a demo.
Click on the result tab to see the Inbox. Go ahead, have a chat with Sebastian. He won't respond until a few steps from now but hey, it's a start! If you get an error, verify that appId
is correct.
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!