Skip to main content

Comment Section Integration

This guide explains how to embed the Speakness comment section on your website or blog. We offer two primary integration methods to suit your needs.

At a glance
  • Audience: Media teams and developers embedding conversations.
  • Setup time: Minutes via script, a few steps via WordPress.
  • What you gain: Real-time discussion, moderation control, unified analytics.

Overview​

The Speakness comment section provides:

  • Modern commenting interface with voting and threading
  • Social login support (Google, Facebook, Twitter)
  • Moderation tools accessible through your dashboard
  • Analytics and insights on comment engagement
  • Responsive design that works on all devices

Integration Methods​

MethodBest forHighlights
JavaScript EmbedCustom sites, headless CMS, static deploymentsDrop-in script, full layout control, CMS-agnostic.
WordPress PluginWordPress-powered publicationsGuided setup, auto-embed options, per-post controls.

Method 1: JavaScript Embed​

This method works with any website where you can add custom JavaScript code.

Articles must be registered first

The embed only loads for articles Speakness knows about. With the JavaScript method your CMS has to register each article through the Article API when it is published — the WordPress plugin does this for you. Until an article is registered, the embed shows an error instead of a comment section.

Step 1: Get Your Embed Code​

The basic embed code structure:

<!-- Add this script tag in your article template -->
<script src="https://www.speakness.com/embed-comment-section-prod.js"></script>

<!-- Add this div where you want comments to appear -->
<div id="speakness-commentsection-embed" data-url="ARTICLE_URL_HERE"></div>

Step 2: Replace the Article URL​

Replace ARTICLE_URL_HERE with the actual URL of your article. This URL serves as a unique identifier for the comment thread.

Example:

<script src="https://www.speakness.com/embed-comment-section-prod.js"></script>
<div id="speakness-commentsection-embed" data-url="https://yoursite.com/article-slug"></div>

Step 3: Add to Your Website​

Place the embed code on your article page:

  • Best practice: Add it at the end of your article content
  • Placement: Usually just before the closing </article> or </main> tag
  • Template: Add to your article template file for automatic inclusion
QA checklist
  • Confirm each article passes the correct canonical URL to data-url.
  • Test with authenticated and anonymous browsers.
  • Inspect the browser console for CSP or mixed-content warnings.

How It Works​

The JavaScript embed:

  1. Loads the Speakness comment section iframe
  2. Uses the data-url attribute to identify the article
  3. Automatically adjusts height based on content
  4. Handles user authentication and interaction
  5. Communicates with your Speakness dashboard for moderation

Method 2: WordPress Plugin​

For WordPress sites, we provide a dedicated plugin that makes integration seamless.

Step 1: Download the Plugin​

  1. Log in to your Speakness dashboard
  2. Navigate to Settings > Integrations
  3. Click "Download WordPress Plugin"
  4. Save the .zip file to your computer

Step 2: Install the Plugin​

Option A: Upload via WordPress Admin​

  1. Log in to your WordPress admin panel
  2. Go to Plugins > Add New
  3. Click "Upload Plugin" at the top
  4. Click "Choose File" and select the Speakness plugin .zip file
  5. Click "Install Now"
  6. Click "Activate Plugin"

Option B: Upload via FTP​

  1. Extract the plugin .zip file
  2. Upload the extracted folder to /wp-content/plugins/
  3. Go to Plugins in WordPress admin
  4. Find "Speakness Comments" and click "Activate"

Step 3: Configure the Plugin​

After activation:

  1. Go to Settings > Speakness Comments
  2. Enter your Speakness API Key (found in your dashboard)
  3. Configure plugin settings:

General Settings​

  • Enable Comments: Turn comments on/off globally
  • Auto-embed: Automatically add comments to posts
  • Placement: Choose where comments appear (before/after content)

Manual Mode​

To add comments to specific posts:

  1. Edit a post
  2. Scroll to the Speakness Comments meta box
  3. Check "Enable Speakness Comments"
  4. Publish or update the post

Step 4: Disable on Specific Posts​

To disable comments on individual posts:

  1. Edit the post
  2. Find the Speakness Comments meta box
  3. Uncheck "Enable Speakness Comments"
  4. Update the post

Plugin Features​

The WordPress plugin provides:

  • One-click setup: No coding required
  • Automatic updates: Stay current with new features
  • Theme compatibility: Works with any WordPress theme
  • Per-post control: Enable/disable per post or page
  • Comment count widgets: Show engagement metrics

After Integration​

Access Your Dashboard​

Once your comment section is live:

  • Log in to speakness.com.
  • Open the Media Dashboard for your outlet.
  • Review conversations across every article.
  • Dive into analytics and moderation tools to manage quality.

Moderation​

Moderate comments from your dashboard:

  • Hide comments: Temporarily remove posts that need review.
  • Ban users: Block repeat offenders from future participation.
  • Suspend users: Pause activity while you investigate issues.
  • Restore access: Unhide comments or reinstate users at any time.

Analytics​

Track engagement metrics:

  • Conversation depth: Total comments, votes, and trending threads.
  • Audience reach: Visits, active readers, and recirculation patterns.
  • Top performers: Breakouts for both articles and comments.
  • Sentiment signals: Voting trends that highlight community mood.

Troubleshooting​

Comments Not Appearing​

  1. Verify the data-url: Make sure it matches your article's actual URL
  2. Check browser console: Look for JavaScript errors
  3. Disable cache: Clear cache and hard refresh (Ctrl+Shift+R)

Height Not Adjusting​

  • Ensure your site allows iframe postMessage communication
  • Check that Content Security Policy (CSP) allows Speakness domain
  • Verify no conflicting JavaScript

WordPress Plugin Issues​

  1. Plugin won't activate: Check WordPress version compatibility
  2. API key invalid: Copy key directly from Speakness dashboard
Fast debugging
  • Temporarily disable other plugins or scripts to isolate conflicts.
  • Use an incognito window to rule out cached or authenticated states.

Best Practices​

Security​

  • Always use HTTPS for your site
  • Keep WordPress and plugins updated

User Experience​

  • Place comments prominently but not intrusively
  • Moderate actively to maintain quality
  • Set clear community guidelines
  • Align comment prompts with editorial tone
  • Share highlight comments in newsletters or social channels

Support​

Need help with integration?

  • Documentation: Check this guide and other docs
  • Email Support: support@speakness.com
  • Status Page: Monitor platform uptime and incident history

Coming Soon​

We're working on additional integration methods:

  • Other Content Management System Plugins

Stay tuned for updates!