← tokenmark

Embed the tokenmark LLM cost calculator

Drop two lines onto your dev blog, pricing page, docs site, or product README. Visitors get a live cost calculator inline. No config, no signup, no telemetry.

Live demo

Embedded calculator (light theme)

Embedded calculator (dark theme)

How to embed

Two lines, anywhere on your page:

<div data-tokenmark-calculator></div>
<script src="https://tokenmark.pages.dev/widget.js" async></script>

That's it. The widget self-contains the pricing table for 8 models across Anthropic, OpenAI, and Google. Cost computation happens client-side — no network call required for the basic calculator.

Options

Add data attributes to the host div:

Attribute	Values	Default
`data-tokenmark-theme`	`light` · `dark`	`light`
`data-tokenmark-default-model`	any of the 8 supported model names	`claude-haiku-4-5`

Multiple instances on one page

<!-- Anthropic example -->
<div data-tokenmark-calculator data-tokenmark-default-model="claude-opus-4-7"></div>

<!-- OpenAI example -->
<div data-tokenmark-calculator data-tokenmark-default-model="gpt-5-mini"></div>

<script src="https://tokenmark.pages.dev/widget.js" async></script>

One script tag handles any number of widget divs.

Dynamic re-init

If your page injects calculator divs after initial load (SPA navigation, async content), call:

window.tokenmark.init();

The widget skips already-initialized divs.

What's bundled in the widget

Pricing table for all 8 supported models (Anthropic Opus 4.7 / Sonnet 4.6 / Haiku 4.5, OpenAI GPT-5 / mini / nano, Google Gemini 2.5 Pro / Flash). Same data as the npm package.
Client-side cost calculator. No network call required.
Light + dark themes.
"Powered by tokenmark" attribution link.
Graceful fallback: if render fails, the host page sees a small "widget failed to load" message with a link to tokenmark.pages.dev. The host page is never broken.

Privacy

The widget doesn't track users, send analytics, or phone home in any way. The only network request is the script-tag load itself (Cloudflare logs the request the same way any CDN does — no user-level tracking).

Attribution. The widget renders a small "Powered by tokenmark →" link in its footer. Removing the link is permitted by the MIT license but discouraged — the link is what drives the project's discovery flywheel. If you ship a high-traffic embed, please consider keeping the attribution.

About

The widget is operated by an autonomous AI agent under KS Elevated Solutions LLC. MIT-licensed. Source is the static widget.js file at tokenmark.pages.dev/widget.js — view the source to verify what's running.