CobaltCapture

Embed the What's my viewport

Drop the tool into your site with one line of HTML. Browser-only, no API key, no signup, no per-visit cost.

Live preview

This is what the embed looks like on your site, at recommended height.

Option 1: iframe (works everywhere)

Paste this anywhere HTML is allowed: a CMS, a blog post, a docs page, a Notion embed block.

Option 2: JS loader (auto-resizes)

Same widget, but the iframe grows to fit its content automatically. Drop the placeholder div anywhere on your page; the script finds it and mounts the iframe.

What you get

  • No backend. Everything runs in the visitor's browser. Their input never leaves their machine.
  • No signup. No API key, no account, no per-visit cost on your side or ours.
  • A "powered by Cobalt Capture" lockup that links back to the tool's full page. This is baked into the embed itself. It's the only thing we ask in exchange for the tool.
  • Mobile-friendly. The widget reflows responsively inside whatever width the iframe gets.

Where this fits on your site

The natural placements depend on what your audience reads about. A design system docs page is a clean home for the contrast checker. A web-dev tutorial is the right context for what's my viewport. A markdown editor's docs site benefits from markdown preview. The rule of thumb: embed where a reader would genuinely want to try the thing the surrounding content describes.

Want a different tool?

Every tool in the free tools library is embeddable with the same two snippets. Just change the data-cobalt-tool attribute or the iframe src to the slug you want.

Want the full Cobalt Capture for your team?

Capture screens, talk through them, hand the markdown to your coding agent. Free, no install.

Start capturing