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.
Copy & paste this code anywhere in your app:
1<!-- minified snippet to load TalkJS without delaying your page -->2<script>3(function(t,a,l,k,j,s){4s=a.createElement('script');s.async=1;s.src="https://cdn.talkjs.com/talk.js";a.head.appendChild(s)5;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l6.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);7</script>89<!-- container element in which TalkJS will display a chat UI -->10<div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">11 <i>Loading chat...</i>12</div>
Then, paste the following TalkJS initialization code into a script. We'll customize it in the next steps.
1await Talk.ready;2const me = new Talk.User({3 id: '123456',4 name: 'Alice',6 photoUrl: 'https://talkjs.com/images/avatar-1.jpg',7 welcomeMessage: 'Hey there! How are you? :-)',8});9const session = new Talk.Session({10 appId: 'YOUR_APP_ID',11 me: me,12});13const other = new Talk.User({14 id: '654321',15 name: 'Sebastian',17 photoUrl: 'https://talkjs.com/images/avatar-5.jpg',18 welcomeMessage: 'Hey, how can I help?',19});2021const conversation = session.getOrCreateConversation(22 Talk.oneOnOneId(me, other)23);24conversation.setParticipant(me);25conversation.setParticipant(other);2627const inbox = session.createInbox();28inbox.select(conversation);29inbox.mount(document.getElementById('talkjs-container'));
Remember to replace YOUR_APP_ID
with your own App ID, which you can find on the Settings page of your TalkJS dashboard. 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:
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!