Is there any way to create a comment field in blog posts without a plugin?

The reason I don’t like the plugins is that I don’t seem to be able to customize the design of the comments and comment field completely to match my site. I would like it to be a fold-down option that looks somewhat like this:

:slight_smile:

@Louise_Hou I believe that if you try to use the Zapier solution as mentioned above, you would be able to customize the element of the dynamic rich text (or whatever you use) exactly as you like it - since it would not be any different from any other collection item

2 Likes

Intense debate does allow threaded comments @Louise_Hou. You do need to customize the CSS to make it look nice.

1 Like

Hi Louise,

Did you find a way to do this? I am working on it and for both design and SEO reasons (better in your own HTML than in a widget), I would rather have it through our own CMS pages. I found this way:

Webflow form + Zapier + Gsheets

  1. Webflow Form : submission with: name; comment
  2. Rows generated in Gsheets via Zapier connection
  3. CMS item is generated via Zapier connection
  4. CMS item is shown in the comments section in Webflow.
  5. Filter comments per post/page: needed a reference to another CMS page here

However:

  • No “reply” functionality initially:
  • No “account/logged in” functionality.
  • I have to moderate and publish comments (even though this could maybe be done differenlty)
1 Like

Hi,
I agree with @javirevi that it would be a better solution to have it the cms. You have full control of the design. Do you have a working solution for this? I´m not sure how to post a comment and make it relate to the blog post. How do you manage that?

1 Like

We have not put it live yet, but I do have a solution:
This is what I mention shortly on the point 5.

  • you basically need 2 CMS collections (the blog posts collection and the comments collection).
  • the fields for the comments are linked through their CMS to their respective page where they were made. This information can be found in the google sheet and passed back with the CMS form, so you know where it comes from.

I hope it is clear. it is a bit of a messy process, but it works.

But having form submissions able to directly sent info into the CMS would simplify the entire process so much!

let me know if you need more clarification, please

2 Likes

Hi, Javier!

I was just wandering across Webflow stuff on Google and found this blog post, and your solution seems amazing to me. I love Webflow for its customizable nature.

Can you tell me if you improve the solution you mentioned above? Did you create a “Reply” feature? What about the moderation issue?

Thanks a lot in advance!

Hi everybody, I’m currently building a solution for this exact problem, and our Beta will be launching by the end of the year! https://memberchat.io

Update on 01/20/21, we’re still testing out our initial closed beta with a few select customers! I will be sure keep everybody posted…!

If you’re interested in our closed beta, send me an email bailey@memberchat.io or fill out the form on our landing site.

3 Likes

Looking forward to this. :grin:

1 Like

Same! I’m soooo excited to show everybody what we’ve been been working on.

If you have any specific use cases / thoughts / ideas / questions please feel free to hit me up on Twitter @baileysimrell or shoot me an email bailey@memberchat.io!

1 Like

Very excited for this! Any update on when you might launch?

1 Like

Hey, just sent you an email about our closed beta!

Awesome, thanks so much!

Hi all,

There’s also Hyvor Talk if you are interested. It’s a premium, easy-to-install commenting system with features like real-time comments, reactions, ratings, votes, email notifications, etc. And, there’s a lot of customization options to make it blend with your website.

While we made an official integrations with Webflow a little while ago, these weeks we worked on making more integrations with No-code platforms. Here are some resources from our blog:

By default, users can comment as guests or using a Hyvor account. You can optionally connect Memberstack or Firebase using Single Sign-on (see the guides) if you are using them for authentication. Memberspace integration is still in the works.

If you have any questions, you can send an email to me at supun@hyvor.com :blush:

2 Likes

@baileysimrell Would love to join this beta if it’s still ongoing. I’ve got a project I’m working on that needs commenting functionality.

I wouldn’t be so worried about adding a plugin. You can make it as simple as an HTML embed from the right source. I use htmlcommentbox which is great because there are really no limitations to the customization you can do and it’s a pretty seamless addition to the site.

I will be posting an article about how to do that on my site soon. https://www.thegogettr.com

This is the same method I use for the comment section on my site and I customized it using CSS within Webflow to meet my standards. I will make a point to return and edit my comment once I have my tutorials published. :slight_smile:

For people that are reading this in 2022, I found this resource called Learnflow which helped me integrate a comment section pretty quickly. It’s on page 1 of the website!

2 Likes

After a lot of trial and error I found a way only using Zapier with free plan and wrote down a little tutorial. Hope it helps :smiling_face:

What do we want to achieve?
This is a way to build a fully customizable comment section for a blog, in which every comment is automatically only shown on the respective blog post page. For this we only need Zapier (free plan!) and only a tiny tiny bit of custom code. No Zapier experience yet? No worries – I was a total newbie before, it is not that difficult.

So what is the baseline: we set up a blog and the blog posts are CMS collection pages. We want a comment section under each blog post but only show the comments on the blog page it was written on. Of course we could use a reference field and reference the comment manually – but we want to let that happen automatically so that the comment appears instantly on the correct page.

Let’s dive into it:
Some preparations to do beforehand (you’ll see why we do this later):

  • to your Blog Post CMS collection add a text field and name it sth like „Blog Post ID“. Each Blog Post has its own Item ID given by Webflow that you can find at the very bottom —> copy that ID and insert it into your newly added field „Blog Post ID“.
    Bildschirmfoto 2022-04-21 um 14.27.58

Now follow this instruction on how to set up the main construct of comments with Zapier.

When you got to the point in the video of setting up the comments CMS collection: also add a Single-Reference Field to your comments Collection List and reference it to your Blog Post Collection. We will see why we need that later. The custom code mentioned in the video can be found on the same page at the bottom but here it is again:

<script>
 var Webflow = Webflow || [];
 Webflow.push(function() {
 $(document).on(‚submit‘, ‚form‘, function() {
   setTimeout(function() { location.reload(true); }, 3000);  
  });
});
</script>

Put it in the before body tag part in your Blog Collection Page settings:

If you finished setting up the form as described in the video, add a HTML Embed Code in this form anywhere next to the other input fields. It will be hidden and sends one more value to Zapier. We send the Blog Post ID we set up earlier to Zapier so that it can send it back to our reference field (Whaaaat? Oh yeah - that’s possible!)
(We cannot just use the already set Item ID by Webflow as it is not offered to input here, that’s why we need this little workaround of copying the ID into a custom field before.)

Just use this simple line in your embed:

<input type=„hidden“ name=„blogpostid“ value=„add the respective field“> 

Now you need to publish and shoot out a test comment on your page so that Zapier can catch the latest input you just added (the Blog Post ID). After doing so, go back to Zapier and assign the Blog Post ID to the Blog Page Reference. What does that mean for dummies (like me): Zapier will send back the blog post ID into the blog page reference field and is able to transform this simple text input into a reference.


(I first tried this with the slug as it seemed kinda obvious but this is not working since webflow doesn’t understand / Zapier can’t do this / one of these reasons I guess :smiley: )

And then magic happens: publish your Zap, shoot a test comment again and check out your comments Collection – the Blog Page Reference field is filled with the correct page referenced!

Now you can go to your Comments Collection Item on your blog page and filter via the reference and voilà – done! :slight_smile:
Bildschirmfoto 2022-04-21 um 14.46.01

Now every time you create a new Blog Post page you only need to think of also filling the blog post ID field and the rest is Zapier history :slight_smile:

→ Want to add responses?
I decided if I as the author want to add a response to a comment, I do it a bit more manually:
I style the response as I want inside of my comment collection item. I show you my structure below.
Bildschirmfoto 2022-04-21 um 15.12.51

Then in the comments collection I also added a switch as a new field I simply called „Response“. Now I go back to my response wrapper and set the Condition to ‚Element is visible when „Response“ „is On“‘. Because not working with the switch would mean the response always shows up in every collection item (obviously). When I want to respond I turn the switch in the respective comment to On and type in my comment manually on the page itself.

You could proooobably (not sure though) apply the whole method of creating a comment also with creating a response via a nested collection list and another Zap, referencing the response to the comment but haven’t thought about that any longer than that and the manual solution is sufficient for my use case … but I just leave that here as food for thought :upside_down_face:

Bottom line:
I personally found it frustrating to search for a solution for weeks. I hope that a comment feature will be taken into consideration as I do not think that plugins such as Disqus are (yet) good enough.
So I hope this will help some people with the same problem. Cheers :hugs:

4 Likes

Hey :wave:! We are working on a comment section app that can be customized to look how you want in the Webflow designer and will allow visitors to add comments to CMS pages like blog posts. No Zapier or Disqus or coding needed. Our app will also work with Webflow Memberships!

Feel free to shoot us any questions at hello@supersparks.io :slight_smile:

1 Like

Hi there,

Can you link to any examples where this is being used please?
Does it have facility for admin approval/removal etc ?

Cheers
Grant