Skip to content

Grounded Wren
Demo Controls
Guestbook

Guestbook Demo

Guest Comments

Page Notes

Update - important note! Neocities has updated its content security policy to disallow new non-paid sites loading or posting content to other domains, so if you don't pay for neocities this won't work for you :(

This page demonstrates a guestbook implemented using my comments control! A guestbook is only one use; you can also use this control to allow comments on blog posts or any page you like really.

The comments control works by sending messages to a Discord channel you can set up via a webhook. Once you've reviewed the comment, you can copy its contents into a Google Sheets page, which the control pulls from to display!

To place the control in a page, you need to add two custom elements (they can be anywhere on the page - not necessarily next to each other).

<gw-comment-form>

This is the form with which a user can input a comment. It has a few attributes you need to set:

id: This is the id the comments list will use to find the form.
titleText: This is the text displayed inside the form. Here, it's Sign the Guestbook
discordURL: This is the discord webhook URL for the channel you want to send comments to. You can find it in Edit Channel (gear icon) / Integrations / Webhooks / <your webhook> / Copy Webhook URL

<gw-comment-list>

This is the list of comments pulled from Google Sheets. It has a few attributes you need to set:

gSpreadsheetId: This is the ID of the Google Spreadsheet you're pulling from. Information about how to get this is on the Google Sheets Reader Gizmo demo page
gSheetId: The name of the particular sheet you're pulling from. Information about this is also on the Google Sheets Reader demo page.
isNewestFirst: Set to true if you want newer comments on top, like for a guestbook. Normal forums have new comments at the bottom; this is the default.
gwCommentFormId: The ID of the associated <gw-comment-form>. This is how the reply buttons work!

Setting up the Google Sheet

This control expects the Google Sheet you're using to be in a particular format (basically, that you have the columns that it's looking for). To make a column in Google Sheets, just type the column name in the first row (more on the Google Sheets Reader page). The expected columns are as follows:

ID: The ID of the comment. Start at one, and increment for each comment you get.
Display Name: The name of the commenter in plain text.
Email: The email of the commenter. Not currently used, but you can reference this if you'd like to contact the person.
Website: A website to link to from their comment.
Comment: The comment itself in plain text.
Timestamp: When the comment was submitted in RFC 7231 format (the output of javascript's date toUTCString function).
ResponseTo: The ID of the comment this comment is responding to, otherwise blank.

All of this information is included in the message the form component sends to your Discord channel. Here's an example message:
name=Vera; email=vera@groundedwren.com; website=https://groundedwren.com/; comment=Testing this comment feature!; responseTo=; timestamp=Mon, 16 Oct 2023 00:37:33 GMT

You may review the sheet this page pulls from to help create your own.

Dependencies

This control has a couple (GroundedWren code) dependencies which must be included in your markup above the guestbook.js script. All of these files are also linked below, and this page demonstrates their usage.

Google Sheets Reader Gizmo
SVG Icon Control

Files

Add the highlighted files to your page to get started!

Markup

guestbookDemo.html

Scripts

googleSheetsReaderGizmo.js
svgIconControl.js
comments.js
guestbookDemo.js

Styles

svgIconControl.css
comments.css
guestbookDemo.css