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.
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.
The following examples show you how to add a chatbox to your app with either React components or web 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.
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.
If you encounter any problems with @talkjs/components
, please open a chat with support. TalkJS support is staffed by engineers.