🎨 Badge Widget

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

html
<!-- 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

html
<!-- 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

AttributeRequiredDefaultDescription
data-trustgradeYesEntity in type:id format (e.g. stablecoin:USDC)
data-sizeNomediumBadge size: small, medium, or large
data-themeNodarkColor 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