@trust-engine/widget

TrustEngine Widget

A JavaScript widget for content verification using the TrustEngine blockchain registry.

Features

• 🔍 Smart Media Detection - Automatically scans images, videos, and audio elements
• 🔄 Real-time Monitoring - Detects dynamically added content using MutationObserver
• ✅ Verification Badges - Shows verification status with visual indicators
• 🎨 Style Isolation - Scoped CSS to prevent conflicts with host websites
• 🌐 Cross-browser Support - Compatible with modern browsers
• ♿ Accessibility Ready - ARIA labels and keyboard navigation

Installation

Via jsDelivr CDN (Recommended)

Simple setup (auto-initialization):

<!-- Minimal setup with defaults -->
<script src="https://cdn.jsdelivr.net/npm/@trust-engine/widget@1.0.0/dist/trust-engine-widget.js"></script>

<!-- With custom configuration via data attributes -->
<script 
  src="https://cdn.jsdelivr.net/npm/@trust-engine/widget@1.0.0/dist/trust-engine-widget.js"
  data-enabled-elements='["img","video","audio"]'
  data-badge-position="bottom-right"
  data-theme="light"
  data-auto-scan="true"
  data-observe-dynamic-content="true"
  data-show-tooltip="true"
  data-debug="false">
</script>

Manual initialization:

<script src="https://cdn.jsdelivr.net/npm/@trust-engine/widget@1.0.0/dist/trust-engine-widget.js"></script>
<script>
  TrustEngineWidget.init({
    enabledElements: ['img', 'video', 'audio'],
    badgePosition: 'bottom-right',
    theme: 'light',
    autoScan: true,
    observeDynamicContent: true,
    showTooltip: true,
    debug: false
  });
</script>

Via Custom CDN

<script src="https://cdn.trustengine.org/widget/latest/trust-engine-widget.js"></script>
<script>
  TrustEngineWidget.init({
    apiBaseUrl: 'https://core-api-server.onrender.com'
  });
</script>

Via NPM

npm install @trustengine/widget

import { TrustEngineWidget } from '@trustengine/widget';

const widget = new TrustEngineWidget({
  apiBaseUrl: 'https://core-api-server.onrender.com'
});
widget.initialize();

Configuration

The widget works with sensible defaults out of the box. All configuration options are optional:

// Minimal setup (recommended)
TrustEngineWidget.init();

// With custom options
TrustEngineWidget.init({
  enabledElements: ['img', 'video', 'audio'],     // Media types to scan
  badgePosition: 'bottom-right',                  // Badge position: 'top-left', 'top-right', 'bottom-left', 'bottom-right'
  theme: 'light',                                 // Theme: 'light' or 'dark'
  autoScan: true,                                 // Auto-scan page on load
  observeDynamicContent: true,                    // Monitor for dynamically added content
  showTooltip: true,                              // Show hover tooltips
  debug: false                                    // Enable debug logging in console
});

Configuration Options

Option	Data Attribute	Type	Default	Description
enabledElements	data-enabled-elements	string[]	['img', 'video', 'audio']	HTML elements to scan for verification
badgePosition	data-badge-position	string	'bottom-right'	Position of verification badge
theme	data-theme	string	'light'	Visual theme ('light' or 'dark')
autoScan	data-auto-scan	boolean	true	Automatically scan page when widget loads
observeDynamicContent	data-observe-dynamic-content	boolean	true	Monitor for new content added to the page
showTooltip	data-show-tooltip	boolean	true	Show tooltips on badge hover
debug	data-debug	boolean	false	Enable debug logging for development

Note: For data-enabled-elements, use JSON array format: '["img","video","audio"]'

API Integration

The widget uses the TrustEngine SDK to verify content:

• Automatically fetches media files
• Generates SHA256 hashes
• Queries the blockchain registry
• Displays verification badges based on results

Development

Build

npm run build

Test

npm run dev  # Start development server

Open test/sample-page/index.html to test the widget.

File Structure

js-widget/
├── src/
│   ├── scanner/           # Media detection
│   ├── ui/badge/         # Verification badges
│   ├── utils/            # Utilities
│   └── styles/           # CSS styles
├── config/               # Build configuration
├── test/                 # Test pages
└── dist/                 # Built files

Browser Support

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

License

MIT License