Widgets JavaScript API

To install widget on your website you need to copy and past widget code where you want to display it.

The standard widget code is as follows:

Where:

ELEMENT_ID - root ID of DOM element, for example wpac-comment or wpac-rating
WIDGET_NAME - can be: Comment, CommentRecent, CommentCount, Review, ReviewRecent, ReviewCount, Rating, Login
SITE_ID - your site ID

To get this widget code Sign Up and registered your site then go to menu Site - Install.

Widget channel

One of the basic concepts of any widget is a channel. Channel is identifier which binds of widget data (like comments, reviews, ratings and etc) and web page (or product, photo, topic and etc web items) where widget is located.

By default the channel is current address of the web page where widget is placed. For instance: Comments widget placed on http://example.org/test page then channel is /test and all comments on this page (http://example.org/test) linked to /test.

One important note is that the default channel gets without protocol, domain and parameters. For instance: Reviews widget placed on https://example.org/blog/page1?p=abc&_=231243253 page then channel is /blog/page1. As you can see protocol, domain and parameters ignored. According to this all reviews on this page linked to /blog/page1.

Custom widget channel

Often the default channel is not enough because addresses of web pages may change (SEO). In this case all widget data (comments, reviews, ratings and etc.) may disappear because channels become new.

To avoid this problem we strongly recommend to use custom channel. This can be ID of web page or something than does not change if address of web page will change. For instance in WordPress plugin we use page ID (post->ID) as a channel.

To use custom channel you need to add chan parameter in widget code into wpac_init var.
For instance: wpac_init.push({widget: 'Comment', id: 12345, chan: '7395'});

Same data in different pages

With the help of custom channel you can get same data in any web pages with different addresses. Just add the same chan parameter in widget code on different pages and widget data will be equals.

For instance: we need to have the same comments on http://example.org/page1, http://example.org/page2 and http://example.org/page3. So add chan: '1' parameter to widget code on all three pages and comments on there will be the same.

http://example.org/page1 ... wpac_init.push({widget: 'Comment', id: 12345, chan: '1'}); ...
http://example.org/page2 ... wpac_init.push({widget: 'Comment', id: 12345, chan: '1'}); ...
http://example.org/page3 ... wpac_init.push({widget: 'Comment', id: 12345, chan: '1'}); ...

Several widgets on the same page

To have several widgets on the same page you need to insert the code of any widget once and then add new widgets to the DOM element and array of objects wpac_init.push({...});.

For instance, let us insert comments widget on the page three times.
First insert the comments widget code to the page (id: 12345 is example, your id will different):

The next step is to add other two comments widget into separate div elements (for example 'comments2' and 'comments3'):

Important note: in example above for second and third comments widget we use different channels (chan) to have different comments in each widgets.

Using on AJAX sites

Any widget you can always initialize dynamically using the WPac.init({...})

Configuring widget

To configure any widget you need to add configuration settings in widget code into array object wpac_init. For instance: