This guide explains how you can add a 'like' button to pagescomments and attachments in Scroll Viewport.

Please note that only logged-in users can like content using this button.

Implement a like button

  1. Firstly, add this code to your <head> element:

    <meta name="username" content="$user.username">
    <meta name="context-path" content="$contextPath">
  2. Then, place this code next to the content that you want to add a like button to:

    <div class="like-container">
        <a data-content-id="$" style="display: none;"></a>

    In this example, the data-content-id is ' $ ', meaning that this code will add a like button to the page itself.

    However, you can also change the data-content-id value to the element id of comments and attachments to give them a like button.

  3. Now, embed this script in the page:
$(document).ready(function () {
    var username = $('meta[name=username]').attr('content')
    var contextPath = $('meta[name=context-path]').attr('content')
    if (username !== "") {
        var likeElements = $('.like-container')
        likeElements.find('a').on('click', function(e) {
            var linkElement = $(
            if ($('content-id')) {
                pageId = $('content-id')
                url: contextPath + '/rest/likes/1.0/content/' + pageId + '/likes',
                type:'.liked') ? 'DELETE' : 'POST',
                contentType: 'application/json'
            }).done(function(data, textStatus, jqXHR) {
                linkElement.text('.liked') ? 'Unlike' : 'Like')
            return false
        likeElements.each(function(index, likeElement) {
            var likeElementLink = $(likeElement).find('a')
            var likeElementText = $(likeElement).find('span')
            pageId ='content-id') || pageId
            $.get(contextPath + '/rest/likes/1.0/content/' + pageId + '/likes').done(function(data) {
                var isLiked = false
                $.each(data.likes, function(index, like) {
                    if (like.user && === username) {
                        isLiked = true
                        return false
                if (isLiked) {
                } else {
                likeElementText.text(data.likes.length +' people like this content')

Of course, this code is just an example. For instance, you could delete the text in line 41 if you don't want to display the number of likes.

Modifying the code

After the buttons are initialized, inspecting their REST API HTTP call will return data that developers can use to expand the code in various ways:

The information reported here includes the following data:

content_idthe content's unique identifier
content_typethe type of content (page, comment or attachment)

expanding this displays a list of all users who have liked this element. The following information fields are displayed:

  • avatarUrl – the URL of the avatar of the user who liked the content
  • followedByRemoteUser – shows whether the user who clicked 'like' is followed be the currently logged in user
  • fullName – the full name in Confluence of the user who liked the content
  • name – the Confluence username of the person who liked the content
  • url – the Confluence profile page of the user who liked the content (the structure of this address: /display/~user )

summarythe text that appears after the user clicks the like button


This is what the button (made with unedited code from above, and unstyled) looks when implemented for page comments: