Skip to content
TruthVouch Docs

Badge Customization

TruthVouch trust badges are highly customizable to match your brand and use case. This guide covers colors, sizes, themes, and display configurations.

Color Customization

Brand Colors

Match your company’s color palette:

TruthVouch.Badge.render('cert-123', elem, {
  colors: {
    background: '#ffffff',
    text: '#333333',
    accent: '#0066cc',        // Score highlight
    scoreHigh: '#00a651',     // 75-100
    scoreMedium: '#f59e0b',   // 50-74
    scoreLow: '#ef4444'       // 0-49
  }
});

Light/Dark Mode

<!-- Light theme -->
<TrustBadge certificateId="cert-123" theme="light" />


<!-- Dark theme -->
<TrustBadge certificateId="cert-123" theme="dark" />


<!-- Auto (matches page) -->
<TrustBadge certificateId="cert-123" theme="auto" />

Score Color Ranges

Customize at what scores colors change:

TruthVouch.Badge.render('cert-123', elem, {
  scoreColorThresholds: {
    high: 80,    // >= 80 uses scoreHigh color
    medium: 50   // >= 50 uses scoreMedium color
                 // < 50 uses scoreLow color
  }
});

Size Customization

Preset Sizes

// Small (50px)
<TrustBadge size="small" />


// Medium (80px, default)
<TrustBadge size="medium" />


// Large (120px)
<TrustBadge size="large" />


// Extra Large (180px)
<TrustBadge size="xlarge" />

Custom Dimensions

TruthVouch.Badge.render('cert-123', elem, {
  width: '120px',
  height: '120px'
});

Responsive Sizing

Automatically adjust based on container:

TruthVouch.Badge.render('cert-123', elem, {
  responsive: true,
  minSize: 'small',    // Minimum 50px
  maxSize: 'large',    // Maximum 120px
  breakpoints: {
    mobile: 'small',   // < 768px
    tablet: 'medium',  // 768-1024px
    desktop: 'large'   // > 1024px
  }
});

Display Options

Show/Hide Elements

Control which information is displayed:

TruthVouch.Badge.render('cert-123', elem, {
  showScore: true,           // Show 0-100 number
  showLabel: true,           // Show "Trust Score"
  showDate: true,            // Show verification date
  showClaims: true,          // Show claims count
  showClaimBreakdown: true,  // Show expandable claims
  showBorder: true,          // Border around badge
  showShadow: true           // Drop shadow
});

Date Format

TruthVouch.Badge.render('cert-123', elem, {
  dateFormat: 'short',       // Jan 15
  dateFormat: 'medium',      // January 15, 2024
  dateFormat: 'long',        // Saturday, January 15, 2024
  dateFormat: 'relative'     // 2 days ago
});

Score Display Format

TruthVouch.Badge.render('cert-123', elem, {
  scoreFormat: 'numeric',    // 92
  scoreFormat: 'text',       // Excellent
  scoreFormat: 'both'        // 92 (Excellent)
  scoreFormat: 'bar'         // Visual progress bar
});

Variants

Inline Variant

Compact badge for inline use:

<p>
  This content is
  <TrustBadge certificateId="cert-123" variant="inline" size="small" />
  by TruthVouch.
</p>

Card Variant

Standalone card display:

<TrustBadge
  certificateId="cert-123"
  variant="card"
  showClaimBreakdown
  showExtendedInfo
/>

Card features:

  • Score prominently displayed
  • Full claim breakdown
  • Verification metadata
  • Certificate ID (copyable)

Minimal Variant

Score and date only:

<TrustBadge
  certificateId="cert-123"
  variant="minimal"
  showScore
  showDate
/>

Badge with expandable popup:

<TrustBadge
  certificateId="cert-123"
  variant="popup"
  popupPosition="top"  // top, bottom, left, right
  popupWidth="400px"
/>

Typography Customization

Font Configuration

TruthVouch.Badge.render('cert-123', elem, {
  fontFamily: "'Inter', sans-serif",
  fontSize: '14px',
  fontWeight: '600'
});

Label Customization

TruthVouch.Badge.render('cert-123', elem, {
  labels: {
    score: 'Verification Score',
    verified: 'Verified on',
    claims: 'Claims Checked',
    viewDetails: 'See details'
  }
});

Interactive Features

Click Behavior

TruthVouch.Badge.render('cert-123', elem, {
  interactive: true,
  onClick: (cert) => {
    console.log(`User clicked badge: ${cert.id}`);
    // Custom handler
  }
});

Hover Effects

TruthVouch.Badge.render('cert-123', elem, {
  hoverEffect: 'lift',      // Scale and shadow
  hoverEffect: 'glow',      // Glow effect
  hoverEffect: 'none'
});

Animations

TruthVouch.Badge.render('cert-123', elem, {
  animation: 'fade-in',
  animationDuration: '400ms',
  respectPrefersReducedMotion: true
});

Dark Mode

Automatic Detection

TruthVouch.Badge.render('cert-123', elem, {
  theme: 'auto'  // Detects prefers-color-scheme
});

Custom Dark Mode Colors

TruthVouch.Badge.render('cert-123', elem, {
  lightModeColors: {
    background: '#ffffff',
    text: '#333333'
  },
  darkModeColors: {
    background: '#1a1a1a',
    text: '#ffffff'
  }
});

Layout Options

Badge Position

// Badge as sibling to content
<article>
  <TrustBadge certificateId="cert-123" position="left" />
  <h1>Article Title</h1>
  <p>Content...</p>
</article>


// Badge in header
<header>
  <h1>Article Title</h1>
  <TrustBadge certificateId="cert-123" position="right" />
</header>

Spacing

TruthVouch.Badge.render('cert-123', elem, {
  margin: '16px',
  padding: '8px 12px'
});

Organization-Wide Defaults

Set defaults for all badges across your site:

TruthVouch.Badge.setDefaults({
  theme: 'auto',
  size: 'medium',
  colors: {
    accent: '#0066cc'
  },
  labels: {
    score: 'Trust Score'
  },
  responsive: true
});


// Now all badges use these defaults
TruthVouch.Badge.render('cert-123', elem);

CSS Customization

For advanced styling:

/* Override specific badge styles */
.truthvouch-badge {
  border-radius: 12px !important;
  font-family: 'Georgia', serif !important;
}


.truthvouch-score {
  font-size: 24px !important;
}

Accessibility Customization

ARIA Labels

TruthVouch.Badge.render('cert-123', elem, {
  ariaLabel: 'Content verified with a 92 out of 100 trust score',
  ariaDescribedBy: 'cert-123-description'
});

Keyboard Navigation

Badges support Tab and Enter navigation:

TruthVouch.Badge.render('cert-123', elem, {
  keyboardNavigable: true,
  focusIndicatorStyle: 'outline'  // outline or glow
});

Preview and Testing

Live Preview

Test your customization before deployment:

  1. Dashboard: Certification → Select certificate
  2. Click Customize Badge
  3. Adjust colors, size, and options
  4. Preview updates in real-time
  5. Copy generated code

Testing Checklist

  • Light/dark mode rendering
  • Mobile responsiveness
  • Keyboard navigation
  • Screen reader compatibility
  • Performance on slow networks

Next Steps

  • Embedding: Get code for your platform
  • Revocation: Configure badge updates when facts change
  • Analytics: Track badge clicks and interactions