jQuery Facebook Like Chat Plugin - Pusher Chat

Pusher Chat is a jQuery plugin that adds a facebook like chat application to your website using Pusher API. The plugin is easy to customize with CSS and can manage friend list via json.

About Pusher:

Pusher.Com is a HTML5 webSocket powered realtime messaging service, which provides a  hosted API for quickly, easily and securely adding scalable realtime functionality to web and mobile apps.

How To Use It:

1. Include jQuery library, jquery.pusherchat.js and pusher.js in your head section

<script src="http://js.pusher.com/1.12/pusher.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.pusherchat.js" type="text/javascript"></script>

2. Include chat-style.css to style your chat application

<link href="css/chat-style.css" rel="stylesheet">

3. Markup HTML Structure

<div id="pusherChat">
<div id="membersContent"> <span id="expand"><span class="close">&#x25BC;</span><span class="open">&#x25B2;</span></span>
<h2><span id="count">0</span> online</h2>
<div class="scroll">
<div id="members-list"></div>
</div>
</div>
<!-- chat box template -->

<div id="templateChatBox">
<div class="pusherChatBox"> <span class="state"> <span class="pencil"> <img src="assets/pencil.gif" /> </span> <span class="quote"> <img src="assets/quote.gif" /> </span> </span> <span class="expand"><span class="close">&#x25BC;</span><span class="open">&#x25B2;</span></span> <span class="closeBox">x</span>
<h2><a href="#" title="go to profile"><img src="" class="imgFriend" /></a> <span class="userName"></span></h2>
<div class="slider">
<div class="logMsg">
<div class="msgTxt"> </div>
</div>
<form method="post" name="#123">
<textarea  name="msg" rows="3" ></textarea>
<input type="hidden" name="from" class="from" />
<input type="hidden" name="to"  class="to"/>
<input type="hidden" name="typing"  class="typing" value="false"/>
</form>
</div>
</div>
</div>

<!-- chat box template end -->
<div class="chatBoxWrap">
<div class="chatBoxslide"></div>
<span id="slideLeft"> <img src="assets/quote.gif" />&#x25C0;</span> <span id="slideRight">&#x25B6; <img src="assets/quote.gif" /></span> </div>
</div>

4. Default setup

$.fn.pusherChat({
       'pusherKey':'YOUR PUSHER KEY',  // required : open an account on http://pusher.com/ to get one
       'authPath':'server/pusher_auth.php', // required : path to authentication scripts more info at http://pusher.com/docs/authenticating_users
       'friendsList' : 'ajax/friends-list.json', // required : path to friends list json 
       'serverPath' : 'server/server.php' // required : path to server
 )}

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.