Angular

This guide will help you to quickly add the TalkJS Inbox to your Angular application. You might also want to read our end-to-end Angular tutorial:

Get your appId

To get started, create an account or login to your dashboard to get your appId.

Install TalkJS

Add TalkJS to your project by installing it.

npm install talkjs --save

Create the Talk Service

First, we create a service that will contain TalkJS methods. This will make it easy to reuse these methods in any part of your application.

ng generate service talk

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

TS
import Talk from 'talkjs';

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

TS
export class TalkService {
  private currentUser: Talk.User;
}

In the service, we will 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

Let's 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 we can display it inside the chat UI. Let's add a method to the service that maps a user object from your app to a Talk.User:

TS
async createUser(applicationUser: any) {
    await Talk.ready;
    return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.photoUrl,
      role: applicationUser.role
    });
  }

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 appId gotten from your dashboard and the current TalkJS user. We will use a hardcoded value for the current user in this case but remember to change it to use the current user logged in into your application.

TS
async createCurrentSession() {
    await Talk.ready;
    const user = {
      id: 1,
      username: 'Alice',
      email: '[email protected]',
      photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
      welcomeMessage: 'Hey there! How are you? :-)',
      role: 'default'
    };
    this.currentUser = await this.createUser(user);
    const session = new Talk.Session({
         appId: 'YOUR_APP_ID',
         me: this.currentUser
    });
    return session;
  }

Remember to replace YOUR_APP_ID with the appId found in the TalkJS dashboard.

Create a Conversation

Next, we create a conversation. The getOrCreateConversation method attempts to get the conversation between the two users if it exists already or create a new one otherwise.

TS
private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: any) {
    const otherUser = await this.createUser(otherApplicationUser);
    const conversation = session.getOrCreateConversation(Talk.oneOnOneId(this.currentUser, otherUser));
    conversation.setParticipant(this.currentUser);
    conversation.setParticipant(otherUser);
    return conversation;
  }

The Talk.oneOnOneId method predictably computes a Conversation ID based on participants' ids. Use this method if you want to simply create a conversation between two users. You may want to create a group conversation or generate a conversation ID associated with a transaction that happened on your platform e.g. a purchase. You can find how to do that here.

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 this method. We added another hardcoded user in the method to serve as the other application user.

TS
async createInbox(session: Talk.Session) {
    const otherApplicationUser = {
      id: 5,
      username: 'Lo',
      email: '[email protected]',
      photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
      welcomeMessage: 'Hey, how can I help?',
      role: 'default'
    };


    const conversation = await this.getOrCreateConversation(session, otherApplicationUser);
    const inbox = session.createInbox();
    inbox.select(conversation);
    return inbox;
 }

Now, we can import this service we just created in any component and use the methods.

Using the Talk Service in a Component

For this section, we'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, we add the element we want to mount the inbox on.

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

The #talkjsContainer lets us refer to the element in our component code.

Import the Talk service

Next, we import the Talk Service we created into the Component file app.component.ts and initialize it in the constructor method. We also import OnInit, ViewChild and ElementRef which we will use in the component.

TS
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { TalkService } from 'src/app/talk.service';
import Talk from 'talkjs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  private inbox: Talk.Inbox;
  private session: Talk.Session;


  constructor(private talkService: TalkService) {}
}

Mount the Inbox

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

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

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

TS
ngOnInit() {
    this.createInbox();
  }


  private async createInbox() {
    const session = await this.talkService.createCurrentSession();
    this.inbox = await this.talkService.createInbox(session);
    this.inbox.mount(this.talkjsContainer.nativeElement);
  }

That is it, the inbox should be running on your app now. Here is the final result and the full code for this.

Click on the result tab to see the Inbox. Go ahead, have a chat with Lo. 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.

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

Next, you can learn how to add notifications!