Rocket Chat Livechat Environment Setup

This documentation will guide you through setting up your Rocket.Chat Omnichannel Livechat development environment.

Prerequisites

Ensure you have the following installed on your device.

Git
Node.js
Yarn is recommended instead of npm.

Set up Livechat

This Livechat platform is a minimal, lightweight application developed with Preact. It is a critical feature of Rocket.Chat Omnichannel capability as it facilitates communication between your agents and visitors.

This setup is done assuming you have a Rocket.Chat server running. We will use a local instance at http://localhost:3000 for this guide.

To set up the Omnichannel Livechat,

Clone the Livechat source code from the GitHub repository by running this command:
```
git clone https://github.com/RocketChat/Rocket.Chat.git
```
Navigate to the Livechat folder in the cloned directory.
```
cd Rocket.Chat
cd packages/livechat
```
Install dependencies by running:
```
yarn
```
You can check the recommended version of node and yarn in the package.json file in the root directory.
Compile the Preact application to the /build folder by running:
```
yarn dev
```
In another terminal, start the development server with hot reload capabilities on http://localhost:8080:
```
yarn start
```
Open the widget-demo.html file in your browser by accessing http://localhost:8080/widget-demo.html. You should see a page with the Livechat initiation icon at the bottom right, as shown in the following screenshots:

For better performance, you can run this widget-demo.html on an HTTP server.

This example uses local instance. To select a different host for your local widget, navigate to the /src/api.ts file in the project directory. Within the file, look for the server URL, which by default should be http://localhost:3000, and change it to your desired host.

Available CLI commands

# install dependencies
yarn

# 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 the storybook
yarn storybook

Livechat customization

The Livechat widget can be fully customized using the Storybook components. To extend its functionalities, you can also use the LiveChat Widget API.