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.

1. 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`.

1. 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).

1. Add another section below the form and insert a grid block. Give this grid an ID of `gridComments`.
2. 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.

1. 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.