TrustLabs SDK

A JavaScript SDK for displaying trust verification badges on your website.

Installation

npm install trustlabs-sdk

Usage

Vanilla JavaScript

Basic Usage

<script src="https://unpkg.com/trustlabs-sdk/dist/sdk.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/trustlabs-sdk/dist/badge.css">

// Get trust status for emails
const { getTrustStatus, renderTrustBadge } = window.TrustLabsSDK;

// Fetch trust data
const trustData = await getTrustStatus(['user@example.com', 'admin@company.com']);

// Render badges
renderTrustBadge({
  targetEl: document.querySelector('.user-email'),
  trustData: trustData
});

Automatic Rendering

const { renderTrustBadgeWithFetch } = window.TrustLabsSDK;

// Automatically fetch and render badges
await renderTrustBadgeWithFetch({
  targetEl: document.querySelector('.user-email'),
  emails: ['user@example.com']
});

React

// Next.js (React 19) client component usage
'use client';
import { TrustBadge } from 'trustlabs-sdk/client';

function UserProfile({ userEmail }) {
  return (
    <div>
      <span>{userEmail}</span>
      <TrustBadge 
        emails={[userEmail]}
        onError={(error) => console.error('Badge error:', error)}
        onLoad={(data) => console.log('Badge loaded:', data)}
      />
    </div>
  );
}

Advanced React Usage

// Next.js (React 19) client component usage
'use client';
import { TrustBadge } from 'trustlabs-sdk/client';

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <span>{user.email}</span>
          <TrustBadge 
            emails={[user.email]}
            showTooltip={true}
            onError={(error) => {
              // Handle errors
              console.error(`Error loading badge for ${user.email}:`, error);
            }}
            onLoad={(data) => {
              // Handle successful load
              console.log(`Badge loaded for ${user.email}:`, data);
            }}
          />
        </div>
      ))}
    </div>
  );
}

API Reference

getTrustStatus(emails)

Fetches trust status for email addresses.

Parameters:

• emails (string[]): Array of email addresses

Returns: Promise<TrustStatus[]>

Example:

const trustData = await getTrustStatus(['user@example.com']);
console.log(trustData);
// [{ email: 'user@example.com', verified: true, completed_at: '2024-01-15T10:30:00Z' }]

renderTrustBadge(options)

Renders trust badges using vanilla JavaScript.

Parameters:

• options.targetEl (HTMLElement): Target element to insert badges after
• options.trustData (TrustStatus[]): Trust status data

renderTrustBadgeWithFetch(options)

Automatically fetches and renders trust badges.

Parameters:

• options.targetEl (HTMLElement): Target element to insert badges after
• options.emails (string[]): Email addresses to check

React Component: TrustBadge

Props:

• emails (string[]): Email addresses to check
• showTooltip (boolean, optional): Show completion date tooltip (default: true)
• onError (function, optional): Error callback
• onLoad (function, optional): Success callback

Types

interface TrustStatus {
  email: string;
  verified: boolean;
  completed_at?: string;
}

interface TrustStatusResponse {
  results: TrustStatus[];
}

Styling

The SDK includes fixed default styles via badge.css. Style overrides via props or external class names are not supported.

Error Handling

The SDK handles various error scenarios:

• Network errors
• Invalid email formats
• API rate limiting
• Missing or malformed responses

All errors are logged to console and can be handled via callbacks in React or try/catch in vanilla JS.

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+