Adding moderation to Virtual Observer's comment widget

Written on

A friend highlighted to me that my guestbook didn't have any moderation, I get emails every time someone submits a comment, but depending on my access to a device, a potentially harmful comment could be left exposed to others until I am able to delete it.

My guestbook is based on Virtual Observer's comment widget, which uses a Google sheet as a database, it's super clever and up until now I've only made a couple of minor modifications to fit my website. This modification is more functional and could benefit others significantly, so here is my walkthrough on how to do it yourself. To get to this point, you should already have followed the rest of Virtual Observer's instructions on how to install the comment widget.

How to do it

  1. Go to the form that you set up for your comment widget and add a new short-answer text question at the bottom.
  2. Name this question 'Moderated'. Don't forget the capitalise the first letter as the code is case sensitive.
  3. Add a layer of security, press the three dots in the bottom left corner of the new 'Moderated' question, select 'Response Validation' and add the settings: "Text" "Contains" "false" *
  4. From your Google form, press the three dots in the top left corner and then 'Get pre-filled link'. This will open a new tab with your form, as if you were answering it. Fill in every field with the same name as its respective title and then press 'Get link'.
  5. Paste the link into a text editor and scoop out the number after the final entry. which should have the value that you filled in: 'Moderated'. It will look something like this:
&entry.123456789=Moderated
  1. In the file that you originally downloaded from Virtual Observer, find the variable const s_textId = '123456789'; and paste the following on the line below, replacing the number with the number you scooped out in step 4.
const s_moderatedId = '123456789'; // The Moderated field ID
  1. Now we need to add a hidden input field that automatically sets this value to false in your Google sheet. Find the textarea with id="entry.${s_textId}" and below this line, add the following.
<input name="entry.${s_moderatedId}" id="entry.${s_moderatedId}" type="hidden" readonly value="false">
  1. Next, find name.className = 'c-name'; and below this line add the following:
if(data.Moderated == false) {
    name.innerText = 'Guest'; // Change 'Guest' to whatever you want
}
  1. Next, find site.className = 'c-site'; and below this line add the following:
if(data.Moderated == false) {
    site.innerText = '';
}
  1. Next, find text.className = 'c-text'; and below this line add the following:
if(data.Moderated == false) {
    text.innerText = 'This comment is awaiting moderation'; // Change this value to whatever you want
}

And you're done! If you already have comments stored in your Google sheet, change the 'Moderated' value to TRUE for them to show.

When a new comment is submitted the 'Moderated' value will be FALSE. Once you're happy for the comment to be displayed on your website, go into your Google sheet and change it to TRUE.

If you implement this, leave me a comment in my guestbook to let me know!
I'd love to know if this is useful to you.

* 👍 Thank you to 'Robert' for this addition.