Simple Commenter Logo

General Installation

Add Simple Commenter to any website by copying the script snippet from your dashboard. The core idea is simple: add a script tag to your website's HTML.

Getting Your Script

  1. Log in to your Simple Commenter dashboard
  2. Select your project (or create a new one)
  3. Copy the script snippet shown on the project page

The script snippet will look something like this:

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

Where to Add the Script

Place the script in one of these locations:

  • Before </body> (recommended) — The script loads after your page content
  • In the <head> — Use the defer attribute to prevent blocking
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- Your content -->

    <!-- Add Simple Commenter before closing body tag -->
    <script
      src="https://simplecommenter.com/js/comments.min.js?id=sc_your_project_key"
      defer
    ></script>
  </body>
</html>

Loading Modes

Simple Commenter supports different script loading modes. You can switch between them in your dashboard if one doesn't work for your setup.

Query Parameter (Default)

The simplest method — your public key is passed as a URL parameter:

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

Best for: Most websites, static HTML, general use.

Data Attribute

Your public key is passed as a data attribute on the script tag:

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

Best for: Google Tag Manager, WordPress, tag managers that modify URLs.

Use this method with Google Tag Manager — GTM can strip query parameters from script URLs.

Function Call

Dynamically creates and injects the script:

<script type="text/javascript">
  (function (k, s) {
    s = document.createElement("script");
    s.async = true;
    s.src = "https://simplecommenter.com/js/comments.min.js";
    s.dataset.id = k;
    document.head.appendChild(s);
  })("sc_your_project_key");
</script>

Best for: Platforms with strict script restrictions, SPAs that need dynamic loading.

Next.js Script Component

For Next.js projects using the built-in Script component:

import Script from "next/script";

<Script
  src="https://simplecommenter.com/js/comments.min.js?id=sc_your_project_key"
  strategy="afterInteractive"
/>;

Best for: Next.js projects.

Configuration Options

Use data attributes to identify which project the widget should load:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-id="sc_your_project_key"
  defer
></script>
AttributeDescription
data-idYour project's public key

The embed script identifies the project. Theme settings such as color and widget placement are loaded from your saved dashboard theme and are not overridden by script tag attributes.

See Widget Configuration for all options.

Platform Guides

Find step-by-step instructions for your platform:

No-Code Platforms

WordPress →

Theme editor, plugins, or child theme

Wix →

Custom code injection

Shopify →

Theme editor (theme.liquid)

Webflow →

Project settings custom code

Squarespace →

Code injection settings

Framer →

Custom code component

Bubble →

HTML element or header

Ghost →

Code injection

Kajabi →

Site tracking code

Podia →

Third-party code

Code / Frameworks

React →

index.html or useEffect

Next.js →

Script component

Vue / Nuxt →

onMounted or nuxt.config

Django →

Base template

Flask →

Jinja template

PHP →

Include in footer

Lovable →

AI-assisted setup

Special Cases

Google Tag Manager →

Custom HTML tag with data attribute

Verifying Installation

After adding the script:

  1. Open your website in a browser
  2. Look for the feedback button in the position configured in your project's Theme settings
  3. Open Developer Tools (F12) and check for errors in the Console
  4. Submit a test comment and verify it appears in your dashboard

Widget not loading? Make sure the public key in your script matches your project in the dashboard.

Troubleshooting

Widget not appearing

  • Make sure the public key in your script matches your project in the dashboard
  • Check that the script isn't blocked by ad blockers
  • Look for JavaScript errors in the browser console
  • Try a different loading mode

Widget loads but submissions fail

  • Check the Network tab for failed API requests
  • Ensure your project is active in the dashboard
  • Verify you haven't exceeded your plan's comment limits

Script blocked by CSP

If your site uses Content Security Policy, add these to your policy:

script-src: https://simplecommenter.com
connect-src: https://simplecommenter.com

Need help? Contact support.

Was this page helpful?