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.
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.
If you're using React, install the @talkjs/react-components package, along with react and react-dom:
1npm install @talkjs/react-components react react-dom
If you're using another framework, install the @talkjs/web-components package instead:
1npm install @talkjs/web-components
Import these packages into the component where you have your chat UI:
1import { Chatbox } from '@talkjs/react-components';2import '@talkjs/react-components/default.css';
First, adjust your CSS import like so:
1- import '@talkjs/web-components/default.css';2+ import '@talkjs/web-components/base.css';
Download the theme files from our open source theme-default GitHub repo. Then, extract the files and add them to your own source code. Update your imports to point at the downloaded files:
1import '@talkjs/web-components';2import '@talkjs/web-components/base.css';34// Use the path to the files you copied5import * as customTheme from './customTheme';6import './customTheme/index.css';
You can then modify the files to customize the chat to your liking.
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.
Include the components and theme in the <head> tag of the HTML page where you want to add your chat UI:
1<link2 rel="stylesheet"4/>5<script7 async8></script>