Skip to content
Switch branches/tags

npm version

Chat21 is the core of the open source live chat platform


With Chat21-ionic you can:

  • Send a direct message to a user (one to one message)
  • View the messages history
  • The read receipts feature allows your users to see when a message has been sent, delivered and read
  • Conversations list view with the last messages sent (like Whatsapp)
  • With the Presense Manager you can view when a user is online or offline and the inactivity period
  • Responsive design (desktop and mobile)
  • View the user profile with fullname and email
  • Login with email and password (Use firebase email and password authentication method )
  • Signup with fullname, email, password and profile picture
  • Contacts list view with fulltext search for fullname field

Live Demo

Visit to see a live demo of chat21-ionic.

A screenshot of chat21-ionic demo

A screenshot of chat21-ionic demo


In progress git


  • Install nodejs:
  • Install Ionic CLI: npm install -g ionic
  • Install Cordova : npm install -g cordova@7.0.1
  • A Firebase project. Create one free on
  • "Chat21 Firebase cloud functions" installed. Instructions:


  • Install the latest stable release. Check on Github page the last release under the Releases tab and then run
  • git clone --branch <LATEST-RELEASE-VERSION>
  • cd chat21-ionic
  • Build running: npm install



  • Configure the file environment.ts in src/environments folder:

    export const environment = {
        supportMode: false,
        production: false,
        remoteConfig: true,
        remoteConfigUrl: '/chat-config.json',
        chatEngine: "mqtt", // OR YOUR CUSTOM CHAT ENGINE
        updloaEngine: "native", // OR YOUR CUSTOM UPLOAD ENGINE
        pushEngine:"none", // OR YOUR CUSTOM PUSH ENGINE
        firebaseConfig: {
            apiKey: '123ABC..',
            authDomain: '',
            databaseURL: '',
            projectId: 'XYZ',
            storageBucket: '',
            messagingSenderId: '123456',
            appId: 'CHANGEIT',
         chat21Config: {
            "appId": "tilechat",
            "MQTTendpoint": "mqtt://<YOUR-MQTT-ENPOINT>",
            "APIendpoint": "http://<YOUR-MQTT-API-ENPOINT>"
        "apiUrl": "https://<YOUR-TILEDESK-API-URL>",
        "baseImageUrl": "https://<YOUR-BASE-IMAGE-URL>",
        "dashboardUrl": "https://<YOUR-DASHBOARD-URL>"
  • logLevel: The Chat21-ionic supports 4 log levels. The order is as follows: Error = 0 < Warn = 1 < Info = 2 < Debug = 3

  • fileUploadAccept: The Chat21-ionic allows you to manage the type of files that can be uploaded. By default, all file types are accepted.

Push notification

(Optional) Authenticate with email password

  • Config Firebase auth In the Firebase Console open the Authentication section > SIGN IN METHOD tab you need to enable the Email/password Sign-in Provider and click SAVE. This will allow users to sign-in the Web app with their Email

Run App on Browser

  • Now you will need to serve the app. Run: ionic serve in the terminal.

Add browser platform and build it

  • Run: cordova platform add browser@latest
  • Run: ionic cordova build browser


Deploy on a Web Server (Apache or Nginx)

Copy the content of the directory platforms/browser/www to your WebServer public dir.

Deploy on Firebase hosting

  • Install the Firebase CLI. run: npm install -g firebase-tools
  • Run: firebase login (these steps can be avoided if you have already done before)
  • Change directories in the terminal to your desired project directory(run: cd platforms/browser) and run: firebase init
    • select hosting (press Spacebar to select) and press return
    • select your project and press return
    • answer the following questions:
      • "what do you want to use as your public directory?" www and press return
      • "configure as a single-page app?" N and press return
      • "file www/index.html alredy exists. Overwrite?" N and press return
  • Run: firebase deploy
  • In your firebase consol click hosting and click on link your project More info here

Run on Android

  • Run on simulator : ionic cordova run android
  • Run on device : ionic cordova run android --device

Run on iOS

  • Run on simulator : ionic cordova run ios
  • Run on device : ionic cordova run ios --device

Run with docker

To run Chat21-ionic on port 8080 run:

curl --output .env

nano .env #configure .env file properly

docker run -p 8080:80 --env-file .env chat21/chat21-ionic

Branding with Docker

If you want to customize logos and assets you can mount a docker volume and attach it to the assets folder. After that you can override the assets files into the docker volume.


docker run -p 8080:80 --env-file .env --mount source=chat21-ionic-assets-vol,destination=/usr/share/nginx/html/assets  chat21/chat21-ionic


To auto login pass the JWT token as a query parameter of your Chat url as in the following example: