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://unpkg.com/@classy-comments/core@latest/dist/classy-comments.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@classy-comments/core@latest/dist/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://unpkg.com/@classy-comments/core@latest/dist/classy-comments.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@classy-comments/core@latest/dist/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
- Right-click on your comment form → Inspect
- Look for the
<form>
tag'sid
orclass
- Look for the
<textarea>
tag'sid
orclass
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://unpkg.com/@classy-comments/core@latest/dist/classy-comments.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/@classy-comments/core@latest/dist/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
- Go to your site's custom code settings
- Add the CDN script to the footer/body section
- Inspect your comment form to find the selectors
- Update the
formSelector
andfieldSelector
Static Site Generators (Hugo, Jekyll, etc.)
Add to your layout template (usually footer.html
or default.html
):
<!-- In your footer template --> <script src="https://unpkg.com/@classy-comments/core@latest/dist/classy-comments.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/@classy-comments/core@latest/dist/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: