Implementation guide
Add a tool to your website
These are standard Web Components. They work without React, jQuery, an account or an API key. Each tool has a builder that produces the exact HTML for your settings.
Quick start
- Choose a tool and update its preview with your settings.
- Copy the embed code into your page’s HTML where the component should appear.
- Publish, test it on a phone and keep the included credit.
<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/contrast-checker.js" defer></script>
<sos-contrast-checker data-config="{"foreground":"#173f35","background":"#f6f1e8"}"></sos-contrast-checker>The script can be loaded once per page, even with multiple instances of the same component. The components use Shadow DOM to keep their styles separate. They render after JavaScript loads, so keep essential business and event details in your page’s normal HTML too.
Installation by platform
| Platform | Where the code goes |
|---|---|
| HTML / Astro | Paste into the page template. In Astro, add is:inline to the supplied external script tag to keep it as a browser script. |
| Shopify | Use a Custom Liquid section, or add it to a theme section. Keep configuration JSON HTML-escaped. Preview the theme before publishing. |
| WordPress | Use a Custom HTML block on a plan and account that permits scripts. If scripts are stripped, enqueue the file through your theme or ask the site administrator. |
| Webflow / Squarespace | Use an Embed or Code block on a plan that supports custom JavaScript. Test the published page; editor previews may not execute scripts. |
| React / Next.js | Load the external script once and render the custom element with data-config set to JSON.stringify(config). In TypeScript, declare the element or use the wrapper in the plain-text guide. |
Self-hosting
Download a tool’s ZIP from its builder. It includes widget.js, an example HTML page, original source files, configuration docs, the licence and third-party notices. Serve the folder over HTTP and point the example’s script at your own file. Keep the visible credit.
For Claude, Codex & other coding assistants
Start with llms.txt, the JSON tool manifest or the plain-text implementation guide. Per-tool docs include required fields, examples, constraints and exact versioned URLs.
Read https://tools.stuffonscreen.com/toolkit-manifest.json and the relevant tool documentation. Install the component on this page using my settings. Keep the included visible credit and test keyboard use and mobile layout before publishing.
- Business hours documentation
- Add to calendar documentation
- Before & after documentation
- QR code documentation
- Colour contrast documentation
Use the functions without a widget
A versioned ES module exports contrast, hoursStatus, calendarLinks, calendarIcs and validation helpers. A separate QR module exports qrSvg. They also run locally in Node 22+. The manifest links to examples.
import { contrast } from "./core.mjs";
console.log(contrast("#173f35", "#f6f1e8"));Content Security Policy
For hosted use, allow https://tools.stuffonscreen.com in script-src and the script’s inline Shadow DOM styles in your style policy. Image comparison also needs your image hosts in img-src. If your site forbids inline styles, adapt the source to an approved stylesheet rather than weakening your policy. No connect-src allowance is needed for these components.
Versions & costs
v1.0.0 scripts are pinned, not a floating “latest” release. Future behaviour changes get a new URL. The widgets run locally and make no scoring, model or billing calls. Hosted static files have no per-use fee from us. There is no hosted API for these new utilities; use the ES modules for automation.
The Content Effort API is a separate, rate-limited server service.
Licence
Public components require a visible credit. Non-visual library integrations should keep the credit in documentation. Read the attribution terms.