Firechat is a simple, extensible chat widget powered by Firebase. It is intended to serve as a concise, documented foundation for chat products built on Firebase. It works out of the box, and is easily extended.
This sample is no longer actively maintained and is left here for reference only.
Visit firechat.firebaseapp.com to see a live demo of Firechat.
Firechat uses the Firebase Realtime Database as a backend, so it requires no server-side code. It can be added to any web app by including a few JavaScript files:
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
<!-- Firechat -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/3.0.1/firechat.min.css" />
<script src="https://cdn.firebase.com/libs/firechat/3.0.1/firechat.min.js"></script>giving your users a way to authenticate:
<script>
function login() {
// Log the user in via Twitter
var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider).catch(function(error) {
console.log("Error authenticating user:", error);
});
}
firebase.auth().onAuthStateChanged(function(user) {
// Once authenticated, instantiate Firechat with the logged in user
if (user) {
initChat(user);
}
});
</script>
<button onclick="login()">Login with Twitter</button>and initializing the chat:
<script>
function initChat(user) {
// Get a Firebase Database ref
var chatRef = firebase.database().ref("chat");
// Create a Firechat instance
var chat = new FirechatUI(chatRef, document.getElementById("firechat-wrapper"));
// Set the Firechat user
chat.setUser(user.uid, user.displayName);
}
</script>
<div id="firechat-wrapper"></div>For detailed integration instructions, see the Firechat documentation.
Firechat requires Firebase in order to authenticate users and store data. You can sign up here for a free account.
If you have a question about Firechat, feel free to reach out through one of our official support channels.