Widget Integration

Overview

The Have I Been Drained HTML widget allows you to embed a ready-to-use wallet security checker into your website with minimal configuration. The widget features a captcha-like interface that users can interact with to check their wallet security.

Installation

Basic Setup

Add the widget script to your HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Check Wallet Security</h1>
  
  <!-- Widget container -->
  <div id="hibd-widget"></div>
  
  <!-- Widget script -->
  <script src="https://haveibeendrained.org/widget.js"></script>
  <script>
    HIBDWidget.init({
      containerId: 'hibd-widget'
    });
  </script>
</body>
</html>

Configuration Options

Basic Configuration

HIBDWidget.init({
  containerId: 'hibd-widget',  // Required: DOM element ID
  theme: 'light',              // Optional: 'light' or 'dark' (default: 'light')
  apiUrl: 'https://api.haveibeendrained.org'  // Optional: API endpoint
});

Advanced Configuration

HIBDWidget.init({
  containerId: 'hibd-widget',
  theme: 'light',              // 'light' or 'dark'
  apiUrl: 'https://api.haveibeendrained.org',
  showPoweredBy: true,          // Show "Powered by Have I Been Drained" attribution
  onResult: function(result) {
    // Callback when analysis completes
    console.log('Analysis result:', result);
    
    if (result.status === 'drained') {
      alert('Warning: This wallet has been drained!');
    }
  }
});

Configuration Reference

Option	Type	Default	Description
`containerId`	string	required	ID of the DOM element where widget will render
`theme`	string	`'light'`	Color theme: `'light'` or `'dark'`
`apiUrl`	string	`'https://api.haveibeendrained.org'`	Base URL for API endpoint
`showPoweredBy`	boolean	`true`	Show “Powered by Have I Been Drained” attribution
`onResult`	function	`undefined`	Callback function called when analysis completes

Callback Function

The onResult callback receives a result object:

{
  status: 'safe' | 'at_risk' | 'drained' | 'unknown',
  type: 'wallet_analysis' | 'drainer' | 'unknown',
  message: string,
  details: {
    overallRisk: number,           // Risk score 0-100
    severity: 'SAFE' | 'AT_RISK' | 'DRAINED',
    walletAddress: string,
    transactionCount: number,
    detections: [...],             // Array of detected issues
    recommendations: [...],        // Array of recommendation strings
    affectedAssets: {
      tokens: [...],
      nfts: [...],
      sol: number
    }
  }
}

Example:

HIBDWidget.init({
  containerId: 'hibd-widget',
  onResult: function(result) {
    // Handle result based on status
    switch(result.status) {
      case 'safe':
        console.log('✅ Wallet is safe');
        break;
      case 'at_risk':
        console.log('⚠️ Wallet at risk');
        showWarning(result.details);
        break;
      case 'drained':
        console.log('🚨 Wallet has been drained!');
        showAlert(result.details);
        break;
    }
  }
});

The widget displays different states based on the verification status:

Idle: Initial state with “Check wallet security” button
Loading: Shows spinner while analyzing the wallet
Verified: Shows result status (safe/at_risk/drained) with option to see detailed results
Error: Shows error message if verification fails

Users can click “See Results” to view a detailed modal with:

Risk score
Detections (if any)
Recommendations
Affected assets information

Styling

The widget is self-contained with its own styles. The widget container has a maximum width of 320px and is centered by default. All styles are scoped to the .hibd-widget class to avoid conflicts with your site’s CSS.

Custom Container Styling

You can style the container element:

/* Widget container */
#hibd-widget {
  max-width: 320px;  /* Widget default max-width */
  margin: 0 auto;     /* Center the widget */
}

Examples

React Integration

import { useEffect, useRef } from 'react';

function WalletChecker() {
  const widgetRef = useRef(null);
  
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://haveibeendrained.org/widget.js';
    script.onload = () => {
      window.HIBDWidget.init({
        containerId: 'hibd-widget',
        theme: 'light',
        onResult: (result) => {
          console.log('Result:', result);
        }
      });
    };
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  
  return <div id="hibd-widget" ref={widgetRef} />;
}

Vue Integration

<template>
  <div id="hibd-widget"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://haveibeendrained.org/widget.js';
    script.onload = () => {
      window.HIBDWidget.init({
        containerId: 'hibd-widget',
        theme: 'light'
      });
    };
    document.body.appendChild(script);
  }
}
</script>

WordPress Integration

Add to your theme’s functions.php:

function enqueue_hibd_widget() {
    wp_enqueue_script(
        'hibd-widget',
        'https://haveibeendrained.org/widget.js',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_hibd_widget');

Add to your template:

<div id="hibd-widget"></div>
<script>
  HIBDWidget.init({
    containerId: 'hibd-widget'
  });
</script>

Advanced Usage

Multiple Widgets

You can have multiple widgets on the same page:

<div id="widget-1"></div>
<div id="widget-2"></div>

<script>
  HIBDWidget.init({
    containerId: 'widget-1',
    theme: 'light'
  });
  
  HIBDWidget.init({
    containerId: 'widget-2',
    theme: 'dark'
  });
</script>

Custom API Endpoint

Use a custom API endpoint (for development):

HIBDWidget.init({
  containerId: 'hibd-widget',
  apiUrl: 'http://localhost:3001'  // Development API
});

Troubleshooting

Widget not loading

Styling issues

Check CSS class names
Verify container ID is correct
Ensure no conflicting styles
Try different theme option

API errors

Verify API URL is correct
Check network connectivity
Review browser console for errors
Test API endpoint directly

Best Practices

Load script asynchronously - Don’t block page load
Handle errors gracefully - Show user-friendly messages
Respect user privacy - Don’t track addresses
Customize styling - Match your site’s design
Test thoroughly - Test on different browsers

Getting started

Integration

API Reference

Overview

Installation

Basic Setup

Configuration Options

Basic Configuration

Advanced Configuration

Configuration Reference

Callback Function

Widget States

Styling

Custom Container Styling

Examples

React Integration

Vue Integration

WordPress Integration

Advanced Usage

Multiple Widgets

Custom API Endpoint

Troubleshooting

Best Practices

Support

API Documentation

Contact Support

​Overview

​Installation

​Basic Setup

​Configuration Options

​Basic Configuration

​Advanced Configuration

​Configuration Reference

​Callback Function

​Widget States

​Styling

​Custom Container Styling

​Examples

​React Integration

​Vue Integration

​WordPress Integration

​Advanced Usage

​Multiple Widgets

​Custom API Endpoint

​Troubleshooting

​Best Practices

​Support

API Documentation

Contact Support

Overview

Installation

Basic Setup

Configuration Options

Basic Configuration

Advanced Configuration

Configuration Reference

Callback Function

Widget States

Styling

Custom Container Styling

Examples

React Integration

Vue Integration

WordPress Integration

Advanced Usage

Multiple Widgets

Custom API Endpoint

Troubleshooting

Best Practices

Support