The Page Reacts widget displays a customizable set of reaction icons on the comment widget.

Users can click the images to react, and it remembers reactions they've selected per-page. If they are logged into fastcomments.com, this is tied to their account.

If you click Run on the example below you can see it in action.

For Page Reacts we have to decide on two things:

• What reaction images to use.
• A short id to name each reaction.

Optionally:

• You can also define optional separate images for selected/unselected reacts.
• You can decide if you want to show the list of users who reacted when moving a mouse over one of the reactions.

Page Reacts Code Example

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="page-reacts-example"></div>

4<script>

5 window.FastCommentsUI(document.getElementById('page-reacts-example'), {

6 tenantId: 'demo',

7 pageReactConfig: {

8 showUsers: true,

9 reacts: [

10 {id: 'droll', src: 'https://docs.fastcomments.com/images/emojis/droll.png'},

11 {id: 'he', src: 'https://docs.fastcomments.com/images/emojis/heart-eyes.png'},

12 {id: 'laugh', src: 'https://docs.fastcomments.com/images/emojis/laugh.png'},

13 {id: 'puke', src: 'https://docs.fastcomments.com/images/emojis/puke.png', selectedSrc: 'https://docs.fastcomments.com/images/emojis/puke-bw.png' },

14 {id: 'rofl', src: 'https://docs.fastcomments.com/images/emojis/rofl.png' },

15 ]

16 }

17 });

18</script>

19

The configuration for the React, Angular, and so on frontend libraries is the same.

The floating likes widget displays a floating box in the bottom right hand of the screen with like and comment counts. You can see it in action on this page!

Users can click the heart to like the page, and it remembers pages they've liked. If they are logged into fastcomments.com, this is tied to their account to help prevent people from liking a page multiple times.

It also automatically detects the user's browser dark mode preferences and changes its skin to a dark version if desired.

Installation is simple:

Floating Likes Code Example

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo'

7 });

8</script>

9

The type signature of the constructor is:

Configuration

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Change this to set page/article id. By default, it is the page URL.

8 * @property {() => void} [onOpenComments]

9 * @property {object} [sso]

10 * @constructor

11 */

12

It supports sso to tie the reacts to the user's account for authentication.

Currently, only VanillaJS is supported. If you'd like this widget to be added to one of our client libraries, let us know!

Async Version

Floating Likes Code Async Example

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js?v=2" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

9 tenantId: 'demo'

10 });

11 } else {

12 setTimeout(tryLoad, 50);

13 }

14 }

15

16 tryLoad();

17 })();

18</script>

19

With SSO

We can pass Secure SSO or Simple SSO payloads as well:

Floating Likes Secure SSO Code Example

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 sso // pass sso object

8 });

9</script>

10

Floating Likes Simple SSO Code Example

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 simpleSSO: {

8 id: 'some-user-id',

9 username: 'some username',

10 email: 'some@email.com',

11 }

12 });

13</script>

14

For WordPress, this feature can be enabled by installing a plugin like WPCode and adding the following HTML snippet to the blog footer:

Floating Likes Code For WordPress

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 const articles = document.getElementsByTagName('article');

9 if (!articles.length) {

10 return console.warn('Article not found to show fastcomments likes.');

11 }

12 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

13 tenantId: '-VuPDR12d-v_',

14 urlId: articles[0].id.replace('post-', '')

15 });

16 } else {

17 setTimeout(tryLoad, 50);

18 }

19 }

20

21 tryLoad();

22 })();

23</script>

24