Angular

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

• A TalkJS account
• An Angular app to which you'd like to add TalkJS chat

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

1npm install @talkjs/web-components

If you'd like to use a custom theme instead of the default theme, see: Customize your theme.

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

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

JavaScript
1import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // Import the custom elements schema
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  styleUrl: './app.component.css',
10  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Add the custom elements schema to 'schemas'
11})
12export class AppComponent {
13  title = 'angular';
14
15  appId = '<APP_ID>';
16}

1<div class="wrapper">
2  <t-chatbox
3    [app-id]="appId"
4    user-id="sample_user_alice"
5    conversation-id="sample_conversation"
6  />
7</div>

1.wrapper {
2  width: 400px;
3  height: 600px;
4}

1ng serve

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 setup>
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  styleUrl: './app.component.css',
6  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the custom elements schema to 'schemas'
7})
8export class AppComponent {
9  title = 'angular';
10
11  appId = '<APP_ID>';
12  userId = 'frank';
13  otherUserId = 'nina';
14  conversationId = 'my_conversation';
15  session: TalkSession | null = null;
16
17  ngOnInit() {
18    this.session = getTalkSession({
19      appId: this.appId,
20      userId: this.userId,
21    });
22    this.session.currentUser.createIfNotExists({ name: 'Frank' });
23    this.session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });
24    const conversation = this.session.conversation(this.conversationId);
25    conversation.createIfNotExists();
26    conversation.participant(this.otherUserId).createIfNotExists();
27  }
28}

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  [app-id]="appId"
3  [user-id]="userId"
4  [conversation-id]="conversationId"
5/>

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  styleUrl: './app.component.css',
11  schemas: [CUSTOM_ELEMENTS_SCHEMA],
12})
13export class AppComponent {
14  title = 'angular';
15
16  appId = '<APP_ID>';
17  userId = 'frank';
18  otherUserId = 'nina';
19  conversationId = 'my_conversation';
20  session: TalkSession | null = null;
21
22  ngOnInit() {
23    this.session = getTalkSession({
24      appId: this.appId,
25      userId: this.userId,
26    });
27    this.session.currentUser.createIfNotExists({ name: 'Frank' });
28    this.session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });
29    const conversation = this.session.conversation(this.conversationId);
30    conversation.createIfNotExists();
31    conversation.participant(this.otherUserId).createIfNotExists();
32  }
33}

Tou can change any aspect of your chat to match your own style, giving you full control over the look and feel of your chat UI.

First, adjust your CSS import like so:

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

Download the theme files from our open source theme-default GitHub repo. Then, extract the files and add them to your own source code. Update your imports to point at the downloaded files:

1import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2import '@talkjs/web-components';
3import '@talkjs/web-components/base.css';
4import * as customTheme from './customTheme';
5import './customTheme/index.css';

Pass the custom theme to the chatbox:

1@Component({
2  selector: 'app-root',
3  standalone: true,
4  templateUrl: './app.component.html',
5  styleUrl: './app.component.css',
6  schemas: [CUSTOM_ELEMENTS_SCHEMA],
7})
8export class AppComponent {
9  title = 'angular';
10  theme = customTheme;
11}

1<t-chatbox
2  [app-id]="appId"
3  [user-id]="userId"
4  [conversation-id]="conversationId"
5  [theme]="theme"
6/>

You can now customize any aspect of your theme by editing the CSS and JavaScript files of the individual components in the src folder directly.

For styling changes, edit the CSS files. For example, to give message field a different background color, you can edit the MessageField.css file. If you change background-color: #ececec to background-color: lightblue, then the message field gets a light blue background color:

For behavior changes, edit the JavaScript files. For example, to add a new message action, add the following to the MessageActionMenu.js file:

1return html`
2  <div className="t-theme-message-action-menu">
3    ${permissions.canReply &&
4    html`<button t-action="reply" onClick=${() => setReferencedMessage(message.id)}>${t.REPLY_TO_MESSAGE}</button>`}
5    ${permissions.canDelete &&
6    html`<button t-action="delete" onClick=${() => chatbox.deleteMessage(message.id)}>${t.DELETE_MESSAGE}</button>`}
7    <button t-action="example" onClick=${() => console.log('This is an example message action')}>
8      Example message action
9    </button>
10  </div>
11`;

You should now see Example message action in the message action menu for your messages:

Check your browser console, and you should see "This is an example message action" logged to the console.

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  app-id="<APP_ID>"
3  user-id="sample_user_alice"
4  conversation-id="sample_conversation"
5  [theme]="theme"
6  [token]="token
7/>

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.

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