Advanced Live Commenting jQuery Plugin – jquery-comments

Are you looking fully functional customizable Live Commenting jQuery Plugin If yes then Here I am going to share awesome jQuery Plugin which help for implementing an out-of-the-box commenting solution to any web application with an existing backend. It provides all the UI functionalities and ties them to callbacks that let you easily define what you want to do with the data. The library is highly customizable and very easy to integrate thanks to a wide variety of settings.


  • Commenting
  • Replying (nested comments)
  • Editing comments
  • Deleting comments
  • Upvoting comments
  • Uploading attachments
  • Hashtags
  • Pinging users
  • Enabling/disabling functionalities
  • Localization
  • Time formatting
  • Field mappings
  • Callbacks
  • Fully responsive and mobile compatible
  • Miscellaneous settings


Load jQuery core library and other required supporting libraries including plugins library.

<!-- Styles -->
		<link rel="stylesheet" type="text/css" href="jquery-comments.css">
		<link rel="stylesheet" type="text/css" href="">
		<!-- Data -->
		<script type="text/javascript" src="data/comments-data.js"></script>
		<!-- Libraries -->
		<script type="text/javascript" src=""></script>
		<script type="text/javascript" src=""></script>
		<script type="text/javascript" src="jquery-comments.min.js"></script>


Create a comments container which display comment box along with previous comment list.

<div id="comments-container"></div>


sample comment data, you can also load form your database.

var commentsArray = [{
   "id": 1,
   "parent": null,
   "created": "2015-01-01",
   "modified": "2015-01-01",
   "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu.",
   "pings": [],
   "creator": 6,
   "fullname": "Simon Powell",
   "profile_picture_url": "",
   "created_by_admin": false,
   "created_by_current_user": false,
   "upvote_count": 3,
   "user_has_upvoted": false,
   "is_new": false

var usersArray = [{
    id: 1,
    fullname: "Current User",
    email: "[email protected]",
    profile_picture_url: ""

Initialize the comment system and get & save comment data with the following functions & callbacks.

$(function() {
				var saveComment = function(data) {
					$(data.pings).each(function(index, id) {
						var user = usersArray.filter(function(user){return == id})[0];
						data.content = data.content.replace('@' + id, '@' + user.fullname);
					return data;
					profilePictureURL: '',
					currentUserId: 1,
					roundProfilePictures: true,
					textareaRows: 1,
					enableAttachments: true,
					enableHashtags: true,
					enablePinging: true,
					getUsers: function(success, error) {
						setTimeout(function() {
						}, 500);
					getComments: function(success, error) {
						setTimeout(function() {
						}, 500);
					postComment: function(data, success, error) {
						setTimeout(function() {
						}, 500);
					putComment: function(data, success, error) {
						setTimeout(function() {
						}, 500);
					deleteComment: function(data, success, error) {
						setTimeout(function() {
						}, 500);
					upvoteComment: function(data, success, error) {
						setTimeout(function() {
						}, 500);
					uploadAttachments: function(dataArray, success, error) {
						setTimeout(function() {
						}, 500);

List of All default customization options and Callbacks & functions.

  profilePictureURL: '',
  currentUserIsAdmin: false,
  currentUserId: null,
  spinnerIconURL: '',
  upvoteIconURL: '',
  replyIconURL: '',
  uploadIconURL: '',
  attachmentIconURL: '',
  fileIconURL: '',
  noCommentsIconURL: '',
  textareaPlaceholderText: 'Add a comment',
  newestText: 'Newest',
  oldestText: 'Oldest',
  popularText: 'Popular',
  attachmentsText: 'Attachments',
  sendText: 'Send',
  replyText: 'Reply',
  editText: 'Edit',
  editedText: 'Edited',
  youText: 'You',
  saveText: 'Save',
  deleteText: 'Delete',
  newText: 'New',
  viewAllRepliesText: 'View all __replyCount__ replies',
  hideRepliesText: 'Hide replies',
  noCommentsText: 'No comments',
  noAttachmentsText: 'No attachments',
  attachmentDropText: 'Drop files here',
  textFormatter: function(text) {return text},
  enableReplying: true,
  enableEditing: true,
  enableUpvoting: true,
  enableDeleting: true,
  enableAttachments: false,
  enableHashtags: false,
  enablePinging: false,
  enableDeletingCommentWithReplies: false,
  postCommentOnEnter: false,
  forceResponsive: false,
  readOnly: false,
  defaultNavigationSortKey: 'newest',
  highlightColor: '#2793e6',
  deleteButtonColor: '#C9302C',
  scrollContainer: this.$el,
  roundProfilePictures: false,
  textareaRows: 2,
  textareaRowsOnFocus: 2,
  textareaMaxRows: 5,
  maxRepliesVisible: 2,
  fieldMappings: {
    id: 'id',
    parent: 'parent',
    created: 'created',
    modified: 'modified',
    content: 'content',
    file: 'file',
    fileURL: 'file_url',
    fileMimeType: 'file_mime_type',
    pings: 'pings',
    creator: 'creator',
    fullname: 'fullname',
    profileURL: 'profile_url',
    profilePictureURL: 'profile_picture_url',
    isNew: 'is_new',
    createdByAdmin: 'created_by_admin',
    createdByCurrentUser: 'created_by_current_user',
    upvoteCount: 'upvote_count',
    userHasUpvoted: 'user_has_upvoted'
  getUsers: function(success, error) {success([])},
  getComments: function(success, error) {success([])},
  postComment: function(commentJSON, success, error) {success(commentJSON)},
  putComment: function(commentJSON, success, error) {success(commentJSON)},
  deleteComment: function(commentJSON, success, error) {success()},
  upvoteComment: function(commentJSON, success, error) {success(commentJSON)},
  hashtagClicked: function(hashtag) {},
  pingClicked: function(userId) {},
  uploadAttachments: function(commentArray, success, error) {success(commentArray)},
  refresh: function() {},
  timeFormatter: function(time) {return new Date(time).toLocaleDateString()}

See live demo and download source code.


This awesome plugin is developed by Viima. Visit their official github repository for more information and follow for future updates.