Frontend is a full-featured multi-user chat app bootstrapped with react-create-app and Material UI, that comunicates with backend using REST API and Websockets. It allows you to interact with contacts, tickets, send and receive WhatsApp messagees.

NOTE: I can't guarantee you will not be blocked by using this method, although it has worked for me. WhatsApp does not allow bots or unofficial clients on their platform, so this shouldn't be considered totally safe.

Motivation

I'm a SysAdmin, and in my daily work, I do a lot of support through WhatsApp. Since WhatsApp Web doesn't allow multiple users, and 90% of our tickets comes from this channel, we created this to share same whatsapp account cross our team.

How it works?

On every new message received in an associated WhatsApp, a new Ticket is created. Then, this ticket can be reached in a queue on Tickets page, where you can assign ticket to your yourself by aceppting it, respond ticket messagee and eventually resolve it.

Subsequent messages from same contact will be related to first open/pending ticket found.

If a contact sent a new message in less than 2 hours interval, and there is no ticket from this contact with pending/open status, the newest closed ticket will be reopen, instead of creating a new one.

Screenshots

Demo

Note: It's not a good idea to sync your whatsapp account is this demo enviroment, because all your received messages will be stored in database and will be accessible by everyone that access this URL and creates an account.

That said, theres not much to test without syncing an whatsapp account, since adding contacts or tickets simple throws an error if app is not synced with whatassp. I will create a better test enviroment in future.

Meanwhile, if you want to test it, remember to disconnect session and delete all tickets and contacts after your tests.

https://whaticket.economicros.com.br/login

email: demo@demo.com

password: demo123

It's online thanks to @ramphy, who provided a VPS for me to create these installation instructions.

Installation and Usage (Linux Ubuntu - Development)

Create Mysql Database using docker: Note: change dbname, username password.

docker run --name whaticketdb -e MYSQL_ROOT_PASSWORD=strongpassword -e MYSQL_DATABASE=whaticket -e MYSQL_USER=whaticket -e MYSQL_PASSWORD=whaticket --restart always -p 3306:3306 -d mariadb:latest --character-set-server=utf8mb4 --collation-server=utf8mb4_bin

Install puppeteer dependencies:

sudo apt-get install -y libgbm-dev wget unzip fontconfig locales gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils

Clone this repo
On backend folder:
- Copy .env.example to .env and fill it with database details
- Install dependecies: npm install (Only in the first time)
- Create database tables: npx sequelize db:migrate (Only in the first time)
- Start backend: npm start
In another terminal, on frontend folder:
- Copy .env.example to .env and fill it with backend URL (normally localhost:port)
- Install dependecies: npm install (Only in the first time)
- Start frontend: npm start
Go to http://your_server_ip:3000/signup
Create an user and login with it.
On the sidebard, go to Connection and read QRCode with your WhatsApp.
Done. Every message received by your synced WhatsApp number will appear in Tickets List.

Basic production deployment (Ubuntu 18.04 VPS)

You need two subdomains forwarding to youts VPS ip to follow these instructions. We'll use myapp.mydomain.com and api.mydomain.com in examples.

Update all system packages:

apt update && apt upgrade

Install node and confirm node command is available:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
npm -v

Install docker:

sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"
sudo apt update
sudo apt install docker-ce
sudo systemctl status docker

Add current user to docker group:

sudo usermod -aG docker \${USER}
su - \${USER}

Create database container (Instructions in installation)

Clone this repository:

git clone https://github.com/canove/whaticket whaticket

Create backend .env file and fill with details:

cp whaticket/backend/.env.example whaticket/backend/.env
nano whaticket/backend/.env

NODE_ENV=
BACKEND_URL=https://api.mydomain.com
PROXY_PORT=443
PORT=8080

DB_HOST=
DB_USER=
DB_PASS=
DB_NAME=

Install puppeteer dependencies(Instructions in installation)

Install backend dependencies and run migrations:

cd whaticket/backend
npm install
npx sequelize db:migrate

Start backend to confirm its working, you should see: Server started on port... on console.

Install pm2 with sudo:

sudo npm install -g pm2

Start backend with pm2:

pm2 start src/app.js --name whaticket-backend

Make pm2 auto start afeter reboot:

pm2 startup ubuntu -u YOUR_USERNAME

Copy the last line outputed from previus command and run it, its something like:

sudo env PATH=\$PATH:/usr/bin pm2 startup ubuntu -u YOUR_USERNAME --hp /home/YOUR_USERNAM

Now, lets prepare frontend:

cd ../whaticket/frontend
npm install

Edit .env file and fill it with your backend address, it should look like this:

REACT_APP_BACKEND_URL = https://api.mydomain.com/

Build frontend app:

npm run build

Start frotend with pm2:

pm2 start server.js --name whaticket-frontend

Save pm2 process list to start automatically after reboot:

pm2 save

Install nginx:

sudo apt install nginx

Remove nginx default site:

sudo rm /etc/nginx/sites-enabled/default
sudo service nginx restart

Create a new nginx site to frontend app:

sudo nano /etc/nginx/sites-available/whaticket-frontend

Edit and fill it with this information, changing server_name to yours equivalent to myapp.mydomain.com:

server {
  server_name myapp.mydomain.com;

  location / {
    proxy_pass http://127.0.0.1:3333;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
  }
}

Create another one to backend api, changing server_name to yours equivalent to api.mydomain.com, and proxy_pass to you localhost backend node server URL:

sudo cp /etc/nginx/sites-available/whaticket-frontend /etc/nginx/sites-available/whaticket-backend
sudo nano /etc/nginx/sites-available/whaticket-backend

server {
  server_name api.mydomain.com;

  location / {
    proxy_pass http://127.0.0.1:8080;
    ......
}

Create a symbolic link to enalbe nginx site:

sudo ln -s /etc/nginx/sites-available/whaticket-frontend /etc/nginx/sites-enabled
sudo ln -s /etc/nginx/sites-available/whaticket-backend /etc/nginx/sites-enabled

Test nginx configuration and restart server:

sudo nginx -t
sudo service nginx restart

Now, enable SSL (https) on your sites to use all app features like notifications and sending audio messages. A easy way to this is using Certbot:

Install certbor with snapd:

sudo snap install --classic certbot

Enable SSL on nginx (Accept all information asked):

sudo certbot --nginx

Features

Have multiple users chating in same WhatsApp Number ✅
Create and chat with new contacts without touching cellphone ✅
Send and receive message ✅
Send media (images/audio/documents) ✅
Receive media (images/audio/video/documents) ✅

Contributing

Any help and suggestions are welcome!

Disclaimer

I just started leaning Javascript a few months ago and this is my first project. It may have security issues and many bugs. I recommend using it only on local network.

This project is not affiliated, associated, authorized, endorsed by, or in any way officially connected with WhatsApp or any of its subsidiaries or its affiliates. The official WhatsApp website can be found at https://whatsapp.com. "WhatsApp" as well as related names, marks, emblems and images are registered trademarks of their respective owners.

Languages

JavaScript 66.2%

TypeScript 32.8%

Dockerfile 0.5%

Shell 0.3%

HTML 0.2%