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?domain=your-domain.com" 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?domain=your-domain.com"
      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 domain is passed as a URL parameter:

<script src="https://simplecommenter.com/js/comments.min.js?domain=your-domain.com" defer></script>

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

Data Attribute

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

<script src="https://simplecommenter.com/js/comments.min.js" data-domain="your-domain.com" 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.domain=k;document.head.appendChild(s);
  })('your-domain.com')
</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?domain=your-domain.com"
  strategy="afterInteractive"
/>

Best for: Next.js projects.

Configuration Options

Customize the widget using data attributes:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-domain="your-domain.com"
  data-position="bottom-right"
  data-color="#3B82F6"
  defer
></script>
AttributeDefaultDescription
data-domainRequiredYour registered domain
data-positionbottom-rightWidget position: bottom-right, bottom-left, top-right, top-left
data-color#3B82F6Primary color (hex code)
data-button-textFeedbackText shown on the button
data-hide-buttonfalseHide the default button (for custom triggers)

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 (usually bottom-right corner)
  3. Open Developer Tools (F12) and check for errors in the Console
  4. Submit a test comment and verify it appears in your dashboard

Domain mismatch? Make sure the domain in your script matches exactly what you registered in the dashboard, including www prefix if used.

Troubleshooting

Widget not appearing

  • Verify the domain matches your dashboard settings exactly
  • 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?