Getting started

This guide will help you quickly add TalkJS to your Angular app and create a chat between two users, using TalkJS Web Components. These are highly customizable chat UI components, with excellent support for Angular apps. We'll use it alongside the JavaScript Data API, which we'll use for data manipulation tasks like synchronizing users and conversations.

In the guide we'll walk you through installing TalkJS, viewing an existing conversation, creating new users and conversations, customizing the UI, and properly securing it all.

Prerequisites

To make the most of this guide, you will need:

Installation

To get started, install @talkjs/web-components:

1npm install @talkjs/web-components

View a conversation

To view an existing sample conversation, import the components and theme into an Angular component, and add the chatbox and styling.

Add components and theme

First, import the components and theme into an Angular component, for example in the src/app/app.component.ts file:

1import '@talkjs/web-components';
2import '@talkjs/web-components/default.css';

To make sure that Angular recognizes the web components, add CUSTOM_ELEMENTS_SCHEMA to the @Component.schemas array of the Angular component to which you're adding the chat. For example as follows:

1import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2import '@talkjs/web-components';
3import '@talkjs/web-components/default.css';
4

5@Component({
6  selector: 'app-root',
7  standalone: true,
8  templateUrl: './app.component.html',
9  schemas: [CUSTOM_ELEMENTS_SCHEMA] 
10})
11export class AppComponent {
12  title = 'angular';
13  appId = '<APP_ID>';
14}

Add the chatbox

Next, add the t-chatbox web component to the HTML template file of your Angular component:

1<t-chatbox
2  style="width: 400px; height: 600px;"
3  [app-id]="appId"
4  user-id="sample_user_alice"
5  conversation-id="sample_conversation"
6/>

The t-chatbox web component has the following attributes:

  • appId: Your TalkJS app ID. You can find your app ID on the Settings page of your TalkJS dashboard. For this tutorial, use the app ID for your test mode, which has built-in sample users and conversations.
  • userId: An identifier for the a current user to send messages as. This example uses the ID of an existing sample user, sample_user_alice.
  • conversationId: An identifier of the conversation that you want to view. This example uses the ID for a built-in sample conversation, sample_conversation.

View an example

To view the chat, run your app:

1ng serve

You should get something like the following:

Chatbox showing a message from Sebastian

You now have a fully-featured chat window running in your Angular app. Try sending a message!

To view the conversation as a different user, change the userId. For example, try switching the userId to sample_user_sebastian to view the other side of the sample conversation.

If the chat window doesn't show up, make sure that you've entered your app ID correctly.

Create new users and conversations

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. To do this, we'll use the JavaScript Data API.

Install the @talkjs/core package:

1npm install @talkjs/core

Then import getTalkSession from the package into your component:

1<script>
2  import '@talkjs/web-components';
3  import '@talkjs/web-components/default.css';
4  import { getTalkSession, type TalkSession } from '@talkjs/core';
5</script>

Add the following code to your component:

1@Component({
2  selector: 'app-root',
3  standalone: true,
4  templateUrl: './app.component.html',
5  schemas: [CUSTOM_ELEMENTS_SCHEMA],
6})
7export class AppComponent {
8  title = 'angular';
9  appId = '<APP_ID>';
10  userId = 'frank';
11  otherUserId = 'nina';
12  conversationId = 'my_conversation';
13  session: TalkSession | null = null;
14

15  ngOnInit() {
16    this.session = getTalkSession({
17      appId: this.appId,
18      userId: this.userId,
19    });
20    this.session.currentUser.createIfNotExists({ name: 'Frank' });
21    this.session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });
22    const conversation = this.session.conversation(this.conversationId);
23    conversation.createIfNotExists();
24    conversation.participant(this.otherUserId).createIfNotExists();
25  }
26}

As before, replace <APP_ID> with your TalkJS app ID.

This code creates a new TalkJS session, which provides access to a continuous, up-to-date flow of your TalkJS data. It then creates two new users and a conversation between them.

Update the t-chatbox component in your HTML template file to use the new variables:

1<t-chatbox
2  style="width: 400px; height: 600px;"
3  [app-id]="appId"
4  [user-id]="userId"
5  [conversation-id]="conversationId"
6/>

Code example

Here's the code so far, so that you can see how it all fits together:

1import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2import '@talkjs/web-components';
3import '@talkjs/web-components/default.css';
4import { getTalkSession, type TalkSession } from '@talkjs/core';
5

6@Component({
7  selector: 'app-root',
8  standalone: true,
9  templateUrl: './app.component.html',
10  schemas: [CUSTOM_ELEMENTS_SCHEMA],
11})
12export class AppComponent {
13  title = 'angular';
14

15  appId = '<APP_ID>';
16  userId = 'frank';
17  otherUserId = 'nina';
18  conversationId = 'my_conversation';
19  session: TalkSession | null = null;
20

21  ngOnInit() {
22    this.session = getTalkSession({
23      appId: this.appId,
24      userId: this.userId,
25    });
26    this.session.currentUser.createIfNotExists({ name: 'Frank' });
27    this.session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });
28    const conversation = this.session.conversation(this.conversationId);
29    conversation.createIfNotExists();
30    conversation.participant(this.otherUserId).createIfNotExists();
31  }
32}

Customizing TalkJS

The easiest way to customize TalkJS's components, is using the props and events that the components expose. See each component’s reference documentation for a list of available props.

As an example if you want to hide the built-in chat header, because it doesn't work well with the rest of your UI, you'd render the chatbox like this:

1<t-chatbox
2  style="width: 400px; height: 600px;"
3  [app-id]="appId"
4  [user-id]="userId"
5  [conversation-id]="conversationId"
6  [chat-header-visible]="false"
7/>

If you need even more flexibility, TalkJS has an extensive theme system, which lets you adapt the styles, markup and behavior of the entire chat UI. See the Customization guide for more details.

Add authentication

Once you're using TalkJS in production you'll need to enable authentication, so that only legitimate users can connect to your chat. You'll need a backend server that can generate tokens for your users to authenticate with. See our Authentication docs for more detail on how to set this up.

To pass the token to your chatbox, add the token property:

1<t-chatbox
2  style="width: 400px; height: 600px;"
3  app-id="<APP_ID>"
4  user-id="sample_user_alice"
5  conversation-id="sample_conversation"
6  [theme]="theme"
7  [token]="token
8/>

You also need to pass the token to your session:

1this.session = getTalkSession({
2  appId: this.appId,
3  userId: this.userId,
4  token: this.token,
5});

The token is different each time you connect to TalkJS, so you'll need to call your backend to generate it.

Once you are happy that your chat is loading without errors when you provide a token, go the the Settings page of your dashboard and enable the Authentication (identity verification) option in the Security settings section. When authentication is enabled, only users with a valid token can connect to your chat.

Next steps

For more ways to customize your chat, see our Chatbox reference docs.