Below is an example of SideComments.js in action. Each section of text can be commented on. Go ahead and give it a try!

How to start using SideComments.js on your website immediately.

1. Download SideComments.js Direct download Download SideComments.js immediately. Download SideComments.js Source code Check out the source code on Github. SideComments.js on Github Install with Component You can install SideComments via component.



component install aroc/side-comments



or include side-comments in your component.json file dependencies object.

2. Include SideComments.js in your project. jQuery Required You must include jQuery in your project in order for SideComments.js to work. This component uses jQuery to manage DOM manipulation and will not work without it. You'll need to include the following single JavaScript file and two CSS files to get SideComments.js working.

release/side-comments.js

release/side-comments.css

release/themes/default-theme.css You can choose not to include default-theme.css , but you'll need to style SideComments youself if you choose not to include it, as side-comments.css handles only the basic layout styling.

3. Set up your HTML. You need to have a wrapper element to point SideComments at and two things on each commentable section; the class commentable-section and the data attribute data-section-id , which holds the unique ID of that commentable-section for this page.

4. Initialize a new SideComments object.

The current user is an object and is expected to be in the following format: The existing comments argument is expected to be an array of sections with a nested array of comments. It needs to look like the following: