Widget Integration
Add live AI rankings to any website with a single script tag. Four widget types are available, each rendered in an isolated Shadow DOM so they never conflict with your styles.
Setup
Add the widget script to your page. It is under 15 KB gzipped and has zero dependencies.
<script src="https://cdn.lmmarketcap.com/widget.js" async></script>The script auto-discovers any elements with a data-aimc-widget attribute and renders them. It also watches for dynamically added elements, so widgets work with single-page apps too.
Live Widget Previews
Customize the preview, toggle between light and dark themes, adjust dimensions, and copy the embed code directly.
Ranking Ticker
Horizontal scrolling bar showing top models with scores. Great for sidebars and dashboards.
<script src="https://cdn.lmmarketcap.com/widget.js" async></script>
<div
data-aimc-widget="ranking-ticker"
data-category="coding"
data-limit="5"
data-theme="light"
style="width: 700px; height: 60px;"
></div>Model Card
Single model stats card with score, rank, provider, and pricing details.
<script src="https://cdn.lmmarketcap.com/widget.js" async></script>
<div
data-aimc-widget="model-card"
data-model="claude-3-5-sonnet"
data-show-pricing="true"
data-theme="light"
style="width: 320px; height: 340px;"
></div>Comparison Table
Side-by-side comparison of 2-3 models showing scores, rankings, and pricing.
| Claude 3.5 Sonnet | GPT-4o | Gemini 2.0 Pro | |
|---|---|---|---|
| Provider | Anthropic | OpenAI | |
| Score | 94.2 | 92.8 | 91.5 |
| Rank | #1 | #2 | #3 |
| Quality | #1 | #2 | #3 |
| Adoption | #3 | #1 | #4 |
| Input $/1M | $3.00 | $2.50 | $1.25 |
| Output $/1M | $15.00 | $10.00 | $5.00 |
<script src="https://cdn.lmmarketcap.com/widget.js" async></script>
<div
data-aimc-widget="comparison-table"
data-models="claude-3-5-sonnet,gpt-4o,gemini-2-0-pro"
data-category="coding"
data-theme="light"
style="width: 700px; height: 360px;"
></div>1. Ranking Ticker
A compact horizontal ticker showing the top models in a category. Great for blog sidebars, dashboards, or news sites.
<div
data-aimc-widget="ranking-ticker"
data-category="coding"
data-limit="5"
data-theme="light"
></div>Attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-category | Yes | -- | Category slug (coding, image-generation, video-generation) |
data-limit | No | 5 | Number of models to show (1-20) |
data-theme | No | auto | Color theme: light, dark, or auto |
data-refresh | No | 300 | Auto-refresh interval in seconds (0 to disable) |
2. Model Card
A detailed card for a single model showing its score, rank, pricing, and key signals. Perfect for model profile pages or review sites.
<div
data-aimc-widget="model-card"
data-model="claude-3-5-sonnet"
data-show-pricing="true"
data-theme="light"
></div>Attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-model | Yes | -- | Model slug |
data-show-pricing | No | true | Show pricing section |
data-show-signals | No | false | Show signal breakdown |
data-theme | No | auto | Color theme: light, dark, or auto |
3. Comparison Table
A side-by-side comparison of 2-4 models. Shows scores, pricing, and key differences. Ideal for "vs" pages and decision-making tools.
<div
data-aimc-widget="comparison-table"
data-models="claude-3-5-sonnet,gpt-4o"
data-category="coding"
data-theme="light"
></div>Attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-models | Yes | -- | Comma-separated model slugs (2-4) |
data-category | No | auto-detected | Category for score context |
data-show-pricing | No | true | Show pricing rows |
data-theme | No | auto | Color theme: light, dark, or auto |
4. Category Leaderboard
A full leaderboard table for a category. Includes rank, score, trend indicators, and links to model profiles. Works well as the main content on a rankings page.
<div
data-aimc-widget="category-leaderboard"
data-category="coding"
data-limit="10"
data-theme="light"
></div>Attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-category | Yes | -- | Category slug |
data-limit | No | 10 | Number of models to show (1-50) |
data-show-trend | No | true | Show 7-day rank change |
data-theme | No | auto | Color theme: light, dark, or auto |
Customization
Themes
All widgets support light, dark, and auto themes. The auto theme reads the user's system preference. You can also set a global theme:
<script>
window.__AIMC_CONFIG__ = {
theme: "dark",
themeColors: {
primary: "#6366f1",
background: "#0a0a0a",
},
};
</script>
<script src="https://cdn.lmmarketcap.com/widget.js" async></script>Programmatic API
For SPAs and dynamic content, use the programmatic API:
// Initialize with config
AIMarketCapWidget.init({
apiKey: "YOUR_API_KEY",
theme: "dark",
});
// Manually render a new widget
const el = document.getElementById("my-widget");
await AIMarketCapWidget.render(el);
// Refresh data
await AIMarketCapWidget.refresh(el);
// Clean up
AIMarketCapWidget.destroy(el);
// Or destroy all widgets
AIMarketCapWidget.destroyAll();Caching
The widget SDK caches API responses for 5 minutes by default. You can change this globally:
window.__AIMC_CONFIG__ = {
cacheTTL: 600000, // 10 minutes in milliseconds
};WordPress Integration
For WordPress sites, add the script in your theme's functions.php and use shortcodes or the block editor.
Option 1: functions.php
// Add to your theme's functions.php
function aimc_enqueue_widget() {
wp_enqueue_script(
'aimc-widget',
'https://cdn.lmmarketcap.com/widget.js',
array(),
'1.0.0',
true // Load in footer
);
}
add_action('wp_enqueue_scripts', 'aimc_enqueue_widget');Option 2: Custom HTML Block
In the WordPress block editor, add a "Custom HTML" block and paste:
<script src="https://cdn.lmmarketcap.com/widget.js" async></script>
<div data-aimc-widget="category-leaderboard" data-category="coding" data-limit="10"></div>Next Steps
- API Reference -- The data behind every widget.
- API Playground -- Try API endpoints interactively.
- Methodology -- Understand what the scores mean.