trustlabs-sdk
Version:
Easy-to-use SDK for displaying trust verification badges on websites. Supports React, Vue, vanilla JS, and CDN usage.
168 lines (146 loc) • 6.09 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrustLabs SDK - Simple Example</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.example {
margin: 20px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}
.email {
font-weight: 500;
color: #333;
}
h1 { color: #2c3e50; }
h2 { color: #34495e; margin-top: 30px; }
.info {
background: #e7f3ff;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>TrustLabs SDK - Simple Usage</h1>
<div class="info">
<strong>Note:</strong> This example uses a mock server endpoint.
Replace with your actual API endpoint in production.
</div>
<h2>Method 1: Auto-initialization with Meta Tags</h2>
<p>Configure the SDK using meta tags - the simplest approach:</p>
<div class="example">
<!-- Add this to your page head -->
<meta name="trustlabs-endpoint" content="http://localhost:8080/api/public/trust-status">
<meta name="trustlabs-auto-render" content="true">
<!-- Your content with emails marked with .trust-email class -->
<p>Contact: <span class="trust-email">john@example.com</span></p>
<p>Support: <span class="trust-email">support@company.com</span></p>
</div>
<h2>Method 2: Manual Initialization</h2>
<div class="example">
<p>User: <span class="email" id="user1">user@example.com</span></p>
<p>Admin: <span class="email" id="user2">admin@company.com</span></p>
<button onclick="initializeAndRender()">Initialize & Render Badges</button>
</div>
<h2>Method 3: One-liner with Auto-detection</h2>
<div class="example">
<p>Sales: <span class="trust-email">sales@company.com</span></p>
<p>Marketing: <span class="trust-email">marketing@company.com</span></p>
<button onclick="autoRenderAll()">Auto-render All Emails</button>
</div>
<!-- Load the SDK from CDN -->
<script src="https://unpkg.com/trustlabs-sdk@latest/dist/sdk.min.js"></script>
<script>
// Mock API endpoint for demo purposes
function createMockEndpoint() {
// In a real app, this would be your server endpoint
return async (emails) => {
console.log('Mock API called with emails:', emails);
// Simulate API delay
await new Promise(resolve => setTimeout(resolve, 500));
// Mock response
return emails.map(email => ({
email: email,
verified: Math.random() > 0.5, // Random verification status for demo
completed_at: new Date().toISOString()
}));
};
}
// Method 2: Manual initialization
function initializeAndRender() {
try {
// Initialize the SDK
window.TrustLabsSDK.init({
proxy: createMockEndpoint(),
autoInjectStyles: true
});
// Render badges for specific elements
const user1Email = document.getElementById('user1').textContent;
const user2Email = document.getElementById('user2').textContent;
Promise.all([
window.TrustLabsSDK.sdk.renderBadgeWithFetch({
targetEl: document.getElementById('user1'),
emails: [user1Email]
}),
window.TrustLabsSDK.sdk.renderBadgeWithFetch({
targetEl: document.getElementById('user2'),
emails: [user2Email]
})
]).then(() => {
console.log('All badges rendered successfully');
}).catch(error => {
console.error('Error rendering badges:', error);
});
} catch (error) {
console.error('Initialization error:', error);
alert('Error: ' + error.message);
}
}
// Method 3: Auto-render all emails
function autoRenderAll() {
try {
// Initialize with mock endpoint
window.TrustLabsSDK.init({
proxy: createMockEndpoint()
});
// Auto-render all elements with .trust-email class
window.TrustLabsSDK.autoRender('.trust-email')
.then(() => {
console.log('Auto-render completed');
})
.catch(error => {
console.error('Auto-render error:', error);
});
} catch (error) {
console.error('Error:', error);
alert('Error: ' + error.message);
}
}
// Demo: Auto-initialize if meta tags are present
document.addEventListener('DOMContentLoaded', () => {
const endpoint = document.querySelector('meta[name="trustlabs-endpoint"]');
const autoRender = document.querySelector('meta[name="trustlabs-auto-render"]');
if (endpoint && autoRender?.content === 'true') {
// Use mock endpoint for demo
window.TrustLabsSDK.init({
proxy: createMockEndpoint()
});
window.TrustLabsSDK.autoRender('.trust-email');
}
});
</script>
</body>
</html>