ayano's neocities comment widget!

i created a neocities-friendly comment system! i love static web hosting, and i love neocities, but i've always found it frustrating that the only options to include a comment section on my websites were usually either not very customizable, redirected to external pages, or even costed money to remove ads and get all the features. this comment widget is my solution. you can see a working example of it on the rightat the bottom of the page! the example shown uses the standard dark theme. feel free to leave a comment with it! (but please don't spam or overuse profanity!) the comment section is currently closed since i've been a bit overwhelmed by all the attention, i'm sorry! you can still see the comments and replies left on it, and it will open again at a later time. if you need help troubleshooting, you can still contact me through email. i am planning a QOL update to the widget at a later time, so look forward to that.

features

requirements

how to install

this comment widget works through google forms/google sheets. it essentially masks a google form as a custom form when the user submits a comment, and to display comments to the user, it accesses the google sheet those form responses are automatically submitted to, pulls the data from it, and formats it onto the page. therefore, to set it up, a few things need to be done on google drive. the below guide will walk you through every step of the process.

downloading the widget



  2. extract the files from the .zip and put them wherever you want to on your site (if you separate the background images from the .css file and want to use them, make sure to update the file path for them in the .css)
  3. when you open the .js file for the first time, you will notice a section at the top for changing user settings, full of comments explaining what each setting does. don't worry about everything else and for now, just navigate to const s_stylePath = 'comment-widget.css'; and change the path to wherever you put the .css file on your site. make sure to leave in the quotation marks!
  4. i would also recommend changing the line of code <script src="comment-widget.js"></script> in the comment header to have the correct path to the .js file on your site, so you can easily copy/paste it later.
  5. now you'll set up the google form and google sheet so you can fill in all the IDs listed!

setting up the google form and sheet

  1. make a google account if you haven't already. this should be pretty self explanatory
  2. head over to google drive and make a new google form. name it whatever you want so you can remember what it's called later, it doesn't matter
  3. make 5 different questions, all with the following titles exactly as written (these are CASE SENSITIVE, don't forget the capital letter for each one!):
    1. Name
    2. Website
    3. Text
    4. Page
    5. Reply
  4. your form should look like this (don't mark any as required except for Name and Text if you want to!): the way the form should look with all 5 categories
  5. if you want to be notified whenever you receive a new comment, head to the Responses tab, tap the three dots, and then "Get email notifications for new responses"
  6. now, also in the Responses tab, press "Select destination for responses". choose "Create a new spreadsheet" and name it whatever you want.
  7. press "View in Sheets" to open your new spreadsheet. you will notice it has columns for every field you just entered, plus "Timestamp". any comments you receive will show up on this page. if your first language isn't English and the Timestamp column generated in a different language, change it to "Timestamp"!
  8. to make sure the widget can get the sheet data properly, the sheet needs to be public. press "File", then "Share", then "Share with others". at the bottom where it says "General access", change "Restricted" to "Anyone with the link". make sure the option for document control is limited to "Viewer", do not change to "Commenter" or "Editor"! the way the share menu should look as described before
  9. go back to the google form. press the three dots in the top left corner and then "Get pre-filled link". this should 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".
  10. copy the link and paste it into a notepad or wherever, doesn't really matter.
  11. the link looks like a mess right now, but this is where you'll get all the IDs to slot into the javascript file! i will use the generated URL https://docs.google.com/forms/d/e/1FAIpQLSehjOWKnRiEClXR42v4WMVCqLuUKg4Xoncu26yeYJoGVfd1Vw/viewform?usp=pp_url&entry.1743958157=Name&entry.103116453=Website&entry.1487225851=Text&entry.2098775854=Page&entry.63675495=Reply as an example.
    you need to separate out all the strings of letters and numbers like so:
    1. const s_formId = '1FAIpQLSehjOWKnRiEClXR42v4WMVCqLuUKg4Xoncu26yeYJoGVfd1Vw';
    2. const s_nameId = '1743958157';
    3. const s_websiteId = '103116453';
    4. const s_textId = '1487225851';
    5. const s_pageId = '2098775854';
    6. const s_replyId = '63675495';
  12. as for the ID for the sheet, go back to the google sheet and copy the ID from the URL bar. for example, https://docs.google.com/spreadsheets/d/1yM1qkcNHo-BoOzAeBm-z-4ZiInDO09argG1xgiSIWoc/edit?usp=sharing would result in const s_sheetId = '1yM1qkcNHo-BoOzAeBm-z-4ZiInDO09argG1xgiSIWoc';
  13. you'll also need to fill in your timezone information if you want timestamps to be accurate - simply look up what your numeric timezone is, ie. Eastern Standard Time is UTC-5:00, which would make s_timezone -5. if where you live uses DST, mark that as true and fill out the start/end dates accordingly. otherwise, you can simply set it to false and not touch the s_dstStart and s_dstEnd fields. if you do need to edit them though, make sure your month/day names are in english, or else it won't work!
  14. you're done filling in required information! now you can change any optional settings if you want (descriptions of each setting are written next to each one) and you won't have to do that part ever again.

putting comment sections on your site

  1. as written in the comment header of the .js file, simply paste <div id="c_widget"></div> and <script src="comment-widget.js"></script> wherever you want to have a comment section on your site, but make sure the path to the script is correct for your site! if you put a comment section on multiple pages, new comment sections will automatically be generated. this means each page has its own unique comment section.
  2. if you want to stylize your comment section differently from the default theme you downloaded, you can head into the .css file and customize to your heart's content. documentation on all of the ID and class name selectors are in the file itself. have fun!

update log

8/5/23 - scratch the previous update, it didn't fix the issue, but now it should be fully fixed after thorough testing. please re-download the widget and fill your information back in; you can just copy/paste your previous settings, but fill in the new timezone settings! the tutorial has been updated accordingly. if you don't update the widget, replies won't display to users in different timezones than you properly, so it's a very important update!

unfortunately, old replies before the update are broken, and you have two options on how to handle updating:
1. just delete any rows in your spreadsheet that have anything in the Reply column and start fresh
2. manually edit each reply you want to keep after the |--| part by copy pasting the value in the Timestamp column for the comment it's in reply to exactly as-is. example of how to do this: a properly edited reply value if you don't take either option above, replies will continue to break on some users' screens, and they also won't be able to leave comments/replies, so please take care to do either or a mix of both!

i want to deeply apologize for the bug and not detecting it and fixing it sooner. i did not intend to leave broken code on anyone's site and i take great care with bugtesting and making sure everything is functional before pushing it live, and unfortunately i missed the mark this time. also unfortunately as is the nature of neocities, i can't exactly push an update to everyone and prompt you to update your site, so if you know anyone using the widget, please poke them on the shoulder to update! thank you so much for your patience.

7/20/23 - fixed a small bug to do with regional timestamps causing an ID mismatch. if you downloaded the widget before today, please re-download the widget and copy the javascript below all the optional settings over to the version on your site! otherwise you may experience users in a different region than you having reply trouble. if you had any replies already, you might need to delete those, apologies! (or you can just remove the reply ID from the reply column and it'll show up as a normal comment instead.)

troubleshooting and bug reporting

if you run into any issues and just can't seem to solve them on your own after reading the FAQ below, or especially if you run into any bugs i may have missed, please feel free to contact me by my email, bluemoonfalls@proton.me. this is the email used for my pokemon fansite since i do not currently have an email dedicated to this site. i will respond to you as soon as i can, but please be patient, i am not always online. i really appreciate it and i'm dedicated to fixing any issues with the widget if there are any!

alternatively, you can message me on my socials, pikavees on twitter or kafus on tumblr, though i'd much prefer email if possible.

FAQ

how do i moderate my comment section?

if you get an inflammatory or inappropriate comment, you can just go to the google sheet containing all the comments and right click it to delete that row, effectively removing it from the comment database. if you have a lot of comments, you can CTRL+F to find it on the sheet. deleting the response on the form page will not delete it from the sheet!

if you're getting spam or just want to close comments for a while but still want old comments to display on the page, you can change const s_commentsOpen = true; to false, and then also turn off taking new responses in the associated google form. this will hide the user input site-wide and prevent anyone from getting around it by going to directly to your google form URL, too.

can users submit HTML styling through their comments?

no, because it's a safety concern. you don't want people injecting code onto your website! names and comment text are inserted into the page as plain text, so any attempts to submit code won't work. (additionally, the website field is locked to only accept https:// links and cannot contain anything else)

if you want to add options for user styling that's something you'd have to implement on your own through javascript. i do not plan to add this as a feature.

why didn't you implement email collecting?

the google form and sheet that collects the comments are public to make this work, and i didn't want it to be possible for a user to open up the sheet with inspect element and see a list of emails that every user left behind. if you desire email collection, you're free to implement this behavior with javascript, though i think it might just be simpler to ask users to leave a method of contact or contact you privately if you need to be able to respond to them in a way that notifies them.

the default theme i installed looks weird, why?

CSS rules in other stylesheets on the page may be overriding the CSS of the theme. you'll have to edit the comment section CSS as desired.

can you add (insert feature here)?

maybe! feel free to reach out to me about it. just don't take it personally if i say no, i'm busy with a lot of projects. i encourage you to learn javascript as well if you'd like to implement your own stuff, it's fun!

if i want to credit you/support you, how should i do so?

you don't have to credit me on your page, but if you do, i'm flattered! you can just link back to https://virtualobserver.moe/. our site button is here if you'd like to use it, but please don't hotlink it - download it to your site!
our website button as for direct support, my ko-fi is always open for tips. but please never feel obligated, my public projects on this site will always be free to use forever!