Aleksander Kaaberma

<p><strong>Simple Commenter is a lightweight, visual feedback tool your clients will actually use without a single complaint.</strong></p>
<p>It masterfully balances powerful features for developers and agencies with a user experience so simple that it’s virtually foolproof for clients.</p>
<p>Say goodbye to messy emails, confusing screenshots, and endless back-and-forth. With Simple Commenter, clients leave feedback directly on your website—exactly where changes are needed.</p>
<h4>Why Agencies & Freelancers Choose Simple Commenter</h4>
<ul>
<li><strong>Clients don’t need to sign up</strong> – No registration barriers, no forgotten passwords</li>
<li><strong>Real-time contextual comments</strong> – Feedback appears exactly where edits are needed</li>
<li><strong>Direct file uploads</strong> – Clients can suggest image replacements and design changes</li>
<li><strong>Lightning fast</strong> – Asynchronous loading won’t slow down your site</li>
<li><strong>Works on any page</strong> – Including staging sites, password-protected pages, and localhost</li>
</ul>
<h4>What Makes Us Different</h4>
<p>Unlike complex enterprise tools, Simple Commenter is built for the reality of client work:</p>
<ul>
<li><strong>No client training needed</strong> – If they can click, they can use it</li>
<li><strong>No browser extensions</strong> – Works instantly in any browser</li>
<li><strong>No account required for clients</strong> – Removes the biggest friction point</li>
<li><strong>Manage from WordPress</strong> – View and reply to feedback without leaving your admin</li>
</ul>
<h4>Key Features</h4>
<ul>
<li><strong>Visual Annotations</strong> – Clients click on any element to leave feedback</li>
<li><strong>Screenshot Capture</strong> – Automatic screenshots with every comment</li>
<li><strong>Drawing Tools</strong> – Circle issues, draw arrows, highlight problems</li>
<li><strong>File Uploads</strong> – Attach images, PDFs, and documents</li>
<li><strong>Email Notifications</strong> – Get notified instantly when clients comment</li>
<li><strong>Reply to Comments</strong> – Respond directly from WordPress admin</li>
<li><strong>Status Management</strong> – Track feedback as To Do, In Progress, or Done</li>
<li><strong>Team Collaboration</strong> – Add team members to manage feedback together</li>
<li><strong>Priority Levels</strong> – Mark urgent feedback for quick action</li>
<li><strong>Integrations</strong> – Connect to Trello, Slack, and more via webhooks</li>
</ul>
<h4>Trusted by 600+ Web Professionals</h4>
<p>Rated 5.0 on Product Hunt & AppSumo</p>
<blockquote>
<p>“Life changed in under 5 minutes. Most of my clients are not super techy so I really appreciate the simplicity.” – @Dsouldiva</p>
<p>“My clients LOVED using Simple Commenter. Way better than Markup in past projects.” – @Katelyn</p>
<p>“I won’t start a project without it. I look even more professional to my clients because of this.” – @Jim Langman</p>
</blockquote>
<h4>How It Works</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Connect your Simple Commenter account (free trial, no credit card)</li>
<li>Select your project—the widget automatically appears</li>
<li>Share your site URL—clients start leaving feedback immediately</li>
</ol>
<h4>Perfect For</h4>
<ul>
<li>Web design agencies collecting client revisions</li>
<li>Freelancers managing multiple client projects</li>
<li>Development teams doing internal QA</li>
<li>Anyone tired of “Can you see the thing on the left side?” emails</li>
</ul>
<h3>Support</h3>
<p>Need help? We’ve got you covered:</p>
<ul>
<li><strong>Documentation</strong> — Read the <a href="https://www.simplecommenter.com/docs/installation/wordpress" rel="nofollow ugc">WordPress installation guide</a> for a detailed walkthrough</li>
<li><strong>Direct support</strong> — Visit <a href="https://www.simplecommenter.com/support" rel="nofollow ugc">simplecommenter.com/support</a> to contact our team</li>
<li><strong>Community</strong> — Post plugin-specific questions in the <a href="https://wordpress.org/support/plugin/simple-commenter/" rel="ugc">WordPress.org support forum</a></li>
</ul>
<h3>External Services</h3>
<p>This plugin connects to SimpleCommenter.com (https://www.simplecommenter.com) to provide visual feedback functionality. All comment data is processed and stored on SimpleCommenter servers.</p>
<p><strong>Data transmitted:</strong></p>
<ul>
<li>User email and display name (for authentication and comment attribution)</li>
<li>Comment content, screenshots, and file attachments</li>
<li>Page URLs where feedback is submitted</li>
<li>WordPress site URL (for project identification)</li>
</ul>
<p><strong>Service requirements:</strong></p>
<ul>
<li>A SimpleCommenter account is required (free 14-day trial available)</li>
<li>After the trial period, a paid subscription to the SimpleCommenter service is required for the feedback widget to function</li>
</ul>
<p><strong>Legal:</strong></p>
<ul>
<li><a href="https://www.simplecommenter.com/terms-conditions" rel="nofollow ugc">Terms of Service</a></li>
<li><a href="https://www.simplecommenter.com/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>


Simple Commenter – Website Feedback tool

The website feedback tool your clients will actually use. Collect visual feedback directly on your site—no training required.

setzer

<p>Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.</p>
<p>To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the <code>[ref]</code> shortcode, like so:</p>
<pre><code>Here's the text to annotate.[ref]Note text goes here.[/ref]
</code></pre>
<p>To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.</p>
<h3>Styling Side Matter with CSS</h3>
<p>Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (<a href="https://wordpress.org/plugins/simple-custom-css/" rel="ugc">Simple Custom CSS</a> is a good example.)</p>
<p>Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class <code>side-matter</code>. The following CSS will render all Side Matter elements in blue serif text:</p>
<pre><code>.side-matter {
    color: blue;
    font-family: serif;
}
</code></pre>
<p>Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:</p>
<pre><code>a.side-matter-ref, ol.side-matter-list {
    color: green;
}

div.side-matter-text {
    color: black;
}
</code></pre>
<h4>List of Class Selectors</h4>
<p>Here is a full list of Side Matter class selectors and their uses:</p>
<ul>
<li><code>a.side-matter-ref</code> selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.</li>
<li><code>sup.side-matter-sup</code> selects the <code>sup</code> (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.</li>
<li><code>.widget_side_matter</code> (note the underscores) selects the widget container element, which may be an <code>aside</code> or a <code>div</code>.</li>
<li><code>ol.side-matter-list</code> selects the <code>ol</code> (ordered list) element that encloses notes in the sidebar, including list numerals.</li>
<li><code>li.side-matter-note</code> selects sidenote <code>li</code> (list item) elements, including each note’s numeral.</li>
<li><code>div.side-matter-text</code> selects the <code>div</code> elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.</li>
</ul>
<p>Each paragraph within a note is further wrapped in a <code>p</code> tag. However, as they’re generated outside the plugin, these <code>p</code> elements cannot be selected directly using the <code>side-matter</code> class. Instead, select them indirectly, e.g. <code>div.side-matter-text > p</code>.</p>
<h4>Default CSS</h4>
<p>Side Matter sets a few rules by default in the included stylesheet <code>side-matter.css</code>. These rules will generally defer to your theme stylesheet in the event of a conflict.</p>
<p>The first rule removes underlines from reference numeral links:</p>
<pre><code>a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
    text-decoration: none;
}
</code></pre>
<p>The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:</p>
<pre><code>sup.side-matter-sup {
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
    font-size: 0.75em;
    line-height: 0;
}
</code></pre>


Side Matter

Turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text.

Simple Commenter – Website Feedback tool vs Side Matter