You are viewing the documentation for an old version (v1) of the widget. You can find the documentation for the latest UI version here.
To add comments to your website you need to add the following code snippet to your website
<div
class="just-comments"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
Replace YOUR_API_KEY with an actual API key of your account. To obtain the API key go to your account.
Note about security: JustComments is a public comment system which means that the comments are publicly available via API to everyone who knows the page id. This documentation offers multiple options to control the appearance of the widget which may look like security features, but they are, in fact, not!
The snippet above consists of two tags. Place the div to the location on your website where you want comments to be shown. The script has be included after the div tag and the best place would right before the closing </body> tag.
To determine the page ID, JustComments is using the page URL. JustComments converts the page URL to an ID which identifies the page. For example, https://mysite.com?mypage=id#1234 becomes mysite.com?mypageid=id. This way it does not matter if the page is opened via http or https or any other protocol: JustComments will be able to detect that it is the same page. By default, JustComments assumes that the part after ? (query) uniquely identifies the page. If you want to remove query from the page ID, you can set data-ignorequery="true" on your widget. Also JustComments automatically removes typical parameters which normally don't identify the page, such as ref, utm_source, utm_medium, utm_campaign, utm_term,utm_content.
You can control the behavior of the comments widget using data- attributes. Two common attributes:
data-allowguests="true" allows anyone to comment by entering their name along with the comment.data-apikey="YOUR_API_KEY" is the key that the widget is using to access JustComments.The default language of the widget is English. You can change it by specifying data-locale attribute:
<div
class="just-comments"
data-locale="en_US"
data-allowguests="true"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
en (English)de (German)ru (Russian)zh_CN, zh_TW, zh_HK (Chinese languages)pl (Polish)fr (French)pt (Portuguese)pt_BR (Brazilian Portuguese)ko (Korean)ja (Japanese)sv (Swedish)fa (Persian)ru_RU or just a language ru. We are extending the list of supported languages constantly. Contact us if you need an additional language.To protect your comments from bots, you can opt-in for Recaptcha. For this you need to define the corresponding data attribute.
<div
class="just-comments"
data-allowguests="true"
data-recaptcha="true"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
If you have your own user database and your own authentication mechanism, you can integrate it with JustComments seamlessly. To make it work your need to create a JWT token for every user that wants to comment. For example, on your NodeJS backend you can do it like this:
const jwt = require('jsonwebtoken');
const user = {
apiKey: 'YOUR_API_KEY', // required
username: 'Alex Rudenko', // required
userEmail: 'test@email.com', // required
userId: 'alex', // optional
userPic: '/widget/no-pic.png', // optional
userUrl: '/profile/alex' // optional
};
var token = jwt.sign(user, 'YOUR_API_KEY_SECRET', {
algorithm: 'HS256',
expiresIn: '1h', // always set expiration
});
<div
class="just-comments"
data-jwt="TOKEN_HERE"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
You may want to load w.js lazily on a page, for example, when a user clicks on the Show comments button. In this case, in order for the social login feature to work for your users you need to include an additional file on the page. This file has to be always included but don't worry it's only 564 bytes gzipped and cached quite efficiently.
<script src='https://just-comments.com/auth.js' async defer></script>
You may want to disable the login via social networks such as Twitter. For this, modify the container tag as following:
<div
class="just-comments"
data-disablesociallogin="true"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
You may want to modify default styles to better match your website's styling. These can be achieved via themes. JustComments widget comes with two built-in themes default and dark. You change the current theme by providing data-theme attribute:
<div
class="just-comments"
data-theme="dark"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
Built-in themes are not for everyone. Therefore, it's possible to define your own theme:
<script>
var jcMyTheme = {
buttons: {
primaryColor: 'white',
primaryBgColor: '#2f5984',
primaryColorAlt: '#21405e',
secondaryColor: '#595959',
secondaryBgColor: '#333',
secondaryColorAlt: '#135784',
disabledBgColor: '#D3D3D3',
},
text: {
primaryColor: '#333',
primaryColorAlt: '#135784',
secondaryColor: '#595959',
secondaryColorAlt: '#135784',
},
borderColor: '#dedede',
backgroundColor: 'white',
outlineStyle: '2px dotted #595959',
avatar: {
borderRadius: '50%',
backgroundColor: '#D3D3D3',
color: 'grey',
},
}
</script>
<div
class="just-comments"
data-theme="jcMyTheme"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
In this snippet, a theme is defined in a global variable jcMyTheme. The variable's name is provided to the widget via data-theme. In every theme property, you can define any CSS expressions which are valid for this attribute (e.g. a color expression or outline style).
You may want to display same comments on different pages which have different URLs. By default, comments attach to the current page URL but there is a way to override this.
<div
class="just-comments"
data-pageid="UNIQ_PAGE_ID"
data-allowguests="true"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
data-pageid. All comments with the same pageid will be grouped and shown together. The actual page URL won't matter in this case.By default, comments are available for search engine crawlers and bots. It means that as soon as a search engine (for example, Google) indexes the comments, other users will be able to find your website using the comment content. This also means that crawlers will fetch comments just like normal users and, thus, they will consume additional credits. If you don't want the comments to be indexed and want to reduce costs, you can disable the access for bots by adding data-disableseo attribute.
<div
class="just-comments"
data-disableseo="true"
data-allowguests="true"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
There are a few additional options which you can configure:
data-sort (values: asc or desc) Determines the order of comments.data-pagesize (values: 1 to 100) Determines how many comments are shown at once.data-disableloadmore (values: true) Disables the Load More button.data-enablewebsite (values: true) Enables an additional attribute "Website" in the comment form.data-disableprofilepictures (values: true) Hides all profile pictures for all users.data-disablesharebutton (values: true) Hides the button to share a comment.data-hideattribution (values: true) Hides the "powered by" link. We are happy if you keep the link to support JustComments though.
<div
class="just-comments"
data-sort="desc"
data-pagesize="5"
data-disableloadmore="true"
data-enablewebsite="true"
data-disableprofilepictures="true"
data-disablesharebutton="true"
data-hideattribution="true"
data-apikey="YOUR_API_KEY">
</div>
<script async src="https://just-comments.com/w.js"></script>
When someone leaves a new comment on your website, JustComments sends an email to your account's email address. The email contains a link which allows hiding the comment if the content is not appropriate. Moderation does not require access to your account and, therefore, you can forward the moderation emails to someone else to do the comment moderation for you. Alternatively, you can configure a different email address for these emails in your account.
JustComments supports Markdown with tiny difference: whenever someone embeds an image or other content, it gets converted to a link.
By default, JustComments notifies the users about new replies to their comments using push notifications. While push notifications are great, they have a couple of drawbacks:
To increase the user retention and facilitate discussions, JustComments offers the possibility to enable email notifications. You can do it by adding an attribute data-enableemailnotifications="true" to your integration code.
How does it work? Users can opt-in to receive email notifications for replies to the comments they create. For the first time, the users will be asked to validate their email address. After that, when someone replies to a comment, an email will be sent by JustComments to the author of the comment.
Note that email notifications feature consumes additional credits. Every email sent costs 15 credits.
JustComments aims at supporting modern browsers. Therefore, by default, IE11 is not supported. To make JustComments work in older browsers include the following polyfills on a page with comments (startWith, ES6 Promise, Fetch API):
<script type="text/javascript">
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js" integrity="sha256-OI3N9zCKabDov2rZFzl8lJUXCcP7EmsGcGoP6DMXQCo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js" integrity="sha256-eOUokb/RjDw7kS+vDwbatNrLN8BIvvEhlLM5yogcDIo=" crossorigin="anonymous"></script>
JustComments supports code highlighting using highlight.js. If you want to highlight code in the comments, simply add the CSS file with a highlightjs theme that you want to use to your website. For example, adding this line inside the head tag will highlight code in the comments using the Monokai Sublime theme:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/monokai-sublime.min.css" />There is a lot of different themes available for highlight.js. You can choose any and host the CSS file yourself or import the styles from the public CDN.
It's possible to migrate existing data from other systems. Currently, the process has been tested for Disqus only. Contact us if you want to migrate from any other commenting system.
It's possible to import data from Disqus. In your Disqus account navigate to Admin -> select your site -> Community -> Export. Disqus will send you an XML file with your data. Send this data file to us and we will import it to your JustComments account.
Export the tables wp_comments and wp_posts to CSV files. Send these data files to us and we will import them to your JustComments account. Please exclude the post content column because it's usually quite big and not needed for the import process.