Awesome

Firechat

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.

Status

This sample is no longer actively maintained and is left here for reference only.

Live Demo

Visit firechat.firebaseapp.com to see a live demo of Firechat.

Setup

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.

Getting Started with Firebase

Firechat requires Firebase in order to authenticate users and store data. You can sign up here for a free account.

Getting Help

If you have a question about Firechat, feel free to reach out through one of our official support channels.