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.
Visit firechat.firebaseapp.com to see a live demo of Firechat.
Firechat uses Firebase 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/2.1.1/jquery.min.js'></script>
<!-- Firebase -->
<script src='https://cdn.firebase.com/js/client/2.1.0/firebase.js'></script>
<!-- Firechat -->
<link rel='stylesheet' href='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css' />
<script src='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js'></script>giving your users a way to authenticate
<script>
// Create a new Firebase reference, and a new instance of the Login client
var chatRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/chat');
function login() {
chatRef.authWithOAuthPopup("twitter", function(error, authData) {
if (error) {
console.log(error);
}
});
}
chatRef.onAuth(function(authData) {
// Once authenticated, instantiate Firechat with our user id and user name
if (authData) {
initChat(authData);
}
});
</script>
<a href='#' onclick='login();'>Login with Twitter</a>and initializing the chat.
<script>
function initChat(authData) {
var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
chat.setUser(authData.uid, authData[authData.provider].displayName);
}
</script>
<div id='firechat-wrapper'></div>For detailed integration instructions, see the Firechat documentation.
Firechat requires Firebase in order to store data. You can sign up here for a free account.
If you have a question about Firechat, search the Firebase tag on Stack Overflow to see if it has already been answered. If it hasn't been asked, post a new question. We keep a close eye on those tags, and will answer your question soon.