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
Option 4: Floating Badge (New)
A floating badge in the bottom-right corner that expands into a full pricing table on click. Zero configuration, zero dependencies, Shadow DOM for complete style isolation. Perfect for blogs, docs, and dashboards.
src="https://getapipulse.com/widget/embed.js" defer>
Live Preview
Look for the purple badge in the bottom-right corner of this page. Click it to expand the pricing table.
The floating badge shows 25 models across 10 providers, sorted by output price. It's under 5KB gzipped, uses Shadow DOM so it won't conflict with your styles, and links back to APIpulse for full details.
New to APIpulse? The floating badge is our newest widget. See the full widget page for a live demo and customization options.
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, cohere-command-a, llama-4-scout, xai-grok3, kimi-k26, ai21-jamba, ai21-jamba17, google-gemini35-flash, deepseek-v32, mistral-medium |
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 →🎯 Rate Your API Setup in 30 Seconds
Get an A+ to F grade on your AI API costs. See how you compare and find cheaper alternatives instantly.
Get Your Cost Score →📊 Generate Your Personalized API Cost Report
Select your model, enter your monthly spend, and get a custom savings report with cheaper alternatives — free, in 60 seconds.