Angular
This guide will help you quickly add TalkJS to your Angular app and create a chat between users with the JavaScript SDK.
In the guide we'll walk you through installing TalkJS, creating a chatbox and starting a conversation. For the full code for this example, see our GitHub repo.
To follow this guide, you will need:
- A TalkJS account.
- An Angular app that you want to add TalkJS to. If you don't have one yet, you can create an Angular starter app.
Add the talkjs
package to your app:
1npm install talkjs
The details of how and where you want to integrate TalkJS will depend on your existing app. For this example we'll use the generate component
command to create a new chat
component in our project:
1ng generate component chat
Next, import your new component. In this example we'll import the component in our top-level app.component.ts
file:
1import { Component } from '@angular/core';2import { ChatComponent } from './chat/chat.component';34@Component({5 selector: 'app-root',6 standalone: true,7 imports: [ChatComponent],8 template: ` <app-chat></app-chat> `,9 styles: [],10})11export class AppComponent {12 title = 'angular-getting-started';13}
Next, view an existing conversation. Choose the tab for your preferred chat UI, and add the following code to your chat.component.ts
file:
1import { Component } from '@angular/core';23import Talk from 'talkjs';45@Component({6 selector: 'app-chat',7 standalone: true,8 imports: [],9 template: `10 <div id="talkjs-container" style="height: 600px">Loading chats...</div>11 `,12 styles: '',13})14export class ChatComponent {15 constructor() {16 Talk.ready.then((): void => {17 const session = new Talk.Session({18 appId: 'MAGIC_APP_ID',19 userId: 'sample_user_alice',20 });2122 const chatbox = session.createChatbox();23 chatbox.select('sample_conversation');24 chatbox.mount(document.getElementById('talkjs-container'));25 });26 }27}
Let's step through what the code inside Talk.ready.then
is doing:
- You make a connection to the TalkJS servers, known as a session. You'll need to replace
<APP_ID>
with your own app ID, which you can find on the Settings page of your TalkJS dashboard. For this tutorial, we recommend using the app ID for TalkJS's test mode, which has built-in sample users and conversations which you'll use in this tutorial. You'll also need to specify a current user to send messages as. In this example, you're settinguserId
to be an existing user, thesample_user_alice
sample user.
- Then you create the chat UI. Call the
createChatbox
method for a chatbox,createInbox
for an inbox, orcreatePopup
for a popup UI. Use theselect
method to display the sample conversation, and then use themount
method to render the UI. (The methods here are linked for the chatbox, but are also available on the inbox and popup UI.)
For example, for the chatbox UI, you should see something like the following:
Try sending Sebastian a message! You can also try switching your userId
to sample_user_sebastian
and viewing the other side of the conversation.
If you don't see the chat window, make sure that you entered your app ID, replacing <APP_ID>
in the code.
So far in this guide we've used a sample user and conversation. Next, we'll create new users and a conversation between them, and sync them with the TalkJS servers. Usually, you would create users based on the data from your database. For this getting started guide, we've hard-coded our user data instead.
First, let's add a new current user, Nina, and a new conversation. Update your previous code inside Talk.ready.then
by changing the highlighted lines:
1Talk.ready.then(function () {2 const session = new Talk.Session({3 appId: '<APP_ID>',4 userId: 'nina',5 });6 session.currentUser.createIfNotExists({7 name: 'Nina',9 photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',10 welcomeMessage: 'Hi!',11 });1213 const conversationRef = session.conversation('new_conversation');14 conversationRef.createIfNotExists();1516 const chatbox = session.createChatbox();17 chatbox.select(conversationRef);18 chatbox.mount(document.getElementById('talkjs-container'));19});
Here you connect to TalkJS as a user with an ID of nina
, and set initial user data if she does not yet exist. You then get a reference to a conversation with an ID of new_conversation
, and set initial conversation data if it does not yet exist.
Next, create a second user, Frank, and add them to the conversation:
1Talk.ready.then(function () {2 const session = new Talk.Session({3 appId: '<APP_ID>',4 userId: 'nina',5 });6 session.currentUser.createIfNotExists({7 name: 'Nina',9 photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',10 welcomeMessage: 'Hi!',11 });1213 const otherRef = session.user('frank');14 otherRef.createIfNotExists({15 name: 'Frank',17 photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',18 welcomeMessage: 'Hey, how can I help?',19 });2021 const conversationRef = session.conversation('new_conversation');22 conversationRef.createIfNotExists();23 conversationRef.participant(otherRef).createIfNotExists();2425 const chatbox = session.createChatbox();26 chatbox.select(conversationRef);27 chatbox.mount(document.getElementById('talkjs-container'));28});
In this updated code, you get a reference to the other user, frank
, and set initial user data if he does not yet exist. You then get a reference to the frank
participant in the conversation, and create the participant if it does not already exist, adding frank
to the conversation.
You should now see something like the following:
If you prefer, you can instead create and sync users or conversations from your backend with our REST API. If you want to only sync users or conversations with the REST API, you can disable syncing in the browser. See Browser Synchronization for more details.
In this guide, you've added powerful user-to-user chat to your Angular app. You also learned more about the fundamentals of TalkJS, and how it all fits together.
Most importantly, you've built a starting point to try out all the features TalkJS offers. For example, you could create a new UI theme in the Theme Editor, customize your chat with action buttons or HTML panels, or enable email notifications.
Before you go live, make sure you enable authentication. Authentication keeps your user data secure, by ensuring that only legitimate users can connect to your chat. For details, see: Authentication.
Here's what your final TalkJS chat component should look like, in full:
1import { Component } from '@angular/core';23import Talk from 'talkjs';45@Component({6 selector: 'app-chat',7 standalone: true,8 imports: [],9 template: `10 <div id="talkjs-container" style="height: 600px">Loading chats..</div>11 `,12 styles: '',13})14export class ChatComponent {15 constructor() {16 Talk.ready.then(function () {17 const session = new Talk.Session({18 appId: '<APP_ID>',19 userId: 'nina',20 });21 session.currentUser.createIfNotExists({22 name: 'Nina',24 photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',25 welcomeMessage: 'Hi!',26 });2728 const otherRef = session.user('frank');29 otherRef.createIfNotExists({30 name: 'Frank',32 photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',33 welcomeMessage: 'Hey, how can I help?',34 });3536 const conversationRef = session.conversation('new_conversation');37 conversationRef.createIfNotExists();38 conversationRef.participant(otherRef).createIfNotExists();3940 const chatbox = session.createChatbox();41 chatbox.select(conversationRef);42 chatbox.mount(document.getElementById('talkjs-container'));43 });44 }45}
For full working code for this example, see the Angular getting started guide example GitHub repo.