jQuery Facebook Like Chat Plugin - Pusher Chat
File Size: | 25.4KB |
---|---|
Views Total: | 56240 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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">▼</span><span class="open">▲</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">▼</span><span class="open">▲</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" />◀</span> <span id="slideRight">▶ <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.