Together with our upcoming HTML5 release, we will be introducing more and more real-time features into QuickSchools. The web is getting social, and we need these real-time features in order to make social features work.

This is where a service called Firebase comes in. They offer a fantastic service that allows developers like us to have access to a secure & scalable real-time backend. But before we roll it out in our main QuickSchools product, we tried it out in our internal Zendesk customer service portal. Like many customer-service oriented companies, we use Zendesk internally to manage customer tickets.

We decided to build a chat widget in Zendesk that would allow our customer service agents to chat with each other in real-time. This way they wouldn’t need to use a separate instant messenger (IM) product, and can focus more on the customer issues at hand.

So how was our experience building this chat widget? In short, it was excellent. It took only half-an-hour to build the chat widget! <– I threw in an exclamation mark in there because that’s how I felt – pretty amazed. Of course we can improve it as we go on, and Firebase still has authentication features pending, but it was a great start.

Here’s a screen-shot of our simple chat widget embedded in Zendesk:

Here’s the HTML code for the chat widget. Feel free to use it if you wish. But of course you’ll need to head over to Firebase and get a beta invite to get going.

{{current_user.name}}, we now have chat.
<p>
<textarea id="taWidget" style="height:100px;"></textarea>
<p>
<input class="inputWidget" type="text" />
<input class="updateButton" type="button" value="Send" />
<script>
loadJs = function(jsFile, successFunction) {
 jQuery.ajax({
 url: jsFile,
 success: successFunction,
 dataType: "script",
 cache: true // Cache whenever possible
 });
}
var fb;
loadJs("http://static.firebase.com/v0/firebase.js", function() {
 console.log("Loaded firebase!");
 fb = new Firebase('http://gamma.firebase.com/arissamadyahaya/zenchat');
 fb.remove(); // Clear the old messages.
fb.on("child_added", function(snapshot) {
 var newChild = snapshot.val();
var ta = jQuery("#taWidget");
ta.text(ta.text() + newChild.user + ": " + newChild.msg + "\n");
 });
});
jQuery(".updateButton").click(function() {
 var inputText = jQuery(".inputWidget");
 fb.push({"user": "{{current_user.name}}", "msg": inputText.val()});
 inputText.val("");
});
</script>