Installation

The recommended way of installing Components is to install it with a package manager.

If you use JavaScript without a build step and this is not possible, you can include our libraries in your HTML <head> tag.

Install with a package manager

You can install one of our pre-built themes, or install our base custom theme and then edit it to get the style you want.

Install components with a pre-built theme

If you're using React, install both @talkjs/theme-default and the @talkjs/components package:

1npm install @talkjs/components @talkjs/theme-default

If you're using another framework, you'll also need to add the react and react-dom dependencies:

1npm install @talkjs/components @talkjs/theme-default react react-dom

Import these packages into the component where you have your chat UI:

1import { Chatbox } from '@talkjs/components/react';
2import * as defaultTheme from '@talkjs/theme-default';
3import '@talkjs/components/style.css';
4import '@talkjs/theme-default/style.css';

Customize your theme

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 '@talkjs/components/web';
2import * as customTheme from './src'; // Use the path to the files you copied
3import '@talkjs/components/style.css';
4import './src/index.css';

You can then modify the files to customize the chat to your liking.

Include as scripts

We suggest installing Components with a package manager, but if this is not possible you can include our libraries as scripts.

You can use one of our pre-built themes, and edit the CSS if you want to make changes to the styling. If you want to customize the behavior of the components, you will need to use a package manager.

Use a pre-built theme

Include the components and theme in the <head> tag of the HTML page where you want to add your chat UI:

1<link
2  rel="stylesheet"
3  href="https://cdn.jsdelivr.net/npm/@talkjs/[email protected]/dist/style.standalone.css"
4/>
5<script
6  src="https://cdn.jsdelivr.net/npm/@talkjs/[email protected]"
7  async
8></script>