Embeddable Pricing Widgets
Add live AI API pricing to your blog, docs, or README with one script tag. Auto-updating, responsive, dark/light themes.
39 Models
Every major LLM provider
Auto-Updates
Pricing data stays current
No API Key
Just a script tag
Dark & Light
Matches your site
Pricing Table
Show a filterable pricing table for any set of providers. Great for blog posts, documentation, and comparison articles.
<!-- Add this where you want the table -->
<div class="apipulse-widget"
data-type="table"
data-providers="openai,anthropic,google"
data-theme="dark"></div>
<script src="https://getapipulse.com/widget.js" async></script>
Options
| Attribute | Values | Description |
|---|---|---|
data-providers | openai, anthropic, google, deepseek, mistral, cohere, together, moonshot, xai, ai21 | Comma-separated provider slugs. Omit for all. |
data-tier | budget, mid, premium | Filter by pricing tier. |
data-theme | dark, light | Color theme. Default: dark. |
Live Preview
Model Badge
A compact inline badge showing a 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
Pricing Badge API
Shields.io-style SVG pricing badges via a simple URL. Use in READMEs, documentation, blog posts, or anywhere you can embed an image. No API key needed.
<!-- Markdown -->

<!-- HTML -->
<img src="https://getapipulse.com/api/badge?model=openai-gpt4o" alt="GPT-4o Pricing" />
<!-- With style -->

<!-- JSON format -->
https://getapipulse.com/api/badge?model=deepseek-v4-pro&format=json
Model Comparison
Compare specific models side by side. The cheapest model is highlighted. Great for "which model should I use" articles.
<!-- Side-by-side comparison -->
<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
Full Calculator
Embed the complete interactive cost calculator. Users can select models, enter token counts, and see cost estimates.
<iframe
src="https://getapipulse.com/embed-calculator.html"
width="100%"
height="600"
frameborder="0"
style="border:1px solid var(--border);border-radius:12px;"
loading="lazy"
title="AI API Cost Calculator"
></iframe>
Live Preview
Cost Report Card
Embed the AI API cost report card. Users grade their spending, see savings potential, and get a shareable report. Great for blog posts and developer tools.
<iframe
src="https://getapipulse.com/embed-report.html"
width="100%"
height="700"
frameborder="0"
style="border:1px solid var(--border);border-radius:12px;"
loading="lazy"
title="AI API Cost Report Card"
></iframe>
Options
| Parameter | Example | Description |
|---|---|---|
?m=openai-gpt5 | openai-gpt5 | Pre-select a model |
?i=10 | 10 | Pre-fill input tokens (millions/mo) |
?o=40 | 40 | Pre-fill output tokens (millions/mo) |
Live Preview
Available Model IDs
Use these IDs in data-model and data-models attributes.
| Provider | Model IDs |
|---|---|
| OpenAI | openai-gpt55, openai-gpt5, openai-gpt5-mini, openai-gpt4o, openai-gpt4o-mini, openai-gpt-oss-120b, openai-gpt-oss-20b |
| Anthropic | anthropic-opus48, anthropic-opus47, anthropic-opus, anthropic-sonnet46, anthropic-sonnet, anthropic-haiku |
google-gemini3-pro, google-pro, google-flash, google-flash-lite, google-gemini35-flash | |
| DeepSeek | deepseek-v4-pro, deepseek-v4-flash, deepseek-v32 |
| Mistral | mistral-large, mistral-small, mistral-medium |
| Cohere | cohere-command-r-plus, cohere-command-r, cohere-command-a |
| Meta | llama-4-scout, llama-4-maverick, llama-3.1-70b, llama-3.1-8b |
| xAI | xai-grok3, xai-grok3-mini |
| Moonshot | kimi-k26 |
| AI21 | ai21-jamba, ai21-jamba17 |