Getting Started

The easiest way to get started with TalkJS is to see it in action and then modify it to your needs.

Let's first create a conversation between two imaginary users, Alice and Sebastian.

A working example

Copy & paste this code anywhere in your app:

HTML
<!-- minified snippet to load TalkJS without delaying your page -->
<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src="https://cdn.talkjs.com/talk.js";a.head.appendChild(s)
;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
</script>


<!-- container element in which TalkJS will display a chat UI -->
<div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
  <i>Loading chat...</i>
</div>

Then, paste the following TalkJS initialization code into a script. We'll customize it in the next steps.

Talk.ready.then(function () {
  var me = new Talk.User({
    id: '123456',
    name: 'Alice',
    email: '[email protected]',
    photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
    welcomeMessage: 'Hey there! How are you? :-)',
  });
  window.talkSession = new Talk.Session({
    appId: 'YOUR_APP_ID',
    me: me,
  });
  var other = new Talk.User({
    id: '654321',
    name: 'Sebastian',
    email: '[email protected]',
    photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
    welcomeMessage: 'Hey, how can I help?',
  });


  var conversation = talkSession.getOrCreateConversation(
    Talk.oneOnOneId(me, other)
  );
  conversation.setParticipant(me);
  conversation.setParticipant(other);


  var inbox = talkSession.createInbox({ selected: conversation });
  inbox.mount(document.getElementById('talkjs-container'));
});

Remember to replace YOUR_APP_ID with the data you can find in the dashboard at https://talkjs.com/dashboard/login. Better yet, log into the dashboard and navigate to the docs there and we'll have filled them out for you.

If everything worked, you should see something like this:

Loading chat...

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.

We also have several examples for different use cases on our examples repository on GitHub.

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