Simple Commenter Logo

Basic Widget Setup

The SimpleCommenter widget is a lightweight JavaScript snippet that adds a feedback button to your website. This guide covers the fundamental setup process.

How It Works

  1. You add our script to your website
  2. The script loads asynchronously (won't slow down your page)
  3. A feedback button appears for your visitors
  4. Visitors can submit feedback, which appears in your dashboard

Adding the Widget

Add this script tag to your website's HTML, just before the </body> tag:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-id="sc_your_project_key"
  defer
></script>

The defer attribute ensures the script loads without blocking your page render. Replace sc_your_project_key with your project's public key from the dashboard.

Required Setup

1. Create a Project

Before the widget works, create a project in the SimpleCommenter dashboard:

  1. Go to your dashboard
  2. Click "Add Project"
  3. Enter your project details
  4. Save the project, then copy its public key

2. Use Your Public Key

The data-id attribute must contain your project's public key (format sc_...) from the dashboard:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-id="sc_your_project_key"
  defer
></script>

The same public key works everywhere your project loads, including local development.

What Visitors See

When the widget loads, visitors will see:

  1. Feedback Button - A small button in the corner of the screen
  2. Feedback Form - Opens when clicked, with fields for:
    • Comment text
    • Screenshot capture (optional)
    • Email (optional)
  3. Confirmation - Success message after submission

Filtering Comments on the Page

Logged-in users can control which comments are visible on the page itself using the status filter in the widget's comment sidebar:

  1. Open the widget's comment sidebar on your site
  2. Click the status filter dropdown at the top of the list
  3. Check or uncheck statuses to show or hide them

Comments with unchecked statuses disappear from both the sidebar list and the page markers. For example, uncheck Done to hide completed comments so only open work stays visible on the page. Each status shows a count badge so you can see how many comments it hides.

Your selection is saved per user and restored on the next visit. Leaving every status unchecked shows all comments again.

This filter only changes what you see in the widget on the page. It does not affect other users, and the dashboard has its own separate filters.

Next Steps

Was this page helpful?