🎨 Badge Widget html html
Badge Widget
Embed TrustGrade trust score badges on your website or dApp. Vanilla JavaScript — no dependencies, no build step, no framework required. Just add the script and drop in divs.
Quick Start
html Two lines. That's it.
<!-- 1. Add the script (once per page) -->
<script src="https://trustgrade.ai/widget.js"></script>
<!-- 2. Add badge divs anywhere -->
<div data-trustgrade="defi_protocol:Uniswap" data-size="medium"></div>
<div data-trustgrade="stablecoin:USDC" data-size="small"></div>
<div data-trustgrade="stablecoin:USTC" data-size="large"></div>
<!-- The script auto-fetches scores and renders badges --> Live Preview
A+ (Score 100)
A+
100/100 TrustGrade
B- (Score 82)
B-
82/100 TrustGrade
F (Score 0)
F
0/100 TrustGrade
Badge Sizes
<!-- Small: 88×31 — compact, for tables and lists -->
<div data-trustgrade="defi_protocol:Uniswap" data-size="small"></div>
<!-- Medium: 120×40 — default, balanced for most use cases -->
<div data-trustgrade="defi_protocol:Uniswap" data-size="medium"></div>
<!-- Large: 200×60 — prominent, for landing pages and headers -->
<div data-trustgrade="defi_protocol:Uniswap" data-size="large"></div> Small (88×31)
A+ 100
Medium (120×40)
A+
100/100 TrustGrade
Large (200×60)
A+
100/100 ⚡ TrustGrade Verified
Themes
<!-- Dark theme (default) -->
<div data-trustgrade="stablecoin:USDC" data-size="medium" data-theme="dark"></div>
<!-- Light theme -->
<div data-trustgrade="stablecoin:USDC" data-size="medium" data-theme="light"></div> Dark (default)
A+
100/100 TrustGrade
Light
A+
100/100 TrustGrade
JavaScript API
javascript Programmatic Usage
// Programmatic API
TrustGrade.render({
entity: 'defi_protocol:Uniswap',
size: 'medium',
theme: 'dark',
target: '#my-badge-container'
});
// Or render multiple at once
TrustGrade.renderAll();
// Get raw score data
const score = await TrustGrade.fetch('stablecoin', 'USDC');
console.log(score.grade); // "B-"
console.log(score.score); // 82 Data Attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-trustgrade | Yes | — | Entity in type:id format (e.g. stablecoin:USDC) |
data-size | No | medium | Badge size: small, medium, or large |
data-theme | No | dark | Color theme: dark or light |
Caching
The widget caches score responses in localStorage for 1 hour to minimize API calls.
Cache key: trustgrade:{type}:{id}. The cache automatically refreshes on expiry.
Rate Limiting
Badge requests use the public endpoint and are rate-limited per IP (100/hour for anonymous, higher with an API key). For high-traffic sites, consider proxying through your backend.
Error Handling
If the API is unreachable or the entity isn't found, the widget renders a neutral "N/A" badge:
?
N/A TrustGrade