FireForChat - Installation & Setup Guide

FireForChat 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. Note that FireForChat is a paid package. For more information, visit https://www.fireforchat.com/.

Installation

To install FireForChat in your project, run the following command:

npm install fireforchat

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"
};

FireForChat Integration

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.
   • Examples:
     • For customer support chat, use a ticket ID: "support-ticket-12345".
     • For private chat between two users, use a combination of their user IDs: "user-123-user-456".
     • For group chats, use a room name or group ID: "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.

const data = {
    channelId: "support-ticket-12345", // Unique identifier for this chat
    user: {
        email: "[email protected]", // Pre-fill user email to avoid asking
        username: "JohnDoe" // Pre-fill username so chat starts immediately
    }
};

<FireForChat 
    licenseKey="YOUR_LICENSE_KEY"
    firebaseConfig={firebaseConfig}
    data={data}
    width="300px"  // Defaults to 300px if no width is provided, similar to the CSS `width` property.
    height="450px" // Defaults to 450px if no height is provided, similar to the CSS `height` property.
/>;

Important Notes

• 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. 🚀