Widget code

To initialize any widget Cackle you need to put javascript code in a place where you would like to use the widget.

Initialization

Any widget Cackle defined javascript object in a global variable array cackle_widget. For instance, comments widget with id = 1:

cackle_widget = window.cackle_widget || [];      //Initialize global variable cackle_widget
cackle_widget.push({widget: 'Comment', id: 1});  //Adding comments widget to cackle_widget

You can add multiple widgets to the page.
For instance, two widgets comments, recent comments widget, counter and poll widget

(second widget comments will be placed in the element with id="comment"):
cackle_widget = window.cackle_widget || [];
cackle_widget.push({widget: 'Comment', id: 1});
cackle_widget.push({widget: 'Comment', id: 1, container: 'comment'});
cackle_widget.push({widget: 'CommentRecent', id: 1});
cackle_widget.push({widget: 'CommentCount', id: 1});
cackle_widget.push({widget: 'Poll', id: 5});

Configuring widgets

To change the default behavior of the widget, you need to add or change the settings. This can be done by adding or changing properties and methods javascript widget object, for example:

cackle_widget.push({widget: 'Comment', id: 1, someParams: 'someValue'});

To change the following options:

Parameter Type Default value Comment
widget String
  • Login
  • Comment
  • CommentRecent
  • CommentCount
  • CommentAdmin
  • Review
  • ReviewRating
  • ReviewAdmin
  • Chat
  • ChatAdmin
  • Poll
Determines the current widget
  • Login - login widget
  • Comment - comments widget
  • CommentRecent - recent comments widget
  • CommentCount - count comments widget
  • CommentAdmin - comments moderation widget
  • Review - review widget
  • ReviewRating - rating of products widget (for catalog page)
  • ReviewAdmin - reviews moderation widget
  • Chat - live chat widget
  • ChatAdmin - live chat admin widget
  • Poll - poll widget
id Int ID of the current widget
container String For all widgets default container different:
  • Login: mc-login
  • Comment: mc-container
  • CommentRecent: mc-last
  • CommentCount: нет
  • Review: mc-review
  • ReviewRecent: mc-review-recent
  • Chat: нет
  • ChatAdmin: mc-chat-admin
  • Poll: mc-poll
Changing the container you make it possible to use multiple widgets on the same page in different places.
countContainer String HTML element identifier (id) to fill count of comments or reviews. Mainly used for Tabs with comments, reviews. Example: <span id="count"></span> ... countContainer: 'count'
channel String Current page URL Any identifier, which will be attached comments on this page. The default is the current page URL without a domain. For instance http://site.ru/post/test?a=123&c=zzz, channel is /post/test?a=123&c=zzz.
chanParam String Parameter name from web page address to the value of which will be attached comments or reviews. For instance, if specify chanParam: 'product_id', then comments on http://site.ru/test?product_id=123 and http://site.ru/test?utm_source=google&product_id=123 will be the same.
chanWithoutParams Boolean false If true, then removes all parameters from channel. For instance http://site.ru/post/test?a=123&c=zzz, channel will be /post/test.
url String Current page address Changes the current page address. For example widget is initialized on the page http://site.ru/post/test?a=123&c=zzz, if you add url: 'http://mirror.ru/something', then links to the comments will be http://mirror.ru/something#cc-12345
ratingOff Boolean false Hide rating form (stars) and microdata in Comments widget
product Object Adds the description of product in Reviews widget according to microdata http://schema.org/Product. Using this parameter, the reviews are indexed in Google with rating as stars in the search results. For instance: product: {brand: 'Apple', name: 'iPhone 6 Plus 128Gb', photo: 'http://site.ru/iphone.png', price: 1000, priceCurrency: 'EUR'}
lang String en Language of the widget. Availability:
  • ru - Russian
  • uk - Ukrainian
  • be - Belarusian
  • kk - Kazakh
  • en - English
  • es - Spanish
  • de - German
  • lv - Latvian
  • lt - Lithuanian
  • el - Greek
  • fr - French
  • ro - Romanian
  • hy - Armenian
  • ka - Georgian
  • it - Italian
  • bg - Bulgarian
  • hi - Hindi
  • id - Indonesian
  • pt - Portuguese
msg Object To use own text labels in widgets: comments, reviews.
providers String googleplus;facebook;twitter; vkontakte;odnoklassniki;mymailru; yandex;tumblr;live;linkedin; stackoverflow;instagram;dropbox; soundcloud;foursquare;yammer; 500px;flickr;google;yahoo; myopenid;livejournal; wordpress;verisign;cackle; anonym;other; Order of social icons authorization. For example, you can restrict only two: providers: 'vkontakte;odnoklassniki;other;' Icon 'other' is used to cut off the rest of the icons and display the main window authorization.
theme String black Widget theme: 'black' - for sites with a dark background.
stream Boolean false Turns Comments widget continuous chat, in this mode, users see the new comments immediately, without notice.
ssoAuth String MD5 users data to sign-in via Single Sign-On.
ssoProvider Object Adds your brand icon for Single Sign-On.
ssoPrimary Boolean false Single Sign-On is a primary authorization method and for all other authorizations (social, anonymous) logout will be performed.
authPopup Function Overrides the sign in widget window. For details, see Overriding the authorization window.
sort String desc Sort comments in widget: 'asc', 'desc'.
size Number 10 The number of comments / reviews per page, maximum 100.
replies Number 5 The number of replies (comments) for review per page, maximum 100.
level Number 4 Level of nesting comments, 1 - cancels a tree view.
badge String Admin Badge comment from the moderator.
badgeHide Boolean false Hide moderator badge.
shareSocial Array ['vkontakte',
'odnoklassniki',
'mymailru',
'facebook',
'twitter',
'googleplus']
Social network in which you can share comments.
timeFormat String Time format: 'yyyy-MM-dd hh:mm:ss'
textHigh Number The maximum height of a comment (0 - disabled).
agreement URL The link to the user comments agreement (displayed as a checkbox with a link).
guestFirst Boolean Anonymous authentication tab will be the first in the login page.
guestHideEmail Boolean Hide Email in anonymous login page.
callback.create Array functions Event when a new comment, review. callback.create particularly useful when you need to track comments through Google Analytics or save comments to the external database.
callback.edit Array functions Event when editing a comment
callback.status Array functions Event at moderation comment, review
callback.vote Array functions Event voting for comment, review
callback.submit Array functions Event post a comment, review (only in the browser's author)
callback.reply Array functions Event add a comment to the review (only in the browser's author)
callback.ready Array functions Event when widget is loaded
callback.loggedin Array functions Successful user login
callback.logout Array functions User is logged out
callback.subscribe Array functions The user has subscribed to comments
callback.unsubscribe Array functions The user unsubscribed

Example

This example demonstration of the use of parameters of widget comments with id 1.

<div id="comments"></div>
<script type="text/javascript">
cackle_widget = window.cackle_widget || [];

cackle_widget.push({
    widget: 'Comment',
    id: 1,
    container: 'comments',
    countContainer: '#commentsCount',
    channel: '123555',
    chanWithoutParams: true,
    url: 'http://ajax.me/somepath#somepage',
    lang: 'en',
    providers: 'stackoverflow;facebook;twitter;vkontakte;odnoklassniki;linkedin;instagram;yammer;',
    theme: 'simple',

    ssoAuth: '4t34c4y78n3t54y42874nyt847yct874ynt74y84t05=',
    ssoProvider: {
        name: 'Sign-in by ajax.me',
        url: 'http://ajax.me/sign',
        logo: 'http://ajax.me/logo.png',
        width: 30,
        height: 30
    },

    sort: 'asc',
    timeFormat: 'MM-yy hh:mm:ss',

    callback: {
        create: [function(comment) { console.log(comment); }],
        edit: [function(comment) { console.log(comment); }],
        status: [function(comment) { console.log(comment); }],
        vote: [function(comment) { console.log(comment); }],
        submit: [function(comment) { console.log(comment); }],
        ready: [function(comment) { console.log(comment); }]
    }
});

(function() {
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cackle.me/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

Own text labels in widgets (comments, reviews)

With the parameter msg you can use own text in the widget comments or reviews. For it in the initialization code of widget, add msg parameter in the following format (for example for Comments widget):

cackle_widget.push({
    widget: 'Comment',
    id: 1,
    msg: {
        placeholder: 'Your question?',
        submit: 'Ask a question',
        sort: 'Order'
    }
});

Name of text labels (placeholder, submit, sort, и т.д.) you can see in JavaScript resource file placed at: http://cackle.me/widget/js/lang/<widget_name>[_<lang>].js.
For example for English:

  • Comments widget: http://cackle.me/widget/js/lang/comment.js
  • Reviews widget: http://cackle.me/widget/js/lang/review.js

Using Cackle on AJAX sites

Any widget you can always initialize dynamically using the Cackle.bootstrap

<html>
<head>

<script type="text/javascript">
var cackle_ajax_init = function() {
    cackle_widget = [];
    cackle_widget.push({widget: 'Comment', id: 1, url: 'http://example.com/#somepage'});
    Cackle.bootstrap(true);
};
</script>

</head>
<body>

<button onclick="cackle_ajax_init()">Reload Cackle</button>

<div id="mc-container"></div>
<script type="text/javascript">
cackle_widget = window.cackle_widget || [];
(function() {
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cackle.me/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

</body>
</html>

Overriding the authorization window

To override the authorization window you need to add into widget object authPopup parameter. This is function, where the logic is overdetermined authorization. The function takes a parameter: callback.

Parameter callback is a function that should be called after AJAX login (without refreshing the page) with passing SSO token as argument.

Regardless of whether you are refreshing or not the page (AJAX), after authorization will be automatically called prior user event (comment submit, vote, rating, etc.) if it has been.

Examples of use:

<script type="text/javascript">
cackle_widget = cackle_widget || [];
cackle_widget.push({
    widget: 'Comment',
    id: 1,
    authPopup: function(callback) {
        // 1. Example of AJAX authenticate via Cackle Login widget
        Cackle.Login.main({
            host: 'http://localhost:8080',
            id: 1,
            container: 'cackle-login',
            data: {
                providers: 'google;vkontakte;facebook;twitter',
                callback: function() {
                    callback();
                }
            }
        });

        // 2. Example of AJAX Single sign-on authenticate, for example via dummy ajaxLogin plugin
        $('#ajax-login').ajaxLogin({
            success: function(ssoAuth) {
                // Authentication is successful, ssoAuth is Single sign-on token generated on the server
                callback(ssoAuth);
            }
        });
    }
});
</script>
// 3. Example of authorization with page refresh
<script type="text/javascript">
cackle_widget = cackle_widget || [];
cackle_widget.push({
    widget: 'Comment',
    id: 1,
    authPopup: function(callback) {
        // Redirect to sign in page
        window.location.href = "http://site.com/login";
    }
});
// Next comes the authorization process on the server
// Return back to the widget form make by developer
// After successful authorization prior event (if any) is called automatically
</script>