Embed the Prompt Token Pricing Estimator
One JavaScript tag. A live token-count + cost estimator on your page covering Claude, GPT-4o, and Gemini. No signup, no key, no backend — loads the same estimator as prompt-pricing.vercel.app.
Copy-paste snippet
<script src="https://prompt-pricing.vercel.app/embed.js" async></script>Drop that into any HTML — blog post, docs site, Notion-with-HTML, Ghost, Hashnode. The widget appears right where the tag sits.
Live preview
Configuration
| Attribute | Default | What it does |
|---|---|---|
data-height | 620 | Iframe height in pixels (min 240). |
data-theme | auto | light, dark, or auto. |
data-target | (inline) | CSS selector. Widget mounts inside that element instead of where the tag sits. |
data-branding | show | Set to hide to remove the "Powered by" footer. |
Example: target a specific container
<div id="prompt-cost-tool"></div>
<script
src="https://prompt-pricing.vercel.app/embed.js"
data-target="#prompt-cost-tool"
data-height="700"
async
></script>FAQ
Why would I embed this?
If you write about prompt engineering, LLM cost optimization, or model selection, an embedded token pricing estimator lets readers paste their own prompt and see cost across Claude, GPT-4o, and Gemini side-by-side without leaving your page. More useful than a static table — readers get an answer specific to their actual prompt.
Is it free?
Yes. No signup, no API key, no rate limit, no paid tier. Tokenization runs in your reader's browser.
Can I customize it?
Yes — see configuration table above. data-height, data-theme, data-target, and data-branding are supported.
Does this work on Notion / Substack / Medium?
Platforms that allow raw <script> tags: yes (Ghost, self-hosted WordPress, Hashnode, Gitbook, Docusaurus, MkDocs, Notion-via-Super). Substack and Medium strip scripts — link to the full tool from those instead.
Will it break if model pricing changes?
No. The widget loads the live estimator. We update prices in one place and every embed picks it up automatically on next page load.