Skip to main content

Vanilla Javascript

Insert this script

<script src="https://slickcomment.com/js/sdk.js"></script>

After the script is loaded, a global object window.SlickComment will be available. This object has 5 methods:

  • renderDiscussion
  • renderUserComments
  • renderSiteComments
  • renderAdminWidget
  • renderCommentCounts

Using window.SlickComment#

The <script> tags in the following examples need to be placed after the script above.

Discussion widget#

<div id="slickcomment-discussion"></div>
<script>    window.SlickComment.renderDiscussion({        containerElement: document.getElementById('slickcomment-discussion'),        siteId: 'Replace with your site ID',        pageId: 'Replace with your page ID',        pageUrl: 'Replace with your page URL',        pageTitle: 'Replace with your page title',    });</script>

User comments widget#

<div id="slickcomment-user-comments"></div>
<script>    window.SlickComment.renderUserComments({        containerElement: document.getElementById('slickcomment-user-comments'),        siteId: 'Replace with your site ID',        targetUserSsoId: 'Replace with the target user SSO ID',    });</script>

Site comments widget#

<div id="slickcomment-site-comments"></div>
<script>    window.SlickComment.renderSiteComments({        containerElement: document.getElementById('slickcomment-site-comments'),        siteId: 'Replace with your site ID',    });</script>

Moderation widget#

<div id="slickcomment-moderation"></div>
<script>    window.SlickComment.renderAdminWidget({        containerElement: document.getElementById('slickcomment-moderation'),        siteId: 'Replace with your site ID',        getUserSsoToken: function() {            // this must be implemented        }    });</script>

NOTE: This widget requires function getUserSsoToken to be implemented. See page Single Sign-On for how to do it.

Comment count#

<span data-sc-page-id="Replace with your value"></span>
<script >    window.SlickComment.renderCommentCounts({        siteId: 'Replace with your site ID',        translations: {            zero: '0 comments',            one: '1 comment',            many: '{{count}} comments',        }    });</script>

When renderCommentCounts is called, SlickComment will find all the elements with attribute data-sc-page-id and fill the elements with the comment counts. If the page ID is not found, it will default to 0 comments.

Update created widgets#

To update the widgets without refreshing the page, assign the widget instance to a variable. 

const widget = SlickComment.renderDiscussion(options);

Then you can call method update() on it. 

widget.update(newOptions);

Comments