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:
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',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',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();inbox.select(conversation);inbox.mount(document.getElementById('talkjs-container'));});
await Talk.ready;const me = new Talk.User({id: '123456',name: 'Alice',photoUrl: 'https://talkjs.com/images/avatar-1.jpg',welcomeMessage: 'Hey there! How are you? :-)',});const session = new Talk.Session({appId: 'YOUR_APP_ID',me: me,});const other = new Talk.User({id: '654321',name: 'Sebastian',photoUrl: 'https://talkjs.com/images/avatar-5.jpg',welcomeMessage: 'Hey, how can I help?',});const conversation = session.getOrCreateConversation(Talk.oneOnOneId(me, other));conversation.setParticipant(me);conversation.setParticipant(other);const inbox = session.createInbox();inbox.select(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:
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!