Skip to content
TruthVouch Docs

Embedding the Trust Badge

The TruthVouch trust badge visually communicates your content’s verified accuracy to end-users. This guide covers embedding badges in websites, applications, and documentation.

Badge Basics

The trust badge displays:

  • Trust Score: 0-100 (color-coded for quick scanning)
  • Verification Date: When content was last verified
  • Claim Count: Number of claims verified
  • Interactive Details: Click to view claim breakdown (optional)

HTML Embedding

Simple Embed

Paste this in any web page:

<div id="truthvouch-badge" data-cert-id="cert-abc123"></div>
<script src="https://cdn.truthvouch.com/badge.js"></script>

The badge automatically loads and displays.

With Custom Container

Control where the badge appears:

<article>
  <h1>Product Guide</h1>
  <div id="my-badge"></div>


  <h2>Features</h2>
  <p>Our product includes...</p>
</article>


<script>
  TruthVouchBadge.render("my-badge", {
    certificateId: "cert-abc123",
    size: "medium",
    theme: "light"
  });
</script>

React Component (Coming Soon)

React components for the TruthVouch badge are in development. For now, use the HTML embedding method above.

Vue Component (Coming Soon)

Vue components for the TruthVouch badge are in development. For now, use the HTML embedding method above.

JavaScript API

For custom implementations:

// Load the SDK
<script src="https://cdn.truthvouch.com/sdk.js"></script>


<script>
// Simple render
TruthVouch.Badge.render('cert-abc123', document.getElementById('badge'));


// Get certificate data
TruthVouch.getCertificate('cert-abc123').then(cert => {
  console.log(`Score: ${cert.trustScore}/100`);
  console.log(`Claims: ${cert.claims.length}`);


  // Render custom badge
  document.getElementById('custom-badge').innerHTML = `
    <div class="badge">
      <p>Trust Score: ${cert.trustScore}/100</p>
      <p>Verified on ${cert.verificationDate}</p>
    </div>
  `;
});


// Listen for events
TruthVouch.Badge.on('click', (cert) => {
  console.log('User clicked badge', cert.id);
});
</script>

Platform-Specific Guides

WordPress

Install the TruthVouch plugin:

Dashboard → Plugins → Add New
Search: "TruthVouch"
Install and activate

Add badge to posts:

[truthvouch_badge cert_id="cert-abc123" size="medium" /]

Markdown/MDX

For static docs or blog posts:

# Product Guide


<TrustBadge certificateId="cert-abc123" />


Your content here...

Email

Add to HTML email templates:

<table>
  <tr>
    <td>
      <h2>Product Update</h2>
      <div id="email-badge"></div>
      <p>Details about the product...</p>
    </td>
  </tr>
</table>


<script>
window.addEventListener('load', () => {
  TruthVouch.Badge.render('cert-abc123',
    document.getElementById('email-badge')
  );
});
</script>

Embedding Options

Display Variants

Inline Badge (compact):

<TrustBadge certificateId="cert-abc123" variant="inline" />

Card Badge (detailed):

<TrustBadge certificateId="cert-abc123" variant="card" />

Badge + Popup (interactive):

<TrustBadge certificateId="cert-abc123" variant="popup" />

Sizing

// Small (50px)
TrustVouch.Badge.render(cert, elem, { size: 'small' });


// Medium (80px, default)
TruthVouch.Badge.render(cert, elem, { size: 'medium' });


// Large (120px)
TruthVouch.Badge.render(cert, elem, { size: 'large' });

Configuration

Show/Hide Elements

TruthVouch.Badge.render('cert-abc123', elem, {
  showScore: true,
  showDate: true,
  showClaims: false,      // Hide claim count
  showClaimBreakdown: true, // Show expandable details
  interactive: true        // Enable click to expand
});

Theming

// Light theme (default)
<TrustBadge theme="light" />


// Dark theme
<TrustBadge theme="dark" />


// Auto (matches page)
<TrustBadge theme="auto" />


// Custom colors
<TrustBadge
  colors={{
    background: '#f5f5f5',
    text: '#333',
    accent: '#00a651'
  }}
/>

Accessibility

Badges are fully accessible:

  • ARIA labels for screen readers
  • Keyboard navigation support
  • Color contrast compliant (WCAG AA)
  • Respects prefers-reduced-motion
<!-- Explicitly set ARIA label -->
<TrustBadge
  certificateId="cert-abc123"
  ariaLabel="This content was verified with a 92 out of 100 trust score"
/>

Mobile Responsiveness

Badges adapt to screen size:

TruthVouch.Badge.render('cert-abc123', elem, {
  responsive: true,      // Auto-size based on container
  minSize: 'small',
  maxSize: 'large'
});

Common Patterns

Product Page with Badge

<section class="product-hero">
  <h1>Product Name</h1>
  <TrustBadge certificateId="cert-product-123" size="large" />
  <p>Product description...</p>
</section>

Documentation with Badge

<article class="doc-content">
  <div class="doc-header">
    <h1>API Documentation</h1>
    <TrustBadge certificateId="cert-api-docs-456" size="small" />
  </div>
  <p>API documentation...</p>
</article>
<footer>
  <p>This email was generated by an AI assistant and verified</p>
  <TrustBadge certificateId="cert-email-789" variant="inline" size="small" />
</footer>

Troubleshooting

Badge Not Displaying

  1. Check certificate ID is correct
  2. Verify certificate status is “active”
  3. Check browser console for errors
  4. Ensure script is loaded from https://cdn.truthvouch.com

Styling Conflicts

If CSS conflicts occur:

// Load with CSS namespace
TruthVouch.Badge.render('cert-123', elem, {
  cssNamespace: 'tv-'  // All classes prefixed tv-badge, tv-score, etc.
});

Next Steps

  • Customization: Learn advanced styling options
  • Auto-Revocation: Configure when badges update
  • Events: Respond to user interactions with badges