top of page
Custom Comments

Custom Comments

Create your own custom post comments section.





January 1, 2020

Girl Enjoying her Drink


Anchor 1
Hire a Developer

Example Description

In this example we created a custom comments section that does not require prior registration.

Example Code

Tab 1


Tab 2


Tab 3


This code solution can be complicated.

How We Built It


In addition to the database collections automatically added to your site if you have a blog, we added a collection for storing custom comments:

  • Post Comments Data collection: Contains information about your custom comments


Note: To simplify this example we set the collection permissions for adding and removing items to “anyone”, but best practice is to restrict permissions on the collection and use backend code with suppressAuth to read and write data to your collection.


Page Elements

In our site we added the following page elements:


  • Leave a Comment strip: Contains a customized form for adding comments: 

  • 2 text boxes: for user’s name and comment

  • Submission button

  • Hidden success message


  • Comment List repeater with the following items: 

  • User name text

  • User comment text

  • Comment date



  1. When the page is ready, use the blog getPost() function to get the current post’s data and save it in a global variable.

  2. Query the the Post Comments Data collection for post comments relating to the current post.

  3. Assign the queried comments as the commentsList repeater data, triggering the onItemReady() function.

  4. Bind the comment items to their relevant repeating items.

  5. Add an onClick event handler to the submission button that generates a new comment and adds it to the collection. Each comment item contains:

  • The current post ID

  • User’s name from the input

  • User’s comment from the input

  1. Insert this item into the collection and then do the following:

  • Show the success message

  • Reload the post comments including the new one

  • Clear the comment inputs

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?




Thanks for your feedback!

Custom Like Button

Custom Like Button

Create your own custom like button.



Custom Post Page

Custom Post Page

Create your own customised blog post page.



Related Posts

Related Posts

Display related posts in your blog post page



Anchor 2
bottom of page