This thing is a modification to Ayano’s Comment Widget that allows you to pin specific comments.
To implement this to your site, here’s the steps:
- Go to the Google Form you used to set up the widget, add a short-answer text question
and name it ‘Pinned’, wait a bit, then delete it. Yes, really.
How does this work then?
We don’t need the question to pin comments, we’re gonna do it on the google sheets. You can also verify that ‘Pinned’ is on your Google Sheets for your comments, if there’s not, recreate it and delete it.
- Now, we’re gonna edit some stuff on the forms. Find the
displayComments()
function on your script and find the// Main comments (not replies)
comment. We’re gonna edit the loop below. - Find the
c_container.appendChild(comment);
anda_commentDivs.push(document.getElementById(comment.id));
code. We’re gonna replace it to this:comment-widget.js if (comments[i].Pinned == true) {c_container.insertBefore(comment, c_container.firstChild);a_commentDivs.unshift(document.getElementById(comment.id));comment.style.display = 'block';} else {c_container.appendChild(comment);a_commentDivs.push(document.getElementById(comment.id));} - Now, find the
// Replies
comment, find thecontainer.appendChild(reply);
code, and replace that to this:comment-widget.js if (replies[i].Pinned == true) {container.insertBefore(reply, container.firstChild);} else {container.appendChild(reply);} - Now find the
createComment(data)
function on your script and abovecomment.appendChild(name);
, add this:comment-widget.js if (data.Pinned == true) {name.insertAdjacentHTML('beforeend', '[Pinned]');}You can modify the
[Pinned]
to anything as long it’s valid HTML, or just keep it like that. - And you’re good to go! Try it by commenting, then pinning it on the sheets, by setting your comment’s
Pinned
toTRUE
!