Platform Installation Guides

Platform-specific instructions for adding SimpleCommenter to your website.

WordPress

Option 1: Theme Editor

Go to Appearance > Theme Editor
Open footer.php or your theme's footer template
Add the script before </body>:

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

Option 2: Plugin (Recommended)

Install and activate Insert Headers and Footers plugin
Go to Settings > Insert Headers and Footers
Paste the script in the Footer section
Save changes

Using a plugin prevents losing the script when updating your theme.

Option 3: Child Theme

Add to your child theme's functions.php:

function add_simplecommenter_widget() {
    ?>
    <script src="https://simplecommenter.com/js/comments.min.js?id=sc_your_project_key" defer></script>
    <?php
}
add_action('wp_footer', 'add_simplecommenter_widget');

Webflow

Go to Project Settings > Custom Code
In the Footer Code section, paste:

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

Click Save Changes
Publish your site

Replace sc_your_project_key with your project's public key from the dashboard.

Squarespace

Go to Settings > Advanced > Code Injection
In the Footer field, paste:

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

Click Save

Shopify

Install Simple Commenter from the Shopify App Store.
Open Apps > Simple Commenter in Shopify admin, sign in, and choose the project for your store.
In setup, choose who can see the widget, then click Open theme editor.
Under App embeds, switch on Simple Commenter and click Save.
Return to the app, open your review link, and leave a test comment. It appears under Feedback in Shopify admin.

See the Shopify installation guide for theme changes and troubleshooting.

Wix

Go to Settings > Custom Code
Click + Add Custom Code
Paste the script
Set placement to Body - end
Apply to All pages
Click Apply

Wix code injection requires a Premium plan.

Next.js

Add to your root layout or _app.js:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://simplecommenter.com/js/comments.min.js"
          data-id="sc_your_project_key"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

React (Create React App, Vite)

Add to your public/index.html:

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

Or dynamically in a component:

import { useEffect } from "react";

function FeedbackWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://simplecommenter.com/js/comments.min.js";
    script.dataset.id = "sc_your_project_key";
    script.defer = true;
    document.body.appendChild(script);

    return () => document.body.removeChild(script);
  }, []);

  return null;
}

Vue.js / Nuxt

Vue 3

In your App.vue or main layout:

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://simplecommenter.com/js/comments.min.js";
  script.dataset.id = "sc_your_project_key";
  script.defer = true;
  document.body.appendChild(script);
});
</script>

Nuxt 3

In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://simplecommenter.com/js/comments.min.js",
          "data-id": "sc_your_project_key",
          defer: true,
        },
      ],
    },
  },
});

Static HTML

Simply add before </body>:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- Your content -->

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

Troubleshooting

Check public key: Ensure data-id matches your project in the dashboard
Check console: Look for errors in browser developer tools
Script placement: Works in either <head> or before </body>. The script loads without blocking your page.
HTTPS: Both your site and the script use HTTPS