Livechat Widget Development and Customization

Development

Changing LiveChat Host.

One of the very first things to do while developing the LiveChat widget is to make sure it points directly to your running RocketChat server.
To select a different host for your local widget, navigate in the project directory to the /src/api.js file.
1
const host = window.SERVER_URL
2
|| queryString.parse(window.location.search).serverUrl
3
|| (process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : null);
Copied!
You can modify to your server's URL.
1
const host = window.SERVER_URL
2
|| queryString.parse(window.location.search).serverUrl
3
|| (process.env.NODE_ENV === 'development' ? 'https://your.rocketserver.com' : null);
Copied!

Available CLI Commands

1
# install dependencies
2
yarn
3
4
# serve with hot reload at localhost:8080
5
yarn start
6
7
# build preact application to "build" folder
8
yarn dev
9
10
# build for production with minification
11
yarn build
12
13
# test the production build locally
14
yarn serve
15
16
# run tests with jest and preact-render-spy
17
yarn test
18
19
# run the storybook
20
yarn storybook
21
22
# before commit run
23
yarn i18n
Copied!

Customization

The Livechat widget can be fully customized using following our Storybook components.
You can use the Livechat Widget API to extend functionalities.
Last modified 19d ago