Widget for comments - please!

Wishlist New App Request
110

Here’s an HTML code for a comments widget with CSS and JavaScript functionality:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments Widget</title>
    <style>
        .comments-widget {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .comments-list {
            margin-bottom: 20px;
        }

        .comment {
            background-color: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #666;
            font-size: 0.9em;
        }

        .comment-author {
            font-weight: bold;
            color: #333;
        }

        .comment-form {
            display: flex;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 15px;
        }

        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        textarea {
            height: 100px;
            resize: vertical;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="comments-widget">
        <h2>Comments</h2>
        
        <div class="comments-list">
            <!-- Existing comments -->
            <div class="comment">
                <div class="comment-header">
                    <span class="comment-author">John Doe</span>
                    <span class="comment-date">2023-08-10 14:30</span>
                </div>
                <p>This is a sample comment. Great content!</p>
            </div>
        </div>

        <!-- Comment Form -->
        <form class="comment-form" id="commentForm">
            <div class="form-group">
                <input type="text" id="name" placeholder="Your Name" required>
            </div>
            <div class="form-group">
                <textarea id="comment" placeholder="Write your comment here..." required></textarea>
            </div>
            <button type="submit">Post Comment</button>
        </form>
    </div>

    <script>
        document.getElementById('commentForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value;
            const commentText = document.getElementById('comment').value;
            
            if (!name || !commentText) {
                alert('Please fill in all fields');
                return;
            }

            const commentList = document.querySelector('.comments-list');
            
            // Create new comment element
            const commentDiv = document.createElement('div');
            commentDiv.className = 'comment';
            
            // Create header
            const headerDiv = document.createElement('div');
            headerDiv.className = 'comment-header';
            
            const authorSpan = document.createElement('span');
            authorSpan.className = 'comment-author';
            authorSpan.textContent = name;
            
            const dateSpan = document.createElement('span');
            dateSpan.className = 'comment-date';
            dateSpan.textContent = new Date().toLocaleString();
            
            headerDiv.appendChild(authorSpan);
            headerDiv.appendChild(dateSpan);
            
            // Create comment text
            const commentPara = document.createElement('p');
            commentPara.textContent = commentText;
            
            // Assemble comment
            commentDiv.appendChild(headerDiv);
            commentDiv.appendChild(commentPara);
            
            // Add to comments list
            commentList.appendChild(commentDiv);
            
            // Clear form
            document.getElementById('commentForm').reset();
        });
    </script>
</body>
</html>

This code creates a comments widget with the following features:

  1. A clean, modern design with subtle shadows and rounded corners
  2. Existing comments display with:
    • Author name
    • Timestamp
    • Comment text
  3. A comment form with:
    • Name input field
    • Comment textarea
    • Submit button
  4. Basic validation to ensure both fields are filled
  5. Responsive design that works on different screen sizes
  6. Visual feedback on button hover
  7. Automatic timestamp generation for new comments
  8. New comments are added dynamically without page refresh

To use this widget:

  1. Copy the entire code into an HTML file
  2. Open it in a web browser
  3. Enter a name and comment in the form fields
  4. Click “Post Comment” to see the new comment appear

The comments are stored in the DOM and will reset when the page is refreshed. To make comments persistent, you’d need to add backend storage (which isn’t included in this example).

You can customize the styling by modifying the CSS in the <style> section, and adjust the functionality by modifying the JavaScript in the <script> section.

4 Likes
111

@backhome84 Wow, amazing! Thank you!! I’ve implemented this on my blog posts in Kajabi. Here’s how it looks so far, with a test comment added by me:

Screenshot 2025-02-09 at 02.22.44
Screenshot 2025-02-09 at 02.22.441710×1288 118 KB

Could I trouble you for how to: 1. Make Montserrat font consistent throughout, including Your Name, Write Your Comment Here, and Post Comment button, 2. Post Comment button background color #3d9aab instead of the bright blue.

Also, I notice our date/time formats don’t match. Prefer mm-dd-yyyy and hh:mm (no seconds) in military time format - is that possible?

Thanks!
Erika

3 Likes
112

Hello, I’m not a code expert. I just use deepseek to generate these codes.
I change the above code as you requested and I hope that works for you.

Comments Widget body { font-family: 'Montserrat', sans-serif; } 
    .comments-widget {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .comments-list {
        margin-bottom: 20px;
    }

    .comment {
        background-color: white;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        color: #666;
        font-size: 0.9em;
    }

    .comment-author {
        font-weight: 600;
        color: #333;
    }

    .comment-form {
        display: flex;
        flex-direction: column;
    }

    .form-group {
        margin-bottom: 15px;
    }

    input, textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
    }

    textarea {
        height: 100px;
        resize: vertical;
    }

    button {
        background-color: #3d9aab;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        align-self: flex-end;
        font-weight: 500;
    }

    button:hover {
        background-color: #2d7a8b;
    }
</style>

Comments

    <div class="comments-list">
        <!-- Existing comments -->
        <div class="comment">
            <div class="comment-header">
                <span class="comment-author">John Doe</span>
                <span class="comment-date">08-10-2023 14:30</span>
            </div>
            <p>This is a sample comment. Great content!</p>
        </div>
    </div>

    <!-- Comment Form -->
    <form class="comment-form" id="commentForm">
        <div class="form-group">
            <input type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="form-group">
            <textarea id="comment" placeholder="Write your comment here..." required></textarea>
        </div>
        <button type="submit">Post Comment</button>
    </form>
</div>

<script>
    function formatDate(date) {
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${month}-${day}-${year} ${hours}:${minutes}`;
    }

    document.getElementById('commentForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const name = document.getElementById('name').value;
        const commentText = document.getElementById('comment').value;
        
        if (!name || !commentText) {
            alert('Please fill in all fields');
            return;
        }

        const commentList = document.querySelector('.comments-list');
        
        // Create new comment element
        const commentDiv = document.createElement('div');
        commentDiv.className = 'comment';
        
        // Create header
        const headerDiv = document.createElement('div');
        headerDiv.className = 'comment-header';
        
        const authorSpan = document.createElement('span');
        authorSpan.className = 'comment-author';
        authorSpan.textContent = name;
        
        const dateSpan = document.createElement('span');
        dateSpan.className = 'comment-date';
        dateSpan.textContent = formatDate(new Date());
        
        headerDiv.appendChild(authorSpan);
        headerDiv.appendChild(dateSpan);
        
        // Create comment text
        const commentPara = document.createElement('p');
        commentPara.textContent = commentText;
        
        // Assemble comment
        commentDiv.appendChild(headerDiv);
        commentDiv.appendChild(commentPara);
        
        // Add to comments list
        commentList.appendChild(commentDiv);
        
        // Clear form
        document.getElementById('commentForm').reset();
    });
</script>
2 Likes
114

Yes, we would really like this widget for our non-profit so supporters can leave comments. Thanks Craig

4 Likes
115

Hey @backhome84, thanks for sharing, it looks really curious!

The code does allow you to create a comments section and even add real comments, but it requires a lot of work to fine-tune it into a full-featured comments widget. Key aspects like comment storage (they need to be saved somewhere to stay on your site), moderation, spam filters, and a stylish UI — all of these are things you’ll have to handle yourself.

To save you the hassle, we’re working on a ready-to-use comments widget that will be stylish and functional right out of the box :blush:

It’s still in the Design stage right now, but we’ll update you here once it moves to development.

2 Likes
116

Really … this company just needs to update there widget in the blog or make a new one for comments. As you and everyone can see it shouldn’t be to complicated. Just my thoughts…

4 Likes
117

With social media, Reddit, and Discord dominating online discussions, traditional website comment sections are becoming less relevant.

  • Privacy concerns & GDPR** make users hesitant to share data or create accounts.

User behavior has shifted* to platforms where interaction is easier and more engaging.

  • Website owners face moderation and compliance challenges,** leading many to remove comment sections entirely.

Are comment widgets still useful, or have they become outdated? What do you think?

3 Likes
118

A great topic you’re raising, @Dennis_Dickmann!

I think it really depends — there are businesses that want to feature real comments from their clients directly on their website, keeping everything in one place.

Having a comments section might also build trust as it gives users a platform to speak their mind, share honest opinions, and explore other reviews and feedback. Additionally, user-generated content (i.e. comments from clients) can contribute positively to SEO and improve page rankings.

There’s no one-size-fits-all solution, of course, but I believe many users could benefit from the Comments widget. Feel free to disagree! :blush:

2 Likes
119

I agree with @Helga. There are lots of reasons that Comments sections are still relevant to many of us. Please think about this: How would YouTubers feel if their Comments section was taken away? That’s what has effectively happened to bloggers, if you blog anywhere but WordPress (I blog on Kajabi).

Comments is where all the interaction, questions, and over time, community-building goes down. Maybe someone who has a forum doesn’t need Comments but most of us don’t have forums. And they seem more prone to moderation troubles, privacy concerns, etc. than a Comments section imho.

I like how Comments are public - and you can usually set it to post approval if it becomes a concern.

" * Privacy concerns & GDPR* make users hesitant to share data or create accounts."* You bring up a good point here - this is why many of us don’t use Disqus and are hoping for a Comments feature from Elfsight. I don’t want commenters to have to create an account, just to simply enter their name, website (not required), and comment/question. Easy peasy.

Sorry for the novel :laughing: Thanks for asking the question! Just because one doesn’t use a feature personally doesn’t mean it’s not super valuable to others. Best, E

2 Likes
120

Hi @Christel_Ruzicka :wave:

Apologies for the delayed response!

Glad to say that our devs are working on the Comments widget now. I’ve moved your comment to the related thread, where we’ll keep you posted on any progress :slightly_smiling_face:

1 Like
121

Thanks for your input! I get that comments can build trust and foster interactivity. But from my perspective, a comment section today is about as useful as a fax machine in 2025: In a world that’s faster, more direct, and often visual, the effort required to maintain a comment section just doesn’t seem worth it. Moderation, spam filters, and constant maintenance take up a lot of time, and often, the value of the interactions is limited.

There are much more effective ways to encourage interaction and improve SEO – like social media, reviews on external platforms, or interactive widgets. They offer the same functionality without the hassle, and often deliver even more engagement.

However, if you manage to create a ‘Helga-Bot’ for community management that handles all the comments, then you might just convince me! :smile: Until then, I feel like comment sections are kind of like fax machines in a world full of WhatsApp messages – nice relics from the past, but a bit outdated.

2 Likes
123

Nice point, @Dennis_Dickmann! :grin:

Well, I think we’re talking about different use cases here. I definitely agree that improving a site from various aspects is important, and external platforms do play a significant role in strengthening your brand. However, it seems to me that enabling comments on your site could be yet another way to enhance engagement, that’s it :slight_smile:

3 Likes
124

Great to read that this is in progress!
I need it (-;
Q: Will this also come with the proper structured data?

2 Likes
125

Maybe you are right, but I know a lot of people in a range from 18 to 25+ and none of them are on social media. It might be surprising considering it is 2025, but for younger generations, social media is not a need. And in my case this is my target. My customers are between 18-35 and I’m also young and trust me, the last hing I wanna do is using my real social media accounts to post, comment or anything. It is annoying to be required to log in for asking a simple question or commenting. And this is why a simple comment widget makes a huge difference. You can set it up to be anonymous and everyone will be fine, fast, safe, private etc. or just require for a basic security stuff like an email, which is something everybody from young to old people have access to. In my case, people need to comment even to make a review or question. Yeah, it is obvious for us that we would use a contact section instead, or a FAQ, but times are different and they don’t read it even having it in front of their eyes. People will always prefer something fast and easy and they find it by commenting. They ask everything there and they prefer a real and genuine interaction by seeing the owner of the website replying to their comments, instead of getting private stuff or sending them to use social media. It might be stupid but that’s how it works nowadays and I see it myself everyday. Right now I’m using another comment widget that happily makes the work smooth, but I’ll definitely get the widget when they develop it here cause they make amazing widgets. Like the sales notifications! A really great great win! :+1:t3:

3 Likes
127

Thanks a lot for your comment, @Marius_Tyranowski!

At the moment, I can’t say for sure if structured data will be included in the first release, but I know that the devs are discussing this possibility. If everything goes smoothly, I believe we may well expect it! :blush:

1 Like
128

Great comment, many thanks for sharing, @MC_Music! :heart_eyes:

Agree, the easier it is to leave a comment, the stronger the connection and sense of community :slight_smile:

4 Likes
129

Real.

1 Like
130

Real is right. We need this ASAP. Any updates?

1 Like
132

Thank you for your interest, @A113, happy to have you join our community! :dizzy:

Yes, the widget is now in development, meaning that all design work has been done and approved! Although this widget might seem simple, it’s a reeeally complicated project with lots of nuances:

  • This widget’s packed with tons of UI elements, and we’re taking our time to craft them just right so it looks great and feels smooth to use.

  • There’s a pretty tricky API behind it, managing comments, reactions, and threads. We need to make sure that everything’s working smoothly and feels modern.

  • Storing all data is another huge point. We’re thinking ahead to make sure it’s set up for future upgrades, since we’re always looking to improve our widgets.

  • Authorization is super important too — we know how much safe and secure logins matter when you’re jumping into discussions, so we’re putting extra attention into that feature.

  • And customization — we want this widget to be flexible and tackle as many of your challenges as possible, so we’re working through all the popular use cases to make it just right.

But our developers confirmed that the work is in full swing now, and they are doing everything they can to release the Comments widget as soon as possible :blush:

6 Likes
133

Thats great news!
Thanks for making the complexity behind it transparent - good to see that you guys take the time to make it right. Have a nice weekend ahead!

2 Likes