# Web Components for TalkJS

The `@talkjs/web-components` library provides chat UI components for [TalkJS](https://talkjs.com).

## Prerequisites

To use this package, you will need a [TalkJS account](https://talkjs.com/dashboard/login). TalkJS provides a ready-to-use chat client for your application. Your account gives you access to TalkJS's free development environment.

## Examples

Install [`@talkjs/web-components`](https://www.npmjs.com/package/@talkjs/web-components) and [`@talkjs/core`](https://www.npmjs.com/package/@talkjs/core):

```sh
npm install @talkjs/web-components @talkjs/core
# or
yarn add @talkjs/web-components @talkjs/core
```

Import from `@talkjs/web-components` to register the `<t-chatbox>` custom element. Also import the related styling into the component where you want to have your chat UI:

```js
import "@talkjs/web-components";
import "@talkjs/web-components/default.css";
```

Then add the `Chatbox` component:

```html
<t-chatbox
  app-id="<APP_ID>"
  user-id="sample_user_alice"
  conversation-id="sample_conversation"
></t-chatbox>
```

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](https://talkjs.com/docs/UI_Components/Vue/), [Angular](https://talkjs.com/docs/UI_Components/Angular/), [Svelte](https://talkjs.com/docs/UI_Components/Svelte/).

## Support

If you encounter any problems with `@talkjs/web-components`, please open a [chat with support](https://talkjs.com/?chat). TalkJS support is staffed by engineers.