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.
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 accessinghttp://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.