Mountain Thirteen Media

<p><strong>Noted Visual Feedback</strong> adds a lightweight feedback overlay to your WordPress site. Pin comments anywhere on any page, start threaded discussions, and share a review link with clients or teammates. No screenshots, no separate tools, no external accounts.</p>
<p>All feedback data is stored in your own WordPress database in custom tables. The plugin makes no external HTTP calls of any kind.</p>
<h4>What’s included</h4>
<ul>
<li>Pin comments anywhere on any page, anchored by position or by page element</li>
<li>Threaded replies on each pin</li>
<li>Page-scoped share links for guest reviewers (no WordPress account required)</li>
<li>Password and expiry controls on share links</li>
<li>Admin dashboard with pin list, pin detail view, and per-pin resolve/delete</li>
<li>CSV export of pins and comments</li>
<li>Email notifications on new pins and replies</li>
<li>Opt-in “Powered by Noted” attribution (off by default)</li>
<li>Works with any theme or page builder</li>
</ul>
<h4>How it works</h4>
<ol>
<li>Install and activate the plugin.</li>
<li>Visit any page on your site and append <code>?noted</code> to the URL.</li>
<li>Click anywhere on the page to place a pin and leave a comment.</li>
<li>Generate a share link for that page from the admin and send it to a reviewer. They enter their name and can start leaving feedback immediately.</li>
</ol>
<h4>Noted Pro</h4>
<p>A separate premium plugin, Noted Pro, extends this free plugin with:</p>
<ul>
<li>Drawing annotations (rectangles, arrows, freehand)</li>
<li>Text-edit suggestions with accept/reject workflow</li>
<li>Priority and category labels on pins</li>
<li>Internal-only pins hidden from guests</li>
<li>Bulk resolve</li>
<li>Password-protected and expiring share links</li>
<li>Export to Asana, Trello, Slack, Jira, Linear, GitHub Issues, Monday.com</li>
<li>Generic webhook export</li>
<li>White-label mode</li>
<li>WordPress Multisite support</li>
</ul>
<p>Learn more at <a href="https://wpnoted.com/pricing/" rel="nofollow ugc">wpnoted.com/pricing</a>. Noted Pro installs alongside this plugin; you do not need to replace or reconfigure anything.</p>
<h3>External Services</h3>
<p>This plugin does not connect to any external services. All feedback data is stored locally in your WordPress database.</p>
<h3>Source Code</h3>
<p>The frontend review overlay is a TypeScript module compiled to <code>assets/js/noted-overlay.min.js</code>. The human-readable source and build instructions are available in two places:</p>
<ol>
<li><strong>Public repository:</strong> <a href="https://github.com/RedZephon/noted-visual-feedback" rel="nofollow ugc">https://github.com/RedZephon/noted-visual-feedback</a></li>
<li><strong>Included with every release</strong> under the <code>overlay-src/</code> directory inside the plugin zip.</li>
</ol>
<p>Build with Node 18+:</p>
<pre><code>cd overlay-src && npm install && npm run build
</code></pre>
<p>This produces the bundle that the plugin enqueues. See <code>overlay-src/README.md</code> for details on layout and tooling (Vite + TypeScript). The admin-side JavaScript at <code>assets/js/noted-admin.js</code> is not compiled and can be read directly.</p>


Noted Visual Feedback

Collect visual feedback with pinned comments directly on your live WordPress site. All data stored locally in your WordPress database.

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.

Noted Visual Feedback vs Side Matter