trustlabs-sdk
Version:
Easy-to-use SDK for displaying trust verification badges on websites. Supports React, Vue, vanilla JS, and CDN usage.
300 lines (263 loc) • 10.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrustLabs SDK - CDN Usage</title>
<!-- Auto-configuration via meta tags -->
<meta name="trustlabs-endpoint" content="http://localhost:8080/api/public/trust-status">
<meta name="trustlabs-auto-render" content="true">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.section {
margin: 30px 0;
padding: 20px;
border: 1px solid #e1e5e9;
border-radius: 8px;
}
.user-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
margin: 20px 0;
}
.user-card {
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}
.email {
font-family: 'Courier New', monospace;
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-size: 14px;
}
.trust-email {
font-family: 'Courier New', monospace;
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-size: 14px;
}
.demo-button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
.demo-button:hover {
background: #0056b3;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
border-left: 4px solid #28a745;
margin: 10px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>TrustLabs SDK - CDN Usage Examples</h1>
<div class="section">
<h2>1. Automatic Detection (Zero Configuration)</h2>
<p>Simply add the <code>trust-email</code> class to any email. The SDK will auto-detect and render badges:</p>
<div class="user-list">
<div class="user-card">
<h4>John Doe - CEO</h4>
<p>Email: <span class="trust-email">john@company.com</span></p>
<p>Role: Chief Executive Officer</p>
</div>
<div class="user-card">
<h4>Jane Smith - CTO</h4>
<p>Email: <span class="trust-email">jane@company.com</span></p>
<p>Role: Chief Technology Officer</p>
</div>
<div class="user-card">
<h4>Bob Johnson - Lead Dev</h4>
<p>Email: <span class="trust-email">bob@company.com</span></p>
<p>Role: Lead Developer</p>
</div>
</div>
<div class="code-block">
<span class="trust-email">user@example.com</span>
</div>
</div>
<div class="section">
<h2>2. Manual Rendering</h2>
<p>For more control, manually trigger badge rendering:</p>
<div class="user-card">
<h4>Sarah Wilson - Designer</h4>
<p>Email: <span class="email" id="manual-email">sarah@company.com</span></p>
<button class="demo-button" onclick="renderManualBadge()">Render Badge</button>
</div>
<div class="code-block">
// Manual rendering
window.TrustLabsSDK.renderTrustBadgeWithFetch({
targetEl: document.getElementById('manual-email'),
emails: ['sarah@company.com']
});
</div>
</div>
<div class="section">
<h2>3. Batch Processing</h2>
<p>Process multiple emails at once for better performance:</p>
<div class="user-list" id="batch-users">
<div class="user-card">
<h4>Alice Brown</h4>
<p><span class="email">alice@company.com</span></p>
</div>
<div class="user-card">
<h4>Charlie Davis</h4>
<p><span class="email">charlie@company.com</span></p>
</div>
<div class="user-card">
<h4>Diana Evans</h4>
<p><span class="email">diana@company.com</span></p>
</div>
</div>
<button class="demo-button" onclick="renderBatchBadges()">Render All Badges</button>
<div class="code-block">
// Batch processing
const emails = ['alice@company.com', 'charlie@company.com', 'diana@company.com'];
const trustData = await window.TrustLabsSDK.getTrustStatus(emails);
emails.forEach((email, index) => {
const element = document.querySelector(`[data-email="${email}"]`);
window.TrustLabsSDK.renderTrustBadge({
targetEl: element,
trustData: [trustData[index]]
});
});
</div>
</div>
<div class="section">
<h2>4. Error Handling</h2>
<p>Handle errors gracefully:</p>
<div class="user-card">
<h4>Invalid Email Test</h4>
<p>Email: <span class="email" id="error-email">invalid-email-format</span></p>
<button class="demo-button" onclick="testErrorHandling()">Test Error Handling</button>
</div>
<div class="code-block">
try {
await window.TrustLabsSDK.renderTrustBadgeWithFetch({
targetEl: element,
emails: ['invalid-email']
});
} catch (error) {
console.error('Badge error:', error.code, error.message);
// Handle error appropriately
}
</div>
</div>
<!-- Load SDK from CDN -->
<script src="https://unpkg.com/trustlabs-sdk@latest/dist/sdk.min.js"
data-trustlabs-endpoint="http://localhost:8080/api/public/trust-status"
data-trustlabs-auto-render="false"></script>
<script>
// Mock server for demo purposes
const mockTrustData = {
'john@company.com': { verified: true, completed_at: '2024-01-15T10:30:00Z' },
'jane@company.com': { verified: true, completed_at: '2024-02-20T14:45:00Z' },
'bob@company.com': { verified: false },
'sarah@company.com': { verified: true, completed_at: '2024-03-10T09:15:00Z' },
'alice@company.com': { verified: false },
'charlie@company.com': { verified: true, completed_at: '2024-01-25T16:20:00Z' },
'diana@company.com': { verified: true, completed_at: '2024-02-14T11:30:00Z' }
};
// Create mock proxy
async function mockProxy(emails) {
console.log('Mock API called with:', emails);
// Simulate network delay
await new Promise(resolve => setTimeout(resolve, 300));
return emails.map(email => ({
email: email,
verified: mockTrustData[email]?.verified || false,
completed_at: mockTrustData[email]?.completed_at || null
}));
}
// Initialize SDK
document.addEventListener('DOMContentLoaded', function() {
try {
window.TrustLabsSDK.init({
proxy: mockProxy,
autoInjectStyles: true
});
console.log('TrustLabs SDK initialized successfully');
// Auto-render 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('SDK initialization error:', error);
}
});
// Manual badge rendering
function renderManualBadge() {
const emailEl = document.getElementById('manual-email');
const email = emailEl.textContent;
window.TrustLabsSDK.sdk.renderBadgeWithFetch({
targetEl: emailEl,
emails: [email]
}).then(() => {
console.log('Manual badge rendered for:', email);
}).catch(error => {
console.error('Manual render error:', error);
});
}
// Batch badge rendering
async function renderBatchBadges() {
try {
const batchContainer = document.getElementById('batch-users');
const emailElements = batchContainer.querySelectorAll('.email');
const emails = Array.from(emailElements).map(el => el.textContent);
console.log('Rendering badges for batch:', emails);
// Get trust data for all emails at once
const trustData = await window.TrustLabsSDK.getTrustStatus(emails);
// Render badges
emailElements.forEach((element, index) => {
window.TrustLabsSDK.renderTrustBadge({
targetEl: element,
trustData: [trustData[index]]
});
});
console.log('Batch rendering completed');
} catch (error) {
console.error('Batch rendering error:', error);
}
}
// Error handling test
function testErrorHandling() {
const errorEl = document.getElementById('error-email');
window.TrustLabsSDK.sdk.renderBadgeWithFetch({
targetEl: errorEl,
emails: ['invalid-email-format']
}).then(() => {
console.log('Unexpectedly succeeded with invalid email');
}).catch(error => {
console.log('Expected error caught:', error.code, error.message);
// Show user-friendly error
const errorBadge = document.createElement('span');
errorBadge.className = 'trust-badge error';
errorBadge.textContent = 'Invalid email';
errorBadge.style.marginLeft = '8px';
errorEl.insertAdjacentElement('afterend', errorBadge);
});
}
</script>
</body>
</html>