{"id":26657075,"url":"https://github.com/chat21/chat21-ionic","last_synced_at":"2025-06-30T05:04:31.940Z","repository":{"id":25787085,"uuid":"105521478","full_name":"chat21/chat21-ionic","owner":"chat21","description":"A ionic v5 and Angular 8 desktop and mobile chat","archived":false,"fork":false,"pushed_at":"2023-03-08T13:53:17.000Z","size":35114,"stargazers_count":84,"open_issues_count":45,"forks_count":95,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-11T16:34:29.437Z","etag":null,"topics":["chat","customer-service","firebase","instant-messaging","ionic3","livechat","mqtt","rabbitmq","realtime"],"latest_commit_sha":null,"homepage":"https://tiledesk.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chat21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-02T10:12:58.000Z","updated_at":"2025-01-06T10:20:21.000Z","dependencies_parsed_at":"2024-11-14T23:01:17.510Z","dependency_job_id":"931ca9d7-a06c-48d2-b4b7-6145ed3b066e","html_url":"https://github.com/chat21/chat21-ionic","commit_stats":{"total_commits":1786,"total_committers":13,"mean_commits":137.3846153846154,"dds":0.3465845464725644,"last_synced_commit":"25c4cf1a96d10910c3e9f74afbfa4ec5af16eeb9"},"previous_names":[],"tags_count":183,"template":false,"template_full_name":null,"purl":"pkg:github/chat21/chat21-ionic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-ionic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-ionic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-ionic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-ionic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chat21","download_url":"https://codeload.github.com/chat21/chat21-ionic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-ionic/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262714506,"owners_count":23352463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","customer-service","firebase","instant-messaging","ionic3","livechat","mqtt","rabbitmq","realtime"],"created_at":"2025-03-25T08:16:59.334Z","updated_at":"2025-06-30T05:04:31.918Z","avatar_url":"https://github.com/chat21.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/%40chat21%2Fchat21-ionic.svg)](https://badge.fury.io/js/%40chat21%2Fchat21-ionic)\n\n\u003e ***🚀 Do you want to install Tiledesk on your server with just one click?***\n\u003e \n\u003e ***Use [Docker Compose Tiledesk installation](https://github.com/Tiledesk/tiledesk-deployment/blob/master/docker-compose/README.md) guide***\n\nChat21 is the core of the open source live chat platform [Tiledesk.com](http://www.tiledesk.com).\n\n# Features #\nWith Chat21-ionic you can:\n* Send a direct message to a user (one to one message)\n* View the messages history\n* The read receipts feature allows your users to see when a message has been sent, delivered and read\n* Conversations list view with the last messages sent (like Whatsapp)\n* With the Presense Manager you can view when a user is online or offline and the inactivity period\n* Responsive design (desktop and mobile)\n* View the user profile with fullname and email \n* Login with email and password (Use firebase email and password authentication method )\n* Signup  with fullname, email, password and profile picture\n* Contacts list view with fulltext search for fullname field\n\n# Live Demo #\nVisit https://web.chat21.org/ to see a live demo of chat21-ionic.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/9556761/57692753-df24d780-7647-11e9-9505-82ee5288637c.png\" alt=\"A screenshot of chat21-ionic demo\" style=\"max-width:100%;\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/9556761/57692765-e3e98b80-7647-11e9-8afe-b21e6085d7ca.png\" alt=\"A screenshot of chat21-ionic demo\" style=\"max-width:100%;\"\u003e\n\n# Documentation #\nIn progress git\n\n# Prerequisites #\n* Install nodejs: `https://nodejs.org/en/download/`\n* Install Ionic CLI: `npm install -g ionic`\n* Install Cordova : `npm install -g cordova@7.0.1`\n* A Firebase project. Create one free on `https://firebase.google.com`\n* \"Chat21 Firebase cloud functions\" installed. Instructions:`https://github.com/chat21/chat21-cloud-functions`\n\n# Run Tiledesk with Docker Compose\n\nDo you want to install all the Tiledesk components on your server with just one click?\nUse [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/tiledesk-deployment/blob/master/docker-compose/README.md)\n\n\n# Installation #\n* Install the latest stable release. Check on Github page the last release under the Releases tab and then run \n- `git clone https://github.com/frontiere21/chat21-ionic.git --branch \u003cLATEST-RELEASE-VERSION\u003e`\n- `cd chat21-ionic`\n* Build running: `npm install`\n\n# Firebase \n* Create a Firebase account\n* Create a Firebase project in the Firebase console, if you don't already have one. https://console.firebase.google.com/\n* Deploy Chat21 Firebase Cloud Functions as described here: https://github.com/chat21/chat21-cloud-functions\n\n## Configuration ## \n* Configure the file environment.ts in src/environments folder:     \n    ```\n    export const environment = {\n        supportMode: false,\n        production: false,\n        remoteConfig: true,\n        remoteConfigUrl: '/chat-config.json',\n        chatEngine: \"mqtt\", // OR YOUR CUSTOM CHAT ENGINE\n        updloaEngine: \"native\", // OR YOUR CUSTOM UPLOAD ENGINE\n        pushEngine:\"none\", // OR YOUR CUSTOM PUSH ENGINE\n        fileUploadAccept:\"*/*\",\n        logLevel\":\"\u003cYOUR-PREFERRED-LOG-LEVEL\u003e\",\n        supportMode: false,\n        writeToButton: false,\n        archivedButton: false,\n        firebaseConfig: {\n            tenant:\"tilechat\",\n            apiKey: '123ABC..',\n            authDomain: 'XYZ.firebaseapp.com',\n            databaseURL: 'https://XYZ.firebaseio.com',\n            projectId: 'XYZ',\n            storageBucket: 'XYZ.appspot.com',\n            messagingSenderId: '123456',\n            appId: 'CHANGEIT',\n            chat21ApiUrl: '\u003cYOUR_CHAT21_CLOUD_FUNCTION_FIREBASE_ENDPOINT\u003e'\n        },\n         chat21Config: {\n            \"appId\": \"tilechat\",\n            \"MQTTendpoint\": \"mqtt://\u003cYOUR-MQTT-ENPOINT\u003e\",\n            \"APIendpoint\": \"http://\u003cYOUR-MQTT-API-ENPOINT\u003e\"\n        },\n        \"apiUrl\": \"https://\u003cYOUR-TILEDESK-API-URL\u003e\",\n        \"baseImageUrl\": \"https://\u003cYOUR-BASE-IMAGE-URL\u003e\",\n        \"dashboardUrl\": \"https://\u003cYOUR-DASHBOARD-URL\u003e\"\n        \"wsUrl\": 'ws://' + window.location.hostname + '/ws/',\n    }\n  };\n  ```\n  \n* `logLevel`: The Chat21-ionic supports 4 log levels. The order is as follows:\n  `Error \u003c Warn \u003c Info \u003c Debug`\n\n* `fileUploadAccept`: The Chat21-ionic allows you to manage the type of files that can be uploaded. By default, all file types are accepted.\n\n* `wsUrl`: allows you to know in real time the agent's availability status, the agent's busy status and the number of unassigned conversations for a selected project\n\n* `supportMode`: if it is set to true it shows the left sidebar which makes dashboard and chat management smarter\n\n* `writeToButton`: if set to true, it makes the button for viewing the contact list visible and makes direct conversations with them possible\n\n* `archivedButton`: if set to true, it makes the button for viewing archived conversations visible\n\n### Push notification\n* open `/src/firebase-messaging-sw.js` and replace messagingSenderId: with \u003c your messagingSenderId \u003e\nMore info here :  https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging/\n* firebase-messaging-sw.js must be accessible in the root of the webapp, for example (https://support.tiledesk.com/firebase-messaging-sw.js)\n* After the build process, check the property gcm_sender_id of the manifest.json file. The correct value for firebase is:\n`\"gcm_sender_id\": \"103953800507\"`\n    \n### (Optional) Authenticate with email password  \n* Config Firebase auth\nIn the Firebase Console open the Authentication section \u003e 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\nhttps://firebase.google.com/docs/auth/\n\n## Run App on Browser ##\n* Now you will need to serve the app. Run: `ionic serve` in the terminal. \n\n## Add browser platform and build it ##\n* Run: `cordova platform add browser@latest`\n* Run: `ionic cordova build browser`\n\n# Deploy\n\n## Deploy on a Web Server (Apache or Nginx)\nCopy the content of the directory platforms/browser/www to your WebServer public dir.\n\n## Deploy on Firebase hosting ##\n\n* Install the Firebase CLI. run: `npm install -g firebase-tools`\n* Run: `firebase login`\n(these steps can be avoided if you have already done before)\n* Change directories in the terminal to your desired project directory(run: `cd platforms/browser`) and run: `firebase init`\n    * select hosting (press Spacebar to select) and press return\n    * select your project and press return\n    * answer the following questions:\n        * \"what do you want to use as your public directory?\"  www and press return  \n        * \"configure as a single-page app?\"  N and press return\n        * \"file www/index.html alredy exists. Overwrite?\" N and press return\n* Run: `firebase deploy`\n* In your firebase consol click hosting and click on link your project\nMore info here https://firebase.google.com/docs/hosting/quickstart?authuser=0\n\n## Run on Android \n* Run on simulator : `ionic cordova run android`\n* Run on device : `ionic cordova run android --device`\n\n## Run on iOS\n* Run on simulator : `ionic cordova run ios`\n* Run on device : `ionic cordova run ios --device`\n\n\n# Run with docker\n\n  \nTo run Chat21-ionic on port 8080 run:\n\n```\n\ncurl https://raw.githubusercontent.com/chat21/chat21-ionic/master/env.sample --output .env\n\nnano .env #configure .env file properly\n\ndocker run -p 8080:80 --env-file .env chat21/chat21-ionic\n\n```\n\n## Branding with Docker\nIf 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.\n\nExample:\n```\ndocker run -p 8080:80 --env-file .env --mount source=chat21-ionic-assets-vol,destination=/usr/share/nginx/html/assets  chat21/chat21-ionic\n```\n\n# Autologin \nTo auto login pass the JWT token as a query parameter of your Chat url as in the following example:\n\n```typescript\n\n\"http://localhost:8100/#/conversation-detail?jwt=\u003cJWT_TOKEN\u003e\"\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchat21%2Fchat21-ionic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchat21%2Fchat21-ionic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchat21%2Fchat21-ionic/lists"}