Embed Trust Badge

Trust badges provide visual proof that content is certified and verifiable. Embed them in websites, emails, documents, and social media to build reader confidence and increase engagement.

Badge Types

Static Badge

Shows certification status without interaction. Ideal for:

• Static websites and blogs
• PDF documents
• Email newsletters
• Social media

<a href="https://verify.truthvouch.com/cert_abc123">
  <img src="https://badges.truthvouch.com/cert_abc123.svg"
       alt="Certified by TruthVouch">
</a>

Interactive Badge

Shows verification details on hover/click. Ideal for:

• Dynamic web applications
• Real-time dashboards
• Verification-heavy pages

<div id="badge-container"></div>
<script src="https://cdn.truthvouch.com/embed.js"></script>
<script>
  TruthVouch.embed("badge-container", {
    certificateId: "cert_abc123",
    interactive: true
  });
</script>

QR Code Badge

Scannable link to verification page. Ideal for:

• Print media
• Videos
• Presentations

<img src="https://badges.truthvouch.com/qr/cert_abc123.svg"
     alt="Scan to verify">

HTML Embedding

Basic Embedding

<!-- In your HTML head -->
<script src="https://cdn.truthvouch.com/verify.js"></script>

<!-- In your content -->
<article>
  <h1>Market Analysis Report</h1>
  <p>The AI market is growing at 38% annually...</p>

  <!-- Place badge -->
  <div id="truthvouch-badge"></div>
</article>

<script>
  TruthVouch.embed("truthvouch-badge", {
    certificateId: "cert_abc123",
    theme: "light",
    size: "medium"
  });
</script>

Customization Options

TruthVouch.embed("badge-container", {
  // Certificate ID (required)
  certificateId: "cert_abc123",

  // Visual options
  theme: "light",        // "light", "dark", "auto"
  size: "medium",        // "small", "medium", "large"
  style: "card",         // "card", "minimal", "detailed"

  // Behavior
  interactive: true,
  showScore: true,
  showExpiry: true,
  showSources: true,

  // Callbacks
  onVerified: (result) => {
    console.log("Content verified:", result);
  },
  onFailed: (error) => {
    console.error("Verification failed:", error);
  },

  // Styling
  customCSS: {
    backgroundColor: "#f5f5f5",
    borderColor: "#ccc",
    textColor: "#333"
  }
});

Framework Integration

React Component

import { TruthVouchBadge, useVerification } from "@truthvouch/react";

export function CertifiedContent() {
  const { result, loading, error } = useVerification("cert_abc123");

  return (
    <article>
      <h1>AI Market Analysis</h1>
      <p>Content goes here...</p>

      <TruthVouchBadge
        certificateId="cert_abc123"
        theme="light"
        onVerified={(result) => console.log(result)}
      />

      {result && (
        <div className="verification-details">
          <p>Trust Score: {result.trustScore}/100</p>
          <p>Certified: {result.certifiedDate}</p>
          <ul>
            {result.sources.map(s => (
              <li key={s.id}>
                <a href={s.url}>{s.title}</a>
              </li>
            ))}
          </ul>
        </div>
      )}
    </article>
  );
}

Vue Component

<template>
  <article>
    <h1>AI Market Analysis</h1>
    <p>Content goes here...</p>

    <TruthVouchBadge
      :certificateId="certificateId"
      theme="light"
      @verified="onVerified"
    />

    <div v-if="verification" class="verification-details">
      <p>Trust Score: {{ verification.trustScore }}/100</p>
      <p>Certified: {{ verification.certifiedDate }}</p>
      <ul>
        <li v-for="source in verification.sources" :key="source.id">
          <a :href="source.url">{{ source.title }}</a>
        </li>
      </ul>
    </div>
  </article>
</template>

<script>
import { TruthVouchBadge } from "@truthvouch/vue";

export default {
  components: {
    TruthVouchBadge
  },
  data() {
    return {
      certificateId: "cert_abc123",
      verification: null
    };
  },
  methods: {
    onVerified(result) {
      this.verification = result;
    }
  }
};
</script>

Angular Component

import { Component, OnInit } from '@angular/core';
import { TruthVouchService } from '@truthvouch/angular';

@Component({
  selector: 'app-certified-content',
  template: `
    <article>
      <h1>AI Market Analysis</h1>
      <p>Content goes here...</p>

      <truthvouch-badge
        [certificateId]="certificateId"
        theme="light"
        (verified)="onVerified($event)">
      </truthvouch-badge>

      <div *ngIf="verification" class="verification-details">
        <p>Trust Score: {{ verification.trustScore }}/100</p>
        <p>Certified: {{ verification.certifiedDate }}</p>
        <ul>
          <li *ngFor="let source of verification.sources">
            <a [href]="source.url">{{ source.title }}</a>
          </li>
        </ul>
      </div>
    </article>
  `
})
export class CertifiedContentComponent implements OnInit {
  certificateId = "cert_abc123";
  verification: any;

  constructor(private truthVouch: TruthVouchService) {}

  ngOnInit() {
    // Verification badge auto-verifies
  }

  onVerified(result: any) {
    this.verification = result;
  }
}

Email Integration

HTML Email

<!-- Email template -->
<html>
  <body style="font-family: Arial, sans-serif;">
    <h1>Market Report</h1>
    <p>The AI market analysis shows...</p>

    <!-- Use static image badge for email -->
    <p>
      <a href="https://verify.truthvouch.com/cert_abc123">
        <img
          src="https://badges.truthvouch.com/cert_abc123.svg"
          alt="Verified by TruthVouch"
          width="200"
          height="60"
        >
      </a>
    </p>

    <p>
      <small>
        This content is certified by TruthVouch.
        <a href="https://verify.truthvouch.com/cert_abc123">
          Verify authenticity
        </a>
      </small>
    </p>
  </body>
</html>

Email Provider Integration

Mailchimp Template Variable:

<!-- Add custom field in Mailchimp -->
*|TRUTHVOUCH_CERT_ID|* = "cert_abc123"

<!-- In template -->
<img src="https://badges.truthvouch.com/*|TRUTHVOUCH_CERT_ID|*.svg"
     alt="Verified">

SendGrid Dynamic Template:

<!-- In template -->
<img src="https://badges.truthvouch.com/{{cert_id}}.svg"
     alt="Verified by TruthVouch">

Document Embedding

PDF Documents

from reportlab.lib.pagesizes import letter
from reportlab.pdfgen import canvas
from reportlab.lib.units import inch
from PIL import Image
import requests

def add_truthvouch_badge(pdf_path: str, cert_id: str, output_path: str):
    """Add TruthVouch badge to PDF."""

    # Download badge image
    badge_url = f"https://badges.truthvouch.com/{cert_id}.svg"
    response = requests.get(badge_url)

    # Save as PNG for PDF compatibility
    with open("/tmp/badge.png", "wb") as f:
        f.write(response.content)

    # Create PDF with badge
    c = canvas.Canvas(output_path, pagesize=letter)
    width, height = letter

    # Add footer with badge
    c.drawString(
        inch,
        0.5*inch,
        f"Certified by TruthVouch. Verify: https://verify.truthvouch.com/{cert_id}"
    )

    # Draw badge image
    c.drawImage(
        "/tmp/badge.png",
        width - 2.5*inch,
        0.3*inch,
        width=2*inch,
        height=0.5*inch
    )

    c.save()

Google Docs / Microsoft Word

Use embed code as iframe:

<iframe
  src="https://badges.truthvouch.com/embed/{cert_id}.html"
  width="300" height="100"
  frameborder="0">
</iframe>

Or use the web clip / image insertion feature and link to:

https://badges.truthvouch.com/{cert_id}.svg

Social Media

Twitter/X Post

Just published verified market analysis on AI trends.
Trust is built on transparency.

https://verify.truthvouch.com/cert_abc123

#TruthVouch #AI #Verified

LinkedIn Post

<!-- LinkedIn allows HTML snippets -->
Just published a verified report on AI market trends.
Certified by TruthVouch for accuracy and transparency.

[Verify Report](https://verify.truthvouch.com/cert_abc123)

#TruthVouch #AI #VerifiedContent

Medium Post

# AI Market Analysis 2024

The global AI market shows strong growth...

## Verification
This article is certified by TruthVouch.
[View Certificate](https://verify.truthvouch.com/cert_abc123)

Styling and Customization

Theme Variables

/* Light theme (default) */
:root {
  --truthvouch-bg: #ffffff;
  --truthvouch-border: #e0e0e0;
  --truthvouch-text: #333333;
  --truthvouch-success: #4caf50;
  --truthvouch-warning: #ff9800;
}

/* Dark theme */
body.dark-mode {
  --truthvouch-bg: #1e1e1e;
  --truthvouch-border: #404040;
  --truthvouch-text: #ffffff;
  --truthvouch-success: #66bb6a;
  --truthvouch-warning: #ffb74d;
}

Custom CSS Class

TruthVouch.embed("badge", {
  certificateId: "cert_abc123",
  customCSS: {
    ".truthvouch-badge": {
      padding: "12px 16px",
      borderRadius: "8px",
      boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
    },
    ".truthvouch-score": {
      fontSize: "18px",
      fontWeight: "bold"
    }
  }
});

Verification Modal

When users click the badge, show details:

TruthVouch.embed("badge", {
  certificateId: "cert_abc123",
  interactive: true,
  modal: {
    title: "Content Verification",
    showSources: true,
    showExpiry: true,
    showRevokedStatus: true,
    darkMode: false
  }
});

Performance Optimization

Lazy Loading

<img
  src="https://badges.truthvouch.com/cert_abc123.svg"
  alt="Verified"
  loading="lazy"
>

Content Delivery

Use CDN-hosted badges for better performance:

• Static images: https://badges.truthvouch.com/{cert_id}.svg
• Interactive: https://cdn.truthvouch.com/embed.js

Cache headers automatically set to 24 hours.

Fallback for Offline

<noscript>
  <p>
    This content is certified by TruthVouch.
    <a href="https://verify.truthvouch.com/cert_abc123">
      Click to verify
    </a>
  </p>
</noscript>

Troubleshooting

Q: Badge won’t load in email

• Use SVG/PNG image instead of JavaScript
• Test in email preview tools first
• Check image URL is public and HTTPS

Q: Script conflicts with other libraries

• Use async loading: <script async src="..."></script>
• Namespace the embed: window.TruthVouch

Q: Modal not appearing on click

• Ensure JavaScript enabled
• Check certificate ID is valid
• Verify TruthVouch service is accessible

Next Steps

• Review Certification Flow for submitting content
• Explore Badge Customization for advanced styling
• Check Trust Score to understand scoring