@talkjs/components

Components v2 for TalkJS

The @talkjs/components library provides chat UI components for TalkJS.

The library provides both React components and web components. You can use web components with any frontend framework, such as Angular, Vue or Svelte.

Prerequisites

To use this package, you will need a TalkJS account. TalkJS provides a ready-to-use chat client for your application. Your account gives you access to TalkJS's free development environment.

Examples

The following examples show you how to add a chatbox to your app with either React components or web components.

React components

Install both @talkjs/components and the @talkjs/theme-default package:

npm install @talkjs/components @talkjs/theme-default
# or
yarn add @talkjs/components @talkjs/theme-default

Import the Chatbox component, theme, and the related styling into the component where you want to have your chat UI:

import { Chatbox } from "@talkjs/components/react";
import * as defaultTheme from "@talkjs/theme-default";
import "@talkjs/components/style.css";
import "@talkjs/theme-default/style.css";

Then add the Chatbox component:

<Chatbox
  appId="<APP_ID>"
  userId="sample_user_alice"
  conversationId="sample_conversation"
  theme={defaultTheme}
/>

Replace the <APP_ID> with your TalkJS app ID, which you can find in the Settings tab of the TalkJS dashboard.

For more details, see our React getting started guide.

Web components

Install both @talkjs/components and the @talkjs/theme-default package. You'll also need react and react-dom because TalkJS Components are built with React.

npm install @talkjs/components @talkjs/theme-default react react-dom
# or
yarn add @talkjs/components @talkjs/theme-default react react-dom

Import the Chatbox component, theme, and the related styling into the component where you want to have your chat UI:

import "@talkjs/components/web";
import * as defaultTheme from "@talkjs/theme-default";
import "@talkjs/components/style.css";
import "@talkjs/theme-default/style.css";

Then add the t-chatbox component. For example, in Vue you can add the following:

<t-chatbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  conversation-id="sample_conversation"
  :theme="defaultTheme"
/>

Replace the <APP_ID> with your TalkJS app ID, which you can find in the Settings tab of the TalkJS dashboard.

For more details, see our framework-specific guides: Vue, Angular, Svelte.

Support

If you encounter any problems with @talkjs/components, please open a chat with support. TalkJS support is staffed by engineers.