Direct Install Guide

Add Classy Comments to any website with a simple copy/paste - no build tools required

Quick Start

Add these lines to your HTML and you're done! Perfect for:

  • Static websites (HTML/CSS/JS)
  • WordPress custom themes
  • Wix, Squarespace, Webflow sites
  • Any site without a build process

Step 1: Add Scripts to Your Page

<!-- Add these to your <head> section -->
<script src="https://classycomments.com/cdn/classy-comments.min.js"></script>
<link rel="stylesheet" href="https://classycomments.com/cdn/classy-comments.min.css">

Step 2: Initialize on Your Comment Form

<!-- Add this before your closing </body> tag -->
<script>
  const classy = new ClassyComments({
    apiKey: 'cc_live_sk_your_api_key',
    formSelector: '#comment-form',      // Your form's ID or class
    fieldSelector: '#comment-textarea'  // Your textarea's ID or class
  })
  classy.init()
</script>

That's it!

Your comment form now has AI-powered refinement. Get your API key from your dashboard.

Complete Example

Here's a full working example you can use as a template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site with Classy Comments</title>

  <!-- Classy Comments CDN -->
  <script src="https://classycomments.com/cdn/classy-comments.min.js"></script>
  <link rel="stylesheet" href="https://classycomments.com/cdn/classy-comments.min.css">
</head>
<body>
  <h1>Leave a Comment</h1>

  <form id="comment-form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="comment">Comment:</label>
    <textarea id="comment" name="comment" rows="5" required></textarea>

    <button type="submit">Post Comment</button>
  </form>

  <script>
    // Initialize Classy Comments
    const classy = new ClassyComments({
      apiKey: 'cc_live_sk_your_api_key',
      formSelector: '#comment-form',
      fieldSelector: '#comment'
    })
    classy.init()

    // Handle form submission
    document.getElementById('comment-form').addEventListener('submit', (e) => {
      e.preventDefault()
      const comment = document.getElementById('comment').value
      console.log('Submitting:', comment)
      // Send to your backend here
    })
  </script>
</body>
</html>

Finding Your Form Selectors

This is the most important step! You need to tell Classy Comments which form and field to enhance.

Using Browser DevTools

  1. Right-click on your comment form → Inspect
  2. Look for the <form> tag's id or class
  3. Look for the <textarea> tag's id or class

Example 1: Using IDs

<form id="comment-form">
  <textarea id="comment-text"></textarea>
</form>

Use: formSelector: '#comment-form', fieldSelector: '#comment-text'

Example 2: Using Classes

<form class="contact-form">
  <textarea class="comment-field"></textarea>
</form>

Use: formSelector: '.contact-form', fieldSelector: '.comment-field'

Example 3: Using Name Attribute

<form id="comments">
  <textarea name="user_comment"></textarea>
</form>

Use: formSelector: '#comments', fieldSelector: '[name="user_comment"]'

Where Do Refinement Settings Come From?

Dashboard Configuration

All refinement settings (formality, tone, profanity handling, etc.) are managed in your dashboard. The CDN automatically fetches these when you call init().

Benefits:

  • Change settings without updating your website code
  • Same settings across all your tools (WordPress, extension, CDN, NPM)
  • Test different configurations easily

Demo Mode (No API Key Needed)

Want to test without an API key? Use demo mode:

const classy = new ClassyComments({
  apiKey: 'cc_demo_sk_12345678',  // Demo key
  formSelector: '#comment-form',
  fieldSelector: '#comment'
})
classy.init()

Demo mode: Uses rule-based refinement (no AI) and works offline. Perfect for testing!

Platform-Specific Guides

WordPress Custom Themes

Add to your theme's footer.php before the </body> tag:

<script src="https://classycomments.com/cdn/classy-comments.min.js"></script>
<link rel="stylesheet" href="https://classycomments.com/cdn/classy-comments.min.css">
<script>
  const classy = new ClassyComments({
    apiKey: 'your_api_key',
    formSelector: '#commentform',
    fieldSelector: '#comment'
  })
  classy.init()
</script>

Note: Default WordPress uses #commentform and #comment

Wix / Squarespace / Webflow

  1. Go to your site's custom code settings
  2. Add the CDN script to the footer/body section
  3. Inspect your comment form to find the selectors
  4. Update the formSelector and fieldSelector

Static Site Generators (Hugo, Jekyll, etc.)

Add to your layout template (usually footer.html or default.html):

<!-- In your footer template -->
<script src="https://classycomments.com/cdn/classy-comments.min.js"></script>
<link rel="stylesheet" href="https://classycomments.com/cdn/classy-comments.min.css">
<script>
  if (document.querySelector('#comment-form')) {
    const classy = new ClassyComments({
      apiKey: 'your_api_key',
      formSelector: '#comment-form',
      fieldSelector: '#comment'
    })
    classy.init()
  }
</script>

Troubleshooting

Button not appearing

  • Open browser console (F12) and check for errors
  • Verify your selectors are correct using document.querySelector('#your-selector')
  • Make sure the script runs AFTER the form is loaded (put it before </body>)

Script not loading

  • Check your browser's Network tab (F12 → Network) for failed requests
  • Verify the CDN is accessible from your region
  • Try using a specific version instead of @latest

API errors

  • Verify your API key is correct
  • Check you haven't exceeded your quota (view dashboard)
  • For demo mode, use cc_demo_sk_12345678

Need Help?

For CDN installation support:

Check FAQContact us