<t-chatbox>

The t-chatbox web component represents a chatbox UI for a single conversation, and integrates with the user's TalkJS session..

Properties

app-id
: string Required

Your app's unique TalkJS ID. You can find it on the Settings page of the TalkJS dashboard.

user-id
: string Required

The ID of the current user.

conversation-id
: string Required

The ID of the conversation to display.

theme
: string

Optional. The name of the theme to apply to the chatbox. By default, the default theme is used. You can customize the chatbox's appearance and aspects of its behavior by using a custom theme. See Customize your theme.

token
: string

A token to authenticate the session with. See the Authentication guide and Token reference for details and examples.

Required when authentication is enabled, otherwise optional.

enterSendsMessage
: boolean

Optional. When set to true, pressing the Enter key sends the message, as long as there's text in the message field. When set to false, the only way to send a message is by clicking the Send button. Defaults to true.

chat-header-visible
: boolean

Optional. Sets whether the chat header is visible. Defaults to true.

message-field-visible
: boolean

Optional. Sets whether the message input field is visible. Defaults to true.

message-field-spellcheck
: boolean

Optional. Sets whether spellcheck is enabled in the message field. Defaults to false.

message-field-placeholder
: string

Optional. Adds custom placeholder text for the message input field. The default placeholder text is "Say something...".

Examples

The following gives some examples of how to use the t-chatbox component.

Create a chatbox with an existing user and conversation

Create a chatbox and pass it an existing user and conversation:

1<t-chatbox
2  app-id="<APP_ID>"
3  user-id="sample_user_alice"
4  conversation-id="sample_conversation"
5/>

Create a chatbox with a new user and conversation

Install the @talkjs/core package, which lets you read, subscribe to, and update your chat data:

1npm install @talkjs/core

Import the @talkjs/core package into the component where you want to use it:

1import { getTalkSession } from '@talkjs/core';

Then create the session, user, and conversation:

1appId = '<APP_ID>';
2userId = 'sebastian';
3conversationId = 'my_conversation';
4session: TalkSession | null = null;
5

6ngOnInit() {
7  this.session = getTalkSession({
8    appId: this.appId,
9    userId: this.userId,
10  });
11  this.session.currentUser.createIfNotExists({ name: 'Sebastian' });
12  const conversation = this.session.conversation(this.conversationId);
13  conversation.createIfNotExists();
14}

Pass the new user and conversation to your chatbox:

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

If you're using web components without a package manager, see the following guide.

Hide the chat header

Hide the chat header:

1<t-chatbox
2  app-id="<APP_ID>"
3  user-id="sample_user_alice"
4  conversation-id="sample_conversation"
5  [chat-header-visible]="false"
6/>

If you hide the chat header, other UI elements remain visible by default.

Respond to events

Respond to a sent message event by printing details to the console:

1// chat.component.html
2<t-chatbox
3  app-id="<APP_ID>"
4  user-id="sample_user_alice"
5  conversation-id="sample_conversation"
6  (sendMessage)="onSendMessage($event)"
7></t-chatbox>
8

9// chat.component.ts
10onSendMessage(event: any): void {
11  console.log('Message sent:', event.message);
12}