neodug-commentbox
A super-easy to set-up-and-style comment box/guestbook for your website
Step 1
Register/log in to your neodug account
Step 2
Verify your email address
You haven't completed step 1 yet.
Step 3
Register your comment box
Complete previous steps first.
Step 4
Put the commentbox on your page
Below is some code to get you started, but your comment box code doesn't even have to look exactly like this.
The code can be heavily altered and it will still work. The requirements are...
- The script element must come first
- Everything else must be inside of a <neodug-commentbox> element
- The <neodug-commentbox> element must have a name="" attribute which contains the name you picked when you registered your commentbox
- A <cb-comments> element for the comments to be loaded into
- {{author}}, {{body}}, and {{date}} inside of <cb-comments>
- A form element with a data-cb-form attribute, containing inputs with the names "author" and "body"
Optionally, you can also...
- Add pagination buttons and display the current page number and total pages (see example)
- Display error messages if an error occurs when, a) fetching the comments, and/or b) when submitting the add-comment form
- Add a perpage="" attribute to the <neodug-commentbox> element to change how many comments are shown on each page (e.g. perpage="25"). The default is 10.
Step 5
Customize to your heart's content
Style it however you'd like with CSS. Alter the structure with HTML. Note that during various loading and error states, the class list on the <neodug-commentbox> element will change. Take advantage of these to show/hide various parts of your comment box while the comments are loading, for example.
class | when it's active |
---|---|
ndcb_fetching | While the comment are being fetched for the first time |
ndcb_addingComment | While the add-comment form is being submitted |
ndcb_fetchError | When there was an error when trying to fetch the comments |
ndcb_addCommentError | When there was an error when trying to submit the add-comment form |
Things I wanna say
Bugs/troubleshooting
I threw this together in about two days, so there are bound to be some bugs I haven't noticed. If you want to report them, message me on discord @dugnoise or email me: dougalcedo@gmail.com
I plan on uploading a video tutorial to YouTube soon.
I plan on making it so that you'll be able to manage your comments. i.e. delete ones you don't like, make it so they must be approved first, etc...
I think I can implement IP bans and spam protection too. Just be patient with me.
For those who don't want to style it themselves, there will be templates available in the future to choose from. If you want your template to be featured on my website, just send me a message.
If a lot of people end up using this, I may need to start paying for database hosting. If you want to help me with that, and support me in my webdev journey, you can donate to me.