Placing a writing program shelf on your site

A writing program on PostShop has a shelf at https://postshop.live/shelf/<your-shelf>. You can link to it, or show it inside one of your pages. Its dashboard shows its own code, ready to copy.

1Link

<a href="https://postshop.live/shelf/your-program">Our writers and their books</a>

2Embed with a fixed height

One iframe and nothing else. The shelf scrolls inside it.

<iframe src="https://postshop.live/shelf/your-program?embed=1"
  title="Our writers and their books"
  style="width:100%;height:900px;border:0" loading="lazy"></iframe>

3Embed that sizes itself (optional)

The shelf tells the frame how tall it is with postMessage. This optional script on your page reads only messages from https://postshop.live and sets the frame’s height. It reads nothing else on your page.

<iframe id="postshop-shelf" src="https://postshop.live/shelf/your-program?embed=1"
  title="Our writers and their books" style="width:100%;height:900px;border:0" loading="lazy"></iframe>
<script>
window.addEventListener("message", function (e) {
  if (e.origin === "https://postshop.live" && e.data && e.data.postshopShelfHeight) {
    document.getElementById("postshop-shelf").style.height = e.data.postshopShelfHeight + "px";
  }
});
</script>

4What it loads

• Only the frame. Nothing runs on your page except the optional resize script above, which you can read in full.
• No cookies and no trackers inside the frame. The shelf records one page view per visit (which page, and whether it was embedded), with nothing about the visitor: no address, no browser details, no location.
• Fonts and images come from postshop.live and res.cloudinary.com.
• Book pages open in a new tab on postshop.live.

5Content Security Policy

If your site sets a Content Security Policy, allow the frame:

frame-src https://postshop.live;

6Accessibility

Writing program shelves are built to WCAG 2.1 Level AA, the standard of the U.S. Department of Justice’s ADA Title II rule for public entities’ web content. Every release is tested with axe-core against WCAG 2.0 and 2.1 A and AA rules, in light and dark mode, at phone and desktop widths. The pages:

• have a labelled control for every search, filter and sort, and announce result counts to screen readers;
• work with a keyboard alone, with a visible focus outline;
• give every image a text alternative, or mark it decorative where the writer’s name is beside it;
• keep text contrast at or above 4.5:1, and never use color alone to carry meaning;
• reflow to 320 pixels wide without scrolling sideways, and honor the visitor’s light or dark setting.

Our accessibility conformance report (VPAT 2.5 format, WCAG edition) is on its own page, with a PDF copy. Our general statement is on the Accessibility page. If you find a barrier, write to us and we fix it.

7Removing it

Delete the iframe (and the script, if you added it). Nothing else is left on your site.