Livechat Widget Development and Customization


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.
const host = window.SERVER_URL
|| queryString.parse(
|| (process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : null);
You can modify to your server's URL.
const host = window.SERVER_URL
|| queryString.parse(
|| (process.env.NODE_ENV === 'development' ? '' : null);

Available CLI Commands

# install dependencies
# serve with hot reload at localhost:8080
yarn start
# build preact application to "build" folder
yarn dev
# build for production with minification
yarn build
# test the production build locally
yarn serve
# run tests with jest and preact-render-spy
yarn test
# run the storybook
yarn storybook
# before commit run
yarn i18n


The Livechat widget can be fully customized using our Storybook components.
You can use the Livechat Widget API to extend functionalities.