Adding Blog Comments to Webflow using Xano!

Ever wanted to add a comment section to your blog but found it challenging to implement? Well, with Xano and Webflow, you can easily add this functionality without writing a single line of code! In this step-by-step guide, we'll show you how to integrate a comment section into your Webflow-built blog, allowing your readers to leave comments and engage with your content seamlessly.

What is Xano?

Xano is a no-code platform that enables you to build and deploy backend services for web and mobile applications without writing code. It provides a visual interface for designing data models, creating APIs, and setting up authentication and authorization. Xano aims to simplify the process of backend development, making it accessible to both non-technical users and developers who want to speed up their development process.

Prerequisites

Before we begin, make sure you have:

1. A Xano account (you can sign up for a free trial if you haven't already)
2. A Webflow project with a blog set up using the Webflow CMS

Step 1: Set up the Data Structure in Xano

1. In your Xano account, create two tables: BlogPosts and Comments.
2. In the BlogPosts table, add the following fields:

• slug (Text field) - This will store the unique identifier for each blog post.
• commentIds (Table Reference field formatted as a List) - This will store the IDs of comments associated with each blog post.

3. In the Comments table, add the following fields:

• author (Text field) - This will store the name of the comment author.
• comment (Text field) - This will store the comment text.

Step 2: Create APIs in Xano

1. Create a POST API endpoint called postComment to handle new comment submissions. This endpoint should:

• Accept author, comment, and slug as input parameters.
• Check if a record exists in the BlogPosts table for the provided slug.
• If a record exists, update the commentIds field by appending the new comment ID.
• If no record exists, create a new record in the BlogPosts table with the provided slug and the new comment ID.
• Create a new record in the Comments table with the provided author and comment.

2. Create a GET API endpoint called getComments to retrieve comments for a specific blog post. This endpoint should:

• Accept slug as an input parameter.
• Query the BlogPosts table for the record with the provided slug.
• Retrieve the commentIds associated with the found record.
• Query the Comments table to retrieve the comments with the retrieved commentIds.
• Format the comment timestamps to a more readable format (e.g., day, month, year).

Step 3: Set up the Comment Section in Webflow

1. In your Webflow project, navigate to the blog post template page.
2. Add a new section below the blog post content and insert a form block. This form will be used for comment submission.

• Change the name field ID to author.
• Change the label of the second field to comment.
• Change the submit button type to post.
• Set the submit button action to the postComment endpoint URL from Xano (copy the endpoint link from Xano and paste it here).

3. Add another section below the form and insert a grid block. Give this grid an ID of gridComments.
4. Inside the grid, add a div block with the class sampleStyle. This will act as a template for rendering individual comments.

• Inside the sampleStyle div, add a paragraph element for the comment text.
• Add another div block inside the sampleStyle div.
• Inside the nested div, add a heading 3 element for the author name.
• Add a heading 5 element for the comment date.

5. Hide the sampleStyle div so it doesn't show up on the page (we only need it as a reference for the custom code).

Step 4: Add Custom Code to Webflow

1. In the page settings of your blog post template, go to the "Custom Code" section and paste the provided JavaScript code from the Xano resources (linked in the video description).
2. Update the XanoURL variable at the top of the code with the getComments endpoint URL from Xano (copy the endpoint link from Xano and paste it here).
3. Save the changes.

Step 5: Test and Deploy

1. Publish your Webflow project and open the blog post page.
2. Try submitting a new comment using the form.
3. Verify that the new comment appears on the page without a page refresh.
4. Check the Comments and BlogPosts tables in Xano to ensure the data is being stored correctly.

Congratulations! You've successfully added a comment section to your Webflow-built blog using Xano's no-code backend solution. Your readers can now engage with your content by leaving comments, and you can manage the comments directly in Xano.

This approach can be easily adapted to handle other use cases like product reviews or any scenario where you want users to submit form data and have it appear on the page without a page refresh.