How does the embed work?

The generated snippet is a standard HTML iframe pointing at the hosted calculator with your chosen defaults encoded in the URL query string. The widget runs entirely in the visitor's browser — no keys, no server calls, no tracking.

Can I change the defaults later?

Yes. The defaults live in the iframe URL's query string, so you can edit the model, token values, requests, or currency directly in the embedded HTML at any time without regenerating from here.

Will the currency convert real exchange rates?

The currency setting only changes the displayed symbol and an optional fixed conversion factor you would maintain — the underlying model prices are quoted in USD. For live FX, apply your own rate to the USD figure.

Is the embedded widget responsive?

The iframe uses a fluid width and a fixed minimum height suitable for the compact calculator. Wrap it in your own responsive container if you need it to flex with a specific layout.

What is the Embeddable LLM Cost Calculator Widget?

Configure a minimal LLM cost calculator for your model and token profile, then copy a ready-made iframe snippet to embed it in your documentation, dashboard, or marketing page. Live preview included. It runs free in your browser on Gera Tools, with nothing uploaded.

Embeddable LLM Cost Calculator Widget

Name: Embeddable LLM Cost Calculator Widget
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Put a live cost calculator in your own docs

Want visitors to your documentation, pricing page, or internal dashboard to estimate LLM cost without leaving the page? Configure the default model, token values, monthly volume, and currency below, preview the result live, then copy a ready-made iframe snippet with your settings baked in.

How the snippet is built

The embed is a plain HTML iframe that loads the hosted calculator and reads your defaults from the URL query string:

<iframe
  src="https://tools.gera.services/embed/llm-cost?model=gpt-4o&in=1000&out=500&req=1000&cur=USD"
  width="100%" height="320" style="border:0">
</iframe>

Everything runs client-side in the visitor’s browser, so there are no API keys, no server round-trips, and nothing to maintain. To change the defaults later you just edit the query string in your HTML.

Who uses an embedded cost calculator?

API documentation pages — if you publish a developer guide for your product that internally calls an LLM, an embedded widget lets prospective customers estimate what your API will cost them per month without navigating away. Pre-fill it with realistic input/output token ratios for your typical request so the defaults are immediately useful.

Pricing comparison pages — teams evaluating multiple LLM providers often build internal spreadsheets. An embedded widget that defaults to your recommended model lets visitors compare options without context-switching.

Internal dashboards — engineering teams that track LLM usage sometimes want a quick sanity-check widget embedded in a Notion page, a Confluence doc, or a Retool dashboard. The iframe works in all of these without any backend work.

SaaS “what will it cost me” landing pages — products built on top of LLMs sometimes want to show customers their projected bill before sign-up. Pre-filling the monthly requests and a typical token profile gives visitors a realistic estimate, which reduces churn from billing surprises.

Practical tips for a clean embed

Set the iframe to width="100%" and give it a fixed pixel height so layout does not jump as the widget loads.
If your site enforces a Content Security Policy, add tools.gera.services to the frame-src directive.
The query-string parameters are human-readable — you can build different embeds for different pages by editing the URL directly, without returning to the generator.
Model prices are quoted in USD. If you display another currency, note the approximate rate clearly so visitors understand the conversion is approximate.
For documentation that covers multiple models, consider generating one embed per model and using a tab component around multiple iframes, each pre-configured for its own model and a typical token profile for that model’s use case.