Angular
Preview
Components v2 is under development, but already safe to use in production.
It currently only offers limited features. Only the chatbox chat UI is currently available, not the inbox or popup. New capabilities are added on a rolling basis.
Components v2 lets you fully customize the appearance and behavior of your chat with web components. In this guide we'll show you how to add a chatbox component to your app and customize its theme.
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/components
, along with the @talkjs/theme-default
theme and the react
and react-dom
dependencies:
1npm install @talkjs/components @talkjs/theme-default react react-dom
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.
First, import the components and theme into an Angular component, for example in the src/app/app.component.ts
file:
1import '@talkjs/components/web';2import * as defaultTheme from '@talkjs/theme-default';3import '@talkjs/components/style.css';4import '@talkjs/theme-default/style.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:
JavaScript1import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // Import the custom elements schema2import '@talkjs/components/web';3import * as defaultTheme from '@talkjs/theme-default';4import '@talkjs/components/style.css';5import '@talkjs/theme-default/style.css';67@Component({8 selector: 'app-root',9 standalone: true,10 templateUrl: './app.component.html',11 styleUrl: './app.component.css',12 schemas: [CUSTOM_ELEMENTS_SCHEMA] // Add the custom elements schema to 'schemas'13})14export class AppComponent {15 title = 'angular';16 theme = defaultTheme;1718 appId = '<APP_ID>';19}
Next, add the t-chatbox
web component to the HTML template file of your Angular component:
1<div class="wrapper">2 <t-chatbox3 [app-id]="appId"4 user-id="sample_user_alice"5 conversation-id="sample_conversation"6 [theme]="theme"7 />8</div>
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
.theme
: the theme you want to use. In this case we've imported the default theme.
Finally, add the following styles for the chatbox to the CSS file for your Angular component:
1.wrapper {2 width: 400px;3 height: 600px;4}
To view the chat, run your app:
1ng serve
You should get something like the following:
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.
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 TalkJS Core.
Install the @talkjs/core
package:
1npm install @talkjs/core
Then import the TalkSession
from the package into your component:
1<script setup>2 import '@talkjs/components/web';3 import * as defaultTheme from '@talkjs/theme-default';4 import { TalkSession } from '@talkjs/core';5 import '@talkjs/components/style.css';6 import '@talkjs/theme-default/style.css';7</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 theme = defaultTheme;1112 appId = '<APP_ID>';13 userId = 'frank';14 otherUserId = 'nina';15 conversationId = 'my_conversation';16 session: TalkSession | null = null;1718 ngOnInit() {19 this.session = new TalkSession({20 appId: this.appId,21 userId: this.userId,22 });23 this.session.currentUser.createIfNotExists({ name: 'Frank' });24 this.session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });25 const conversation = this.session.conversation(this.conversationId);26 conversation.createIfNotExists();27 conversation.participant(this.otherUserId).createIfNotExists();28 }2930 ngOnDestroy() {31 if (this.session) {32 this.session.destroy();33 }34 }35}
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-chatbox2 [app-id]="appId"3 [user-id]="userId"4 [conversation-id]="conversationId"5 [theme]="theme"6/>
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/components/web';3import * as defaultTheme from '@talkjs/theme-default';4import { TalkSession } from '@talkjs/core';5import '@talkjs/components/style.css';6import '@talkjs/theme-default/style.css';78@Component({9 selector: 'app-root',10 standalone: true,11 templateUrl: './app.component.html',12 styleUrl: './app.component.css',13 schemas: [CUSTOM_ELEMENTS_SCHEMA],14})15export class AppComponent {16 title = 'angular';17 theme = defaultTheme;1819 appId = '<APP_ID>';20 userId = 'frank';21 otherUserId = 'nina';22 conversationId = 'my_conversation';23 session: TalkSession | null = null;2425 ngOnInit() {26 this.session = new TalkSession({27 appId: this.appId,28 userId: this.userId,29 });30 this.session.currentUser.createIfNotExists({ name: 'Frank' });31 this.session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });32 const conversation = this.session.conversation(this.conversationId);33 conversation.createIfNotExists();34 conversation.participant(this.otherUserId).createIfNotExists();35 }3637 ngOnDestroy() {38 if (this.session) {39 this.session.destroy();40 }41 }42}
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.
Download the theme files from our open source theme-default
GitHub repo. Then, extract the src
folder and add it your source code. Update your imports to point at the downloaded files:
1import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';2import '@talkjs/components/web';3import * as customTheme from './src';4import '@talkjs/components/style.css';5import './src/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}
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 action9 </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-chatbox2 app-id="<APP_ID>"3 user-id="sample_user_alice"4 conversation-id="sample_conversation"5 [theme]="theme"6 [token]="token7/>
You also need to pass the token to your session:
1this.session = new TalkSession({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.