mucoban / chat-on-angular

Instant chat app on angular

ChatOnAngular

Instant chap app developed on angular and firebase

✨ Built With

Angular

Firebase

🖼️ Screenshots

Demo

Customer side - https://mucoban.github.io/chat-on-angular

Agent side - https://mucoban.github.io/chat-on-angular/chat-on-angular/agent

Usage

Firebase

Create a firebase realtime database on https://firebase.google.com and create a user for customers, and one or more users for agents on authentication page. Then create agent, customers properties on that database and fill them with user emails that you just created.

agents: "[email protected],[email protected]"
customer: "[email protected]"

Environment.ts

copy /src/environments/environment.example.ts file as environment.ts, environment.prod.ts
and fill environment.firebase object with your firebase project credentials.

Fill environment.customer value with the email and the password of the account that you created for your customers in your firebase project.

If you want to get an email when a customer starts a chat, fill environment.formspreeApiUrl property with your link that you will get from https://formspree.io

export const environment = {
  production: false,
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  },
  customer: { email: '', password: '' },
  formspreeApiUrl: '',
};

Deployment

Build your angular project with command ng build and upload contents of your /dist folder to where you want to serve your chat app. Use /agent route to access agent panel.

To integrate chat app on a page or website, you can have look at example-page/index.html file to see the implematation

chat-on-angular's Issues

style: change style of switch-btn and border of messages-box

refactor: refactor directories of project, create example page for implementation

refactor directories of project, as angular-application and example-page. In folder 'example-page', there will be a web page which show how to implement chat-on-angular application into a webpage

feature: add info messages to chat window

refactor: add ngrx to project

use ngrx/store in the project, instead of subject listening