Embed the Claude API Cost Calculator
One JavaScript tag. A live Claude API cost calculator on your page. No signup, no key, no backend cost — it loads the same calculator your readers would use on claude-cost-calc.vercel.app.
Copy-paste snippet
<script src="https://claude-cost-calc.vercel.app/embed.js" async></script>Drop that anywhere in your HTML — blog post, README rendered as HTML, docs site, Notion published page that allows <script> tags. The widget injects right where the tag is placed.
Live preview
Configuration
All options are data-* attributes on the script tag.
| Attribute | Default | What it does |
|---|---|---|
data-height | 620 | Iframe height in pixels. Minimum 240. |
data-theme | auto | light, dark, or auto (matches reader's system theme). |
data-target | (inline) | CSS selector. If set, widget mounts inside that element instead of where the script tag sits. |
data-branding | show | Set to hide to remove the small "Powered by" footer. The iframe still points back to claude-cost-calc.vercel.app. |
Example: custom height + mount target
<div id="cost-tool"></div>
<script
src="https://claude-cost-calc.vercel.app/embed.js"
data-height="720"
data-target="#cost-tool"
async
></script>Privacy & cost
- Free forever. No paid tier exists. Cost calculator math runs in the reader's browser.
- No tracking on your readers. The widget appends a UTM tag so we can see which sites send traffic (
?utm_source=embed-widget&utm_campaign=your-domain.com) but no cookies, no fingerprinting, no third-party scripts. - No API key required. The calculator uses static Claude pricing data shipped with the page.
FAQ
Why would I embed this on my site?
If you write tutorials, docs, or blog posts about Anthropic's Claude API, an embedded calculator lets readers instantly estimate cost for their own use case without leaving your page. This raises time-on-page, reduces bounce rate, and is more useful than a static pricing table that goes out of date the moment Anthropic changes their rates. The widget always reflects current pricing because it loads from claude-cost-calc.vercel.app at runtime.
Is it free?
Yes — completely free, no signup, no API key, no analytics tracking on your visitors beyond a 1×1 anonymous beacon used for our own usage counts. There is no rate limit, no quota, no paid tier.
Can I customize the widget?
Yes — see the configuration table above. data-height, data-theme, data-target, and data-branding are supported. If you need additional customization (e.g. preset model, preset usage profile), file an issue and we'll consider exposing it.
Does this work on Notion / Substack / Medium?
Platforms that allow raw <script> tags or HTML embeds: yes. Notion (with a public page + HTML embed block via tools like Super or Potion), Ghost, self-hosted WordPress, Hashnode, Gitbook, Docusaurus, MkDocs — all work. Substack and Medium strip script tags, so embed won't render there; link to the full tool instead.
Will the widget break if Anthropic changes their pricing?
No. The widget loads the live calculator. When Anthropic publishes new pricing we update the calculator and every embed picks it up automatically on the next page load.