This guide helps you add the TalkJS inbox chat UI to your Angular app.

Get your app ID

To get started, create a TalkJS account or login to your dashboard. You can get your app ID from the Settings page of the dashboard.

Install TalkJS

Add TalkJS to your project by installing it.

1npm install talkjs --save

Create the Talk service

First, create a service that contains TalkJS methods. This make it easier to reuse these methods in any part of your application.

1ng generate service talk

Next, import TalkJS into the service you just created. Add the following code in the talk.service.ts file.

1import Talk from 'talkjs';

You also want to declare a variable for the current user in the service. This way all methods can have access to it.

1export class TalkService {
2 private currentUser: Talk.User;

In the service, add methods that will do the following:

  1. Create a TalkJS user
  2. Create a TalkJS session
  3. Get or create a TalkJS conversation
  4. Create the Inbox

Start with the first.

Create a TalkJS user

The first step is to create a TalkJS user. The Talk.User object is used to synchronize user data with TalkJS, so you can display it inside the chat UI. Add a method to the service that maps a user object from your app to a Talk.User:

1async createUser(applicationUser: any) {
2 await Talk.ready;
3 return new Talk.User({
4 id:,
5 name: applicationUser.username,
6 photoUrl: applicationUser.photoUrl,
7 role: applicationUser.role
8 });
9 }

Be sure to change the applicationUser type to your application's user type and edit the code accordingly.

Create a TalkJS session

A session represents a user's active browser tab. It also authenticates your app with TalkJS. To create a session, you need your app ID, which you can get from the Settings page of your TalkJS dashboard, and the current TalkJS user. Here you'll use a hard-coded value for the current user, but remember to change it to use the current user logged in to your application.

1async createCurrentSession() {
2 await Talk.ready;
3 const user = {
4 id: 1,
5 username: 'Alice',
6 email: '[email protected]',
7 photoUrl: '',
8 welcomeMessage: 'Hey there! How are you? :-)'
9 };
10 this.currentUser = await this.createUser(user);
11 const session = new Talk.Session({
12 appId: '<APP_ID>',
13 me: this.currentUser
14 });
15 return session;
16 }

You'll need to replace <APP_ID> with your TalkJS App ID. You can find your App ID in the Settings tab of the TalkJS dashboard. For this tutorial, we recommend using the App ID for TalkJS's Test Mode.

Create a conversation

Next, create a conversation. Use the getOrCreateConversation method to get the conversation between the two users if the conversation already exists, or otherwise to create a new conversation.

1private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: any) {
2 const otherUser = await this.createUser(otherApplicationUser);
3 const conversation = session.getOrCreateConversation(Talk.oneOnOneId(this.currentUser, otherUser));
4 conversation.setParticipant(this.currentUser);
5 conversation.setParticipant(otherUser);
6 return conversation;
7 }

The Talk.oneOnOneId method computes a conversation ID based on participants' IDs. Use this method if you want to create a conversation between only two users. You may want to create a group conversation or generate a conversation ID associated with a transaction that happened on your platform, for example a purchase. You can find how to do that in the documentation of the conversation ID.

Create the inbox

The inbox is one of the UI types of TalkJS. It shows a user's conversation history and it allows them to write messages. To create the inbox, add the following method. The method contains another hard-coded user to serve as the other application user.

1async createInbox(session: Talk.Session) {
2 const otherApplicationUser = {
3 id: 5,
4 username: 'Lo',
5 email: '[email protected]',
6 photoUrl: '',
7 welcomeMessage: 'Hey, how can I help?'
8 };
10 const conversation = await this.getOrCreateConversation(session, otherApplicationUser);
11 const inbox = session.createInbox();
13 return inbox;
14 }

Now you can import the service you just created in any component and use the methods.

Using the Talk service in a component

For this section, you'll use the talk service in the app component. Remember that you can repeat these steps in any component.

Add an element to mount the Inbox

In the HTML file of the component app.component.html, add the element you want to mount the inbox on.

1<div #talkjsContainer style="height: 500px">Loading...</div>

The #talkjsContainer lets you refer to the element in your component code.

Import the Talk service

Next, import the Talk Service you created into the component file app.component.ts and initialize it in the constructor method. Also import OnInit, ViewChild and ElementRef which you'll use in the component.

1import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
2import { TalkService } from 'src/app/talk.service';
3import Talk from 'talkjs';
6 selector: 'app-root',
7 templateUrl: './app.component.html',
8 styleUrls: ['./app.component.css'],
10export class AppComponent implements OnInit {
11 private inbox: Talk.Inbox;
12 private session: Talk.Session;
14 constructor(private talkService: TalkService) {}

Mount the inbox

First, add a view query to reference the element you added to the HTML file. In the app.component.ts file, add the following:

1@ViewChild('talkjsContainer') talkjsContainer!: ElementRef;

Next, add a method to use the service methods you created earlier to create the inbox and mount it on the HTML element you added. Then call this method in the ngOnInit lifecycle hook.

1ngOnInit() {
2 this.createInbox();
3 }
5 private async createInbox() {
6 const session = await this.talkService.createCurrentSession();
7 this.inbox = await this.talkService.createInbox(session);
8 this.inbox.mount(this.talkjsContainer.nativeElement);
9 }

That's it. The inbox should now be running on your app.

See our runnable example for the final result and the full code for this application. Select the result tab to see the Inbox, and try chatting with Lo.

You can find several examples for different use cases in Angular on the TalkJS examples repository on GitHub.

Next, you can learn how to add notifications.