Documentation

Comments widget

The comments widget code Stream needs to be inserted into HTML page code where you want to display the comments

The standard comments widget code is as follows:

<div id="hypercomments_widget"></div>
<script type="text/javascript">
_hcwp = window._hcwp || [];
_hcwp.push({widget:"Stream", widget_id: WIDGET_ID});
(function() {
if("HC_LOAD_INIT" in window)return;
HC_LOAD_INIT = true;
var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage ||  "en").substr(0, 2).toLowerCase();
var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/WIDGET_ID/"+lang+"/widget.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hcc, s.nextSibling);
})();
</script>
<a href="http://hypercomments.com" class="hc-link" title="comments widget">comments powered by HyperComments</a>

, where

  • WIDGET_ID - your widget ID

You can get your widget code when you are registering in HyperComments or you can take it in the admin panel "Settings"-"Main".

Configuring widget

To configure comments widget you need to add configuration settings from widget code into array object _hcpw For example:

_hcwp = window._hcwp || [];
_hcwp.push({widget:"Stream", widget_id: WIDGET_ID, SETTINGS_KEY: SETTINGS_VALUE});

, where

  • SETTINGS_KEY - Widget settings option name
  • SETTINGS_VALUE - Widget settings option value

 

Widget configuration settings
Option Values By default Description
xid String of any lenght null You can set the page ID and link all the comments to it. By default widget is created for each new page based on URL. By setting the ID you can load the same comments on the pages with different URL addresses. Page ID can be any string which doesn't include special characters (?,!,%$#><).
append block id #hypercomments_widget Allows to insert the widget into specified HTML element. The value takes the element id (#idname).
title String of any lenght Tag value title of the page Allows you to specify the title of the page that will be displayed in the admin panel.
css css file address null Allows to load css file to change the widget styles.
Only for Professional and Enterprise plans
href Page URL without http, https, www Page address, where the widget is set You can display comments from any page on the page with a different URL address using this option
pagination 0 or 1 0 Allows you to enable\disable page by page navigation in the widget. You can enable page by page navigation in the widget settings, but if the option pagination=0 is set, the page by page navigation will be disabled, because the widget code settings have higher priority.
hc_disable 1 - Hypercomments disabled, 0 - enabled. 0 Allows to disable hypercomments on the page
quote_disable 1 - Quotes disabled, 0 - enabled. 0 Allows to disable Quotes on the page
words_limit int 10 Allows you to set the maximum number of words which can be left for hypercomments
comment_length int Limited by size on the server Allows to set maximum number of characters for comment
social String with social networks "google, facebook, twitter, vk, odnoklassniki, mailru, yandex, openid" Allows you to specify the list and order of social networks that can be used for authorization. Authorization providers values are given by a comma, the order specifying social networks matches to the order of their displaying in the widget.
realtime true or false true Allows to disable comments displaying in real time. Instead of that, it will be displayed the messages identificator in real time.
comments_level int 4 Allows you to set the level of comments nesting for displaying filter "All".
like_href page URL Page address, where the widget is set Allows to set link to the page which will be located in social network when the button "Like" is pressed
like_title String of any length The value of title page Allows to set page title that will be located in social network when button "Like" is pressed
auth String of any length null Allows to synchronize users of your website with users of HyperComments. (see details)
auth_url Page URL to authorize via website null Allows to transfer authorization url via user website. GET option will be added return_to to authorization url, and will have url value that athorized users on the website (For example: http://sitename.com/authurl?return_to=http://sitename.com/page/1). You can set the authorization URL in widget's API settings, but the widget code options have higher priority.
IMPORTANT!!! To enable authorization via website you need to put a required checkbox in "API settings". In order to have the opportunity to authorize via website you need to to add options auth_logo and auth_title too
auth_logo String of any length null Allows you to set the address of the website logo in a popup window of user authorization
auth_title String of any length null Allows to set the authorization signature via website in a popup window of user authorization.
callback function null Callback function, which is called after the widget initialization. It has 2 options: app - copy of HC object, init - widget options. Example of use:
_hcwp.push({widget:"Stream", widget_id: WIDGET_ID, callback: function(app, init){ console.log('Log message after init HC'); }});
              

This example would display a message "Log message after init HC" to the console after widget initialization.

In the callback function you can subscribe to events that occur in the widget. For example:

_hcwp.push({widget:"Stream", widget_id: WIDGET_ID, callback: function(app, init){ app.on('siteAuth',function(packet){ console.log('event site auth');
  }); }});
              

This example would display a message "event site auth"" to the console at the moment of authorization from the user's website.

packet - some event options

List of possible events:

  • siteAuth - Event of authorization via user's website
  • streamMessage - Event when comment is added
  • streamTopic - Event when hypercomment is added
  • streamDeleteMessage - Event when comment is removed
  • streamEditMessage - Event when comment is edited
  • streamLike - Event when article is voted
  • streamVoteMessage - Event when comment is voted