FireForChat: How to Integrate a Real-Time Chat with Firebase & Firestore

Installation & Setup Guide

FireForChat (https://www.fireforchat.com) is a real-time chat tool based on Firebase and Firestore, allowing developers to easily integrate a messaging system into their web or mobile applications

1. Installation
To install FireForChat in your project, run the following command:
npm install fireforchat

2. Firebase Configuration
To use FireForChat, you need to configure Firebase. Follow these steps:

1. Go to Firebase Console and create a new project.
2. Once the project is created, navigate to the Firestore Database section and enable it.
3. Go to Project settings > General, and under "Your apps", register a new web app.
4. Copy the Firebase configuration object from the settings and use it in your project.

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

3. FireForChat Integration
Now, integrate FireForChat into your application:

1. Go to the FireForChat Dashboard and copy your License Key.
2. Pass the Firebase config, license key, and user data to FireForChat.
3. Inside the data object, you must set up the channelId, which can be any string to identify the conversation

• The channelId is a unique identifier for a chat conversation. It helps FireForChat distinguish between different chats. You can use any string, but it should be unique to avoid mixing conversations.
• For support chats, use a ticket ID (e.g., "support-ticket-12345").
• For private user chats, combine user IDs (e.g., "user-123-user-456").
• For group chats, use a room name or group ID (e.g., "team-discussion-789").

4, Inside the data object, if you already have the user information, you can pass it as a prop to prevent the chat from asking for a username and email.

• If the email and username is null, FireForChat may ask the user for their email and username before they start chatting. However, if you already have this information (e.g., from your app's authentication system), you can provide it inside the user object. This allows the chat to start immediately without asking the user to enter their details.

import Fireforchat from "fireforchat"

const data = {
    channelId: "support-ticket-12345",
    user: {
        email: "[e-mail]",
        username: "JohnDoe"
    }
};

<Fireforchat licenseKey="YOUR_LICENSE_KEY" firebaseConfig={firebaseConfig} data={data} width="300px" heigth="450px" />

4. Important Notes

• If no width is provided, it defaults to 300px, similar to the CSS width property.
• If no height is provided, it defaults to 450px, similar to the CSS height property.
• If handling multiple conversations, dynamically update the channelId.
• channelId can be any unique string, such as a user ID, support ticket ID, or room name.
• If the user already has an account, they can start chatting without entering additional details.
• Ensure Firestore security rules are properly configured.

With this guide, you'll be ready to integrate FireForChat into your application. 🚀 For more information go toDocs