{"id":26657082,"url":"https://github.com/chat21/chat21-web-widget","last_synced_at":"2025-09-10T10:33:17.265Z","repository":{"id":25787088,"uuid":"105822939","full_name":"chat21/chat21-web-widget","owner":"chat21","description":"Chat widget built on top of Firebase/MQTT to emebd chat features into your web/mobile apps.","archived":false,"fork":false,"pushed_at":"2023-03-08T13:52:49.000Z","size":12934,"stargazers_count":94,"open_issues_count":38,"forks_count":75,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-25T08:16:58.418Z","etag":null,"topics":["angular","bot","customer-support","firebase","livechat","messaging","widget"],"latest_commit_sha":null,"homepage":"http://www.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}},"created_at":"2017-10-04T21:59:11.000Z","updated_at":"2025-03-23T00:21:18.000Z","dependencies_parsed_at":"2023-01-14T03:25:01.517Z","dependency_job_id":null,"html_url":"https://github.com/chat21/chat21-web-widget","commit_stats":null,"previous_names":[],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-web-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-web-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-web-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chat21%2Fchat21-web-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chat21","download_url":"https://codeload.github.com/chat21/chat21-web-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248391291,"owners_count":21095987,"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":["angular","bot","customer-support","firebase","livechat","messaging","widget"],"created_at":"2025-03-25T08:17:02.751Z","updated_at":"2025-04-11T11:54:32.289Z","avatar_url":"https://github.com/chat21.png","language":"TypeScript","readme":"[![npm version](https://badge.fury.io/js/%40chat21%2Fchat21-web-widget.svg)](https://badge.fury.io/js/%40chat21%2Fchat21-web-widget)\n\n# chat21-web-widget\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-web-widget is a Free Live Chat Widget built on Firebase with Angular5 that lets you support and chat with visitors and customers on your website. \nMore information about web widget here : http://www.tiledesk.com\n\n\u003cimg width=\"488\" alt=\"dialogo_widgetchat_2\" src=\"https://user-images.githubusercontent.com/32448495/37662363-35110862-2c57-11e8-8720-263d1ff96f29.jpg\"\u003e\n\nWith Chat21-web-widget you can:\n* Invite your website visitors to share feedback and suggestions to better understand their needs.\n* Answer questions from website visitors instantly to increase trust\n* Add a code snippet to your website easly \n* It's a HTML5 widget built with Google Firebase, Angular5 and Bootstrap\n\n# Features\n* Send a direct message to a preset user\n* Receive realtime support from your team\n* Form to enter the chat sentiment\n* Configure the widget with company logo and colors\n* Chat21 Web Widget is free and open source.\n\n# Prerequisites #\n* Install Git\n* Install Angular CLI with  `npm install -g @angular/cli`. More info here https://github.com/angular/angular-cli#installation\n* Create 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# Installation\n\n* Clone the repository from master (or use a tagged release) with command: ```git clone https://github.com/chat21/chat21-web-widget \u003cYOUR_PATH\u003e```\n* Move to the downloaded project path ```cd \u003cYOUR_PATH\u003e```\n* Build running: `npm install`\n\n## Dev configuration \n\nConfigure the environment.ts file in `src/environments/`.\nUse the Firebase configuration file from your Firebase project to correctly configure the 'firebase' section.\n\n#### environment.ts\n```typescript\nexport const environment = {\n  production: true,\n  version: require('../../package.json').version,\n  remoteConfig: false, // for performance don't load settings from remote\n  remoteConfigUrl: '/widget-config.json',\n  loadRemoteTranslations: true,\n  remoteTranslationsUrl: 'https://\u003cYOUR_REMOTE_TRANSLATIONS_URL\u003e/',\n  chatEngine: \"mqtt\", // OR YOUR CUSTOM CHAT ENGINE\n  updloaEngine: \"native\", // OR YOUR CUSTOM UPLOAD ENGINE\n  fileUploadAccept:\"*/*\",\n  logLevel: '\u003cYOUR-PREFERRED-LOG-LEVEL-NUMBER\u003e',\n  firebaseConfig: {\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    tenant: 'tilechat', \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  defaultLang : 'en',\n  storage_prefix : 'widget_sv5',\n  authPersistence: 'LOCAL',\n  supportMode: true,\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### RUN in dev\n\nRun the app with `ng serve`\n\n## Prod configuration\n\nFor production installation, configure the environment.prod.ts file in `src/environments/`.\n\n#### environment.prod.ts\n```typescript\nexport const environment = {\n  production: true,\n  ...\n};\n\n```\n\n# Build for production\n \nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\nBuild for production with :  `ng build --prod --base-href --output-hashing none`\n\n\n# Deploy\n\n## Deploy to a Web Server\nCopy the content of the dist folder to your Web Server (for example Apache or Nginx)\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n\n## Widget in action\nYou can see a configuration of this widget in action on 'https://www.tiledesk.com'\n\n# Deploy\n## Deploy to a web Server\nCopy the content of the dist folder to your Web Server (for example Apache or Nginx)\n\n## Deploy to AWS S3 (Optional)\n\nRun : `aws s3 sync . s3://tiledesk-widget`\n\nOr With a different AWS Profile: \n\nRun : `aws --profile f21 s3 sync . s3://tiledesk-widget`\n\nIf you use AWS Cloud Front enable gzip compression.\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-web-widget/master/env.sample --output .env\n\nnano .env #configure .env file properly\n\ndocker run -p 4200:80 --env-file .env chat21/chat21-web-widget\n\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchat21%2Fchat21-web-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchat21%2Fchat21-web-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchat21%2Fchat21-web-widget/lists"}