How to Make a Comment Section in Framer

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to add a comments section to your Framer website without any code. I'll show you how you can get the comment section component for free, customize it so it fits your brand, and connect it to a blog CMS.
Project remix:
framer.university/resources/c...
Report inappropriate comments:
spamcomments.learnframer.site/
0:00 - Introduction
0:25 - The roadmap
0:49 - Advantages & disadvantages
1:46 - Adding the comments section to the website
7:40 - Adding the comment section to CMS
9:21 - Handling spam comments
11:07 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

Пікірлер: 68

  • @ArthurGostick
    @ArthurGostick3 ай бұрын

    This is great but won't work well for client sites. They will need to be able to control their own comments. And it would be nice to have a way to get a notification that you got a comment. If you have hundreds and hundreds of blog articles you're not going to check them everyday to see if there's a new comment.

  • @framer.university

    @framer.university

    3 ай бұрын

    You're right! :) However, the component probably won't be developed further since I have other projects to do. Consider the advantages and disadvantages and decide whether or not you wanna use this component.

  • @omareletr
    @omareletr3 ай бұрын

    I've been looking for a commenting solution for my blog for 6 months now. This is THE PERFECT solution. Simple. Frictionless. Brilliant!

  • @framer.university

    @framer.university

    3 ай бұрын

    Glad it helped!

  • @CoilFYZX
    @CoilFYZX3 ай бұрын

    Are you psychic bro?!! How did you know I needed this...we ..we needed this?! Honestly we're so grateful for you! Thanks for this bro!

  • @framer.university

    @framer.university

    3 ай бұрын

    Haha I’m happy to hear that this came at the right time. :) Lemme know if you need any help with this ✌️

  • @itsxerci
    @itsxerci3 ай бұрын

    Love this! Thanks a ton Nandi!

  • @framer.university

    @framer.university

    3 ай бұрын

    Happy to help, mate :)

  • @ACVERACommunity
    @ACVERACommunity3 ай бұрын

    Hey Nandi, Awesome tutorial! I wish I knew about this component a couple of months ago, it is a game changer. All that I wish to get out of this component, maybe in future versions, is to have full control over it and set a spam list in framer CMS to be able to create a list of banned words. Also, it would great to not have to bother you all the time to remove comments, as this is not very productive when building projects for clients. Maybe create a separate section in Framer CMS underneath collections with the title "Comments Section" which has the ID of the comment sections plus the users and the comments (similar to how we currently manage articles)? Overall I love it! Thank you for making our life more productive and easier.

  • @framer.university

    @framer.university

    3 ай бұрын

    Hey! I appreciate your comment! It has a general spam list that has most bad words on it. I know that it would be nice to have full control over it but for now this is the best solution I could come up with. (It’s not possible to add the comments to the cms) Lemme know if I can help with anything:)

  • @jp.gaviria
    @jp.gaviria29 күн бұрын

    Are the comments SEO optimized? as far as I know, google uses the comment section to rank content on google based on engagement and interactions of the users with the site. Thanks

  • @Trazynn
    @Trazynn3 ай бұрын

    I'd be interested in a 'was this page useful to you' smiley happy/sad mini-survey you see on a lot of websites. Preferably with something that logs the _section_ (not the page) that the user is on at the time. Definitely something Framer could offer as a purchasable feature. I think that can be done without cookies as you simply create a new survey for each section.

  • @framer.university

    @framer.university

    3 ай бұрын

    This is actually a really nice idea! I’ll think about it :)

  • @Trazynn

    @Trazynn

    3 ай бұрын

    I've been looking into this some more, and you're basically already very close to what I was looking for. The key is that the CMS creates a unique form for each blog post. And that's already happening here but for a comment section. So all that needs to happen next is for the form to have a hidden prefill that sends the message with the CMS ID to a database or email adress.

  • @Trazynn

    @Trazynn

    3 ай бұрын

    While we're at it. A tutorial on how to include components (that contain CMS) within a CMS field when required (like an animated quote) would be great as well. It's already possible without anything special but Framer University doesn't have a specific tutorial on this yet. It would open up some very powerful features, like a tabulated section, or a CMS accordion, or a slide show, all created by the CMS author.

  • @framer.university

    @framer.university

    3 ай бұрын

    Can you be more specific about what you mean? Perhaps an example?

  • @Trazynn

    @Trazynn

    2 ай бұрын

    Google Cloud's documentation (not Google Docs, but their knowledge base) has the perfect example. When you get to the bottom of any of their pages, it comes with a simple question: ['Was this helpful?'] [Thumbs Up/Thumbs Down] (icons) [Send Feedback] [Send Feedback] can be a simple form. But for Google they pop up a min-survey for the thumbs up, and for the thumbs down. The mini-survey is out of scope for my request but would be awesome as well. All that's necessary is for an audience to scroll to the bottom of an article (or wherever you place the survey), write something in the form, and have that comment )(+ CMS article name as a hidden text) sent to the website owner's email or a database. The thumbs and thumbs down would be cool if they were functional but even that isn't required for it to be minimally viable. This is insanely valuable for websites of any size because it allows visitors to catch any glaring issues and make it known to the website owner.

  • @benkyoudayjp
    @benkyoudayjp3 ай бұрын

    Finally thank u for the tutorial

  • @framer.university

    @framer.university

    3 ай бұрын

    You're welcome!

  • @darius4272
    @darius42723 ай бұрын

    Hello mister! Can you teach us please how to make a date-picker calendar for schedules (pick more dates like airbnb booking). And hide it under a dropdown tap? Thanks!

  • @justicechannel3343
    @justicechannel3343Ай бұрын

    how about update the component so the client itself can delete the unwanted comments?

  • @nerdalert1980
    @nerdalert19803 ай бұрын

    Do you have any plans on making a tutorial on how to make something like this? Or to let others clone or contribute to this project?

  • @workmenstudioinc1880
    @workmenstudioinc18803 ай бұрын

    Nice. Does Framer allow creating rating scales like the ones with stars or review counts found in Shopify themes?

  • @framer.university

    @framer.university

    3 ай бұрын

    It could definitely be created as a code component. Do you have any specific example, or any specific feature you wanna have on a rating component?

  • @tredixidert
    @tredixidert3 ай бұрын

    Hi Nandi, I have been playing around with this and one thing i noticed is that the text box for the "Write your comment" is not expanding as the user is typing on them. Is there any way for it to be like a text area where all of the written comments can be seen before hitting the publish button?

  • @framer.university

    @framer.university

    3 ай бұрын

    Hey! Yes unfortunately it is a fixed text box and I'm not planning on developing it further. Sorry!

  • @tredixidert

    @tredixidert

    3 ай бұрын

    🙏 pretty please

  • @ariakepo
    @ariakepo3 ай бұрын

    Awesome! finally I can use it for Wedding invitation website, how do we add more than 2 comments in the same day?

  • @framer.university

    @framer.university

    3 ай бұрын

    Unfortunately the limit can't be adjusted due to technical limitations.

  • @biyedesign3346
    @biyedesign334613 күн бұрын

    Do you have any idea how we can send that comment to our email? if that's possible, would it count as a form submission or it will bypass our submission limit?

  • @framer.university

    @framer.university

    7 күн бұрын

    this comp unforutnately cannot be connected to the Forms Feature in Framer and so it can't be sent to your email.

  • @mt000mp
    @mt000mp3 ай бұрын

    why should we report a comment through another website to delete a comment in our own website?

  • @framer.university

    @framer.university

    3 ай бұрын

    Because they are in a global database that only I can access.

  • @latiolaisgradnigo
    @latiolaisgradnigo3 ай бұрын

    Hi Nandi! Any idea when you’ll be releasing a full course to learn framer?

  • @framer.university

    @framer.university

    3 ай бұрын

    I'll start releasing courses this year. No exact date yet, but they're coming. Stay tuned :)

  • @latiolaisgradnigo

    @latiolaisgradnigo

    3 ай бұрын

    🙏🏽

  • @maynavarro1929
    @maynavarro192919 күн бұрын

    love the component. However the published comments disappear after refreshing the page. Am I doing anything wrong?

  • @framer.university

    @framer.university

    19 күн бұрын

    Thanks :) Does the url of the page where u use the component contain any special characters like "%äúœ"? If yes make sure you remove these special characters and replace the slug with the english version. So for example instead of "nándi" you should have "nandi". Lmk if this helps.

  • @maynavarro1929

    @maynavarro1929

    18 күн бұрын

    @@framer.university Looks like you fixed it for me!!! thanks. It took me 24h and I didn't fixed it... Now my next question ;-) How can I delete my own (test) comments?

  • @framer.university

    @framer.university

    18 күн бұрын

    @@maynavarro1929 you can report comments you want to delete thorugh this form: spamcomments.learnframer.site/

  • @krateus9301
    @krateus93013 ай бұрын

    How do I delete a test comment from the preview ? Please 🙌

  • @framer.university

    @framer.university

    3 ай бұрын

    spamcomments.learnframer.site

  • @_L_E_U
    @_L_E_U2 ай бұрын

    does this not work on the home page?

  • @framer.university

    @framer.university

    2 ай бұрын

    Works on any page.

  • @_L_E_U

    @_L_E_U

    2 ай бұрын

    @@framer.university thanks. i just confirmed it's working. I was being told that the comments were not being fetched on page reload after they've published, but I do see them now.

  • @lawytgaming6583
    @lawytgaming65833 ай бұрын

    Please let us manage (delete) comments in our own website

  • @framer.university

    @framer.university

    3 ай бұрын

    The previous version of the component allowed individuals manage their own comment sections and delete comments but it wasn't secure that way. That's why this change was needed.

  • @mt000mp

    @mt000mp

    3 ай бұрын

    @@framer.university tell me why it isn't secure?

  • @mt000mp

    @mt000mp

    3 ай бұрын

    @@framer.university tell me why it isn't secure?

  • @phs8014
    @phs80143 ай бұрын

    let people connect their own supabase to the component, so that people can manage their own site without bothering you.

  • @framer.university

    @framer.university

    3 ай бұрын

    Yes that’s how the first version worked, but it wasn’t secure enough and people could spam it. Had to go with this solution to increase security.

  • @phs8014

    @phs8014

    3 ай бұрын

    @@framer.university why isn't it secure? its just supabase, people could easily moderate comments by going into their own table API. can we please access the previous version? pretty please?

  • @phs8014

    @phs8014

    3 ай бұрын

    @@framer.university why isn't it secure? its just supabase.

  • @phs8014

    @phs8014

    3 ай бұрын

    please don't delete my reply

  • @framer.university

    @framer.university

    3 ай бұрын

    I’m not deleting your replies. It wasn’t secure that way because people could send thousands of messages to the comment section. This way we can run a local code on the database and implement bot protection. If this isn’t suitable for you, please don’t use it.

  • @tredixidert
    @tredixidert3 ай бұрын

    Great stuff nandi. Thanks. Is there a tutorial for page view count and comment count? And when will we see a share to whatsapp?

  • @framer.university

    @framer.university

    3 ай бұрын

    Thanks! I'm not currently working on these but they're on the list :)

  • @apexdigital.studio
    @apexdigital.studio3 ай бұрын

    This is a great new component! We need a custom contact form that doesn't need to go thru 3rd party company with subscription fee. if you can create a component where we can just enter our email as the recipient will be very helpful!

  • @framer.university

    @framer.university

    3 ай бұрын

    I think using Formspark would be great for you.

  • @apexdigital.studio

    @apexdigital.studio

    3 ай бұрын

    It's free to use at some point, but only supports 250 credits only. Even if you test if the form works, it will be considered as 1 credit deducted.

  • @irinabts3219
    @irinabts32193 ай бұрын

    Hi, would you do a tutorial on how to create multiple scroll animations for 2 pages in Framer for a roofing business ? Thank you !

  • @framer.university

    @framer.university

    3 ай бұрын

    Hey! I have a bunch of videos about scroll animations. Watch those ✌️