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

For React applications:

Terminal window
npm install @truthvouch/react
import { TrustBadge } from '@truthvouch/react';


export function ProductGuide() {
  return (
    <div>
      <h1>Product Specs</h1>
      <TrustBadge
        certificateId="cert-abc123"
        size="large"
        theme="auto"
        showClaimBreakdown
      />
      <p>Product details...</p>
    </div>
  );
}

Vue Component

For Vue applications:

Terminal window
npm install @truthvouch/vue
<template>
  <div>
    <h1>Pricing Guide</h1>
    <TrustBadge
      certificate-id="cert-abc123"
      size="medium"
      theme="dark"
    />
    <p>Pricing details...</p>
  </div>
</template>


<script>
import { TrustBadge } from '@truthvouch/vue';


export default {
  components: { TrustBadge }
}
</script>

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