Verification Badge

Display a Peppol verification badge on your website to show trading partners that you're verified and ready to receive documents.

Badge Preview

The verification badge shows:

• ✅ Your Peppol verification status
• 📄 Document types you can receive
• 🔒 Secure verification link

Embed the Badge

HTML Embed

Add the badge to your website with a simple script tag:

<!-- GoRoute Peppol Verification Badge -->
<div id="goroute-peppol-badge"></div>
<script>
  (function() {
    var badge = document.createElement('script');
    badge.src = 'https://app.goroute.ai/badge/embed.js';
    badge.setAttribute('data-participant-id', '0106:12345678');
    badge.setAttribute('data-theme', 'light');
    document.head.appendChild(badge);
  })();
</script>

React Component

import { useEffect, useRef } from 'react';

function PeppolBadge({ participantId, theme = 'light' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.goroute.ai/badge/embed.js';
    script.setAttribute('data-participant-id', participantId);
    script.setAttribute('data-theme', theme);
    script.setAttribute('data-container', containerRef.current.id);
    document.head.appendChild(script);

    return () => {
      script.remove();
    };
  }, [participantId, theme]);

  return <div id={`goroute-badge-${participantId}`} ref={containerRef} />;
}

// Usage
<PeppolBadge participantId="0106:12345678" theme="light" />

Vue Component

<template>
  <div :id="containerId" ref="container"></div>
</template>

<script>
export default {
  name: 'PeppolBadge',
  props: {
    participantId: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: 'light'
    }
  },
  computed: {
    containerId() {
      return `goroute-badge-${this.participantId}`;
    }
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://app.goroute.ai/badge/embed.js';
    script.setAttribute('data-participant-id', this.participantId);
    script.setAttribute('data-theme', this.theme);
    script.setAttribute('data-container', this.containerId);
    document.head.appendChild(script);
  }
};
</script>

Badge Options

Option	Values	Description
data-theme	light, dark, auto	Color theme
data-size	small, medium, large	Badge size
data-layout	horizontal, vertical	Badge orientation
data-show-name	true, false	Show company name
data-show-capabilities	true, false	Show document types

Example with Options

<div id="goroute-peppol-badge"></div>
<script>
  (function() {
    var badge = document.createElement('script');
    badge.src = 'https://app.goroute.ai/badge/embed.js';
    badge.setAttribute('data-participant-id', '0106:12345678');
    badge.setAttribute('data-theme', 'dark');
    badge.setAttribute('data-size', 'large');
    badge.setAttribute('data-layout', 'horizontal');
    badge.setAttribute('data-show-name', 'true');
    badge.setAttribute('data-show-capabilities', 'true');
    document.head.appendChild(badge);
  })();
</script>

Static Badge

For email signatures or places where JavaScript isn't allowed:

Image Badge

<a href="https://app.goroute.ai/verify/0106:12345678">
  <img 
    src="https://app.goroute.ai/badge/0106:12345678.svg" 
    alt="Peppol Verified"
    width="200"
  />
</a>

Markdown

[![Peppol Verified](https://app.goroute.ai/badge/0106:12345678.svg)](https://app.goroute.ai/verify/0106:12345678)

Badge Sizes

Size	Dimensions	Use Case
small	120 × 40	Inline, footer
medium	200 × 60	Sidebar, cards
large	300 × 100	Hero section, landing page

<!-- Small badge for footer -->
<img src="https://app.goroute.ai/badge/0106:12345678.svg?size=small" />

<!-- Large badge for landing page -->
<img src="https://app.goroute.ai/badge/0106:12345678.svg?size=large" />

Customization

Custom Colors

<script>
  badge.setAttribute('data-primary-color', '#2563eb');
  badge.setAttribute('data-text-color', '#1f2937');
  badge.setAttribute('data-background-color', '#ffffff');
</script>

Custom CSS

.goroute-badge {
  font-family: 'Inter', sans-serif;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.goroute-badge-verified {
  color: #059669;
}

.goroute-badge-capabilities {
  font-size: 12px;
  color: #6b7280;
}

Verification Page

When users click the badge, they're taken to a verification page:

https://app.goroute.ai/verify/0106:12345678

This page shows:

• ✅ Verification status
• 🏢 Company information
• 📄 Supported document types
• 🔐 Last verification date
• 📊 Trust score

Custom Verification Page

Link to a custom verification page:

<script>
  badge.setAttribute('data-verify-url', 'https://your-site.com/verify');
</script>

API for Badge Data

Get badge data programmatically:

import requests

response = requests.get(
    "https://app.goroute.ai/peppol-api/api/v1/badge/0106:12345678",
    headers={"X-API-Key": "your_api_key"}
)

badge_data = response.json()
# {
#     "verified": true,
#     "participant_id": "0106:12345678",
#     "name": "My Company BV",
#     "country": "NL",
#     "capabilities": ["Invoice", "CreditNote"],
#     "verified_at": "2024-01-15T10:30:00Z",
#     "trust_score": 95,
#     "badge_url": "https://app.goroute.ai/badge/0106:12345678.svg"
# }

Multiple Participants

If you manage multiple Peppol IDs, display them all:

<div class="peppol-badges">
  <div id="badge-nl"></div>
  <div id="badge-be"></div>
  <div id="badge-de"></div>
</div>

<script>
  const participants = [
    { id: '0106:12345678', container: 'badge-nl' },
    { id: '0208:0123456789', container: 'badge-be' },
    { id: '0204:DE123456789', container: 'badge-de' }
  ];
  
  participants.forEach(p => {
    var badge = document.createElement('script');
    badge.src = 'https://app.goroute.ai/badge/embed.js';
    badge.setAttribute('data-participant-id', p.id);
    badge.setAttribute('data-container', p.container);
    document.head.appendChild(badge);
  });
</script>

Email Signature

Add to your email signature:

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-top: 10px;">
      <a href="https://app.goroute.ai/verify/0106:12345678" style="text-decoration: none;">
        <img 
          src="https://app.goroute.ai/badge/0106:12345678.png?size=small" 
          alt="Peppol Verified - Send us e-invoices"
          width="150"
          style="border: 0;"
        />
      </a>
    </td>
  </tr>
</table>

Best Practices

1. Keep it visible — Place the badge where trading partners can find it
2. Link to verification — Always link to the verification page
3. Use appropriate size — Match the badge size to its context
4. Update when capabilities change — Refresh cached badges
5. Use HTTPS — Always load badges over HTTPS

Next Steps

• Trust Indicators
• Partner Verification
• Registration