How to Embed Live LLM Pricing in Your Docs
Writing a blog post about AI costs? Building internal docs for your team? Maintaining a README that compares model pricing? Instead of screenshotting pricing tables that go stale in weeks, embed a live widget that updates automatically.
APIpulse offers free, drop-in widgets for pricing tables, model badges, and side-by-side comparisons. One script tag, zero maintenance.
Option 1: Pricing Table
Show a filterable pricing table for any set of providers. Great for comparison articles and internal documentation.
<!-- Pricing table for OpenAI, Anthropic, Google -->
<div class="apipulse-widget"
data-type="table"
data-providers="openai,anthropic,google"></div>
<script src="https://getapipulse.com/widget.js" async></script>
Live Preview
You can filter by tier (budget, mid, premium) and switch between dark and light themes with data-theme="light".
Option 2: Model Badge
A compact inline badge showing a single model's pricing. Perfect for README files, inline references, and sidebars.
<!-- Compact pricing badge -->
<div class="apipulse-widget"
data-type="badge"
data-model="openai-gpt4o-mini"></div>
<script src="https://getapipulse.com/widget.js" async></script>
Live Preview
Option 3: Side-by-Side Comparison
Compare specific models head to head. The cheapest model is highlighted automatically. Ideal for "which model should I use" content.
<!-- Compare 4 models side by side -->
<div class="apipulse-widget"
data-type="compare"
data-models="openai-gpt5,anthropic-sonnet,google-pro,deepseek-v4-pro"></div>
<script src="https://getapipulse.com/widget.js" async></script>
Live Preview
Configuration Options
| Attribute | Values | Description |
|---|---|---|
data-type | table, badge, compare | Widget type |
data-providers | openai, anthropic, google, deepseek, mistral, cohere, together, moonshot, xai, ai21 | Comma-separated (table only) |
data-model | Model ID (e.g. openai-gpt4o-mini) | Single model (badge only) |
data-models | Comma-separated model IDs | Models to compare (compare only) |
data-tier | budget, mid, premium | Filter by tier (table only) |
data-theme | dark, light | Color theme. Default: dark |
Where to Use These Widgets
Blog posts — Embed a pricing table in your "GPT-5 vs Claude" comparison article. Readers see live prices, not stale screenshots.
Internal docs — Add a model badge next to each provider recommendation in your team's AI guidelines.
README files — Show a compact comparison of the models your project supports, with real pricing.
Developer portals — Embed a full pricing table in your API documentation or developer dashboard.
How It Works
The widget script (widget.js) is under 5KB gzipped. It:
- Scans the page for
.apipulse-widgetelements - Fetches current pricing data from the APIpulse API
- Renders the appropriate widget type (table, badge, or comparison)
- Respects the
data-themeattribute and your site's color scheme
No API key required. No rate limits. The data is cached and updates when we update our pricing database (currently monthly).
Full Calculator Embed
Need more than static pricing? You can also embed the full interactive cost calculator via iframe:
<iframe
src="https://getapipulse.com/embed-calculator.html"
width="100%"
height="600"
frameborder="0"
loading="lazy"
title="AI API Cost Calculator"
></iframe>
Available Model IDs
Use these IDs in data-model and data-models attributes:
| Provider | Model IDs |
|---|---|
| OpenAI | openai-gpt55, openai-gpt5, openai-gpt4o, openai-gpt4o-mini |
| Anthropic | anthropic-opus, anthropic-sonnet, anthropic-haiku |
google-gemini3-pro, google-pro, google-flash | |
| DeepSeek | deepseek-v4-pro, deepseek-v4-flash |
| Mistral | mistral-large, mistral-small |
| Others | cohere-command-r-plus, llama-4-scout, xai-grok3, kimi-k26, ai21-jamba |
See the full widget documentation for all model IDs and advanced options.
Try the Widgets Now
Copy any code snippet above and paste it into your site. The widgets work immediately — no signup, no API key.
View All Widgets & Live Previews →