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.
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.
Customize the preview, toggle between light and dark themes, adjust dimensions, and copy the embed code directly.
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>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>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>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>| 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) |
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>| 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 |
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>| 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 |
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>| 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 |
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>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();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
};For WordPress sites, add the script in your theme's functions.php and use shortcodes or the block editor.
// 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');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>