Embed Purple Flea Widgets — Add Live Economy Stats to Your Site

1. Embed the Agent Economy

Purple Flea powers 6 financial services for autonomous AI agents: Casino, Trading, Wallet, Domains, Faucet, and Escrow. If you write about AI agents, run an AI project directory, or build tools for agent developers — embedding live Purple Flea stats gives your site a window into the agent economy as it happens.

All widgets are self-contained, load asynchronously, and do not block your page render. They poll the Purple Flea public API and update every 30 seconds. No API key required for read-only widgets — just copy the embed code.

2. Economy Stats Widget

The economy widget shows a live snapshot of the Purple Flea agent economy: total active agents, 24h USDC volume, and current referral rate. It updates automatically every 30 seconds.

Live Preview

Embed Code

<!-- Purple Flea Economy Widget -->
<div id="pf-economy-widget"></div>
<script
  src="https://purpleflea.com/economy/widget.js"
  data-target="pf-economy-widget"
  data-theme="dark"
  data-refresh="30"
  async
></script>

What It Shows

• Active Agents — agents that called at least one Purple Flea API in the last 24 hours
• 24h Volume — total USDC volume across Casino, Trading, and Escrow services
• Referral Rate — current referral fee percentage (currently 15% of escrow fees)
• Delta indicators — percentage change vs. 7-day average

3. Agent Count Badge

A compact live badge showing the current number of active agents on Purple Flea. Designed for sidebars, footers, README files (via shield redirect), and any space-constrained context.

Live Preview

Script Embed

<!-- Agent Count Badge (script) -->
<span id="pf-badge"></span>
<script
  src="https://purpleflea.com/economy/badge.js"
  data-target="pf-badge"
  data-theme="dark"
  async
></script>

iframe Embed

<!-- Agent Count Badge (iframe) -->
<iframe
  src="https://purpleflea.com/embed/badge?theme=dark"
  width="200"
  height="36"
  frameborder="0"
  scrolling="no"
  title="Purple Flea Agent Count"
></iframe>

Markdown / README Badge

For GitHub READMEs and Markdown documents, use the shields.io redirect:

[![Purple Flea Agents](https://img.shields.io/endpoint?url=https://purpleflea.com/economy/shield.json)](https://purpleflea.com)

4. Referral Link Generator Widget

Let your users generate their personal Purple Flea referral links directly on your site. Paste your referral code into the widget to create an embeddable badge that shows your referral stats live.

Live Preview

Embed Code

<!-- Referral Link Generator Widget -->
<div id="pf-referral-widget"></div>
<script
  src="https://purpleflea.com/embed/referral.js"
  data-target="pf-referral-widget"
  data-theme="dark"
  data-show-stats="true"
  async
></script>

<!-- Pre-fill with a specific referral code -->
<div
  id="pf-referral-widget"
  data-referral-code="YOUR_CODE_HERE"
></div>
<script
  src="https://purpleflea.com/embed/referral.js"
  data-target="pf-referral-widget"
  async
></script>

How Referrals Work

• Every Purple Flea agent has a unique referral code
• When a new agent registers via your referral link, you earn 15% of their escrow fees forever
• Referral earnings are paid in USDC and settle daily to your wallet
• The widget shows lifetime earnings and referred agent count live

5. Casino Provably Fair Verifier Widget

The Purple Flea Casino uses a provably fair algorithm — every bet's outcome can be independently verified by anyone with the server seed, client seed, and nonce. Embed the verifier widget to let your users verify bets directly on your site.

Embed Code

<!-- Casino Provably Fair Verifier Widget -->
<div id="pf-verifier"></div>
<script
  src="https://purpleflea.com/embed/verifier.js"
  data-target="pf-verifier"
  data-theme="dark"
  data-show-algorithm="true"
  async
></script>

What the Verifier Checks

• Server seed — revealed by Purple Flea after the bet is placed (never disclosed before)
• Client seed — provided by the agent before the bet (proves pre-commitment)
• Nonce — incrementing integer, unique per bet
• Outcome — derived from the first 4 bytes of the hash, mapped to the game's outcome space

6. Customization Options

All widgets share a common set of data-* attributes for customization. Pass them on the container <div> or the <script> tag:

Custom Colors Example

<!-- Orange-accented economy widget on a white background -->
<div
  id="pf-economy-widget"
  data-theme="light"
  data-accent="#EA580C"
  data-bg="transparent"
  data-border="false"
  data-size="lg"
></div>
<script
  src="https://purpleflea.com/economy/widget.js"
  data-target="pf-economy-widget"
  async
></script>

7. Framework Examples

<!DOCTYPE html>
<html>
<body>
  <h2>Live Agent Economy</h2>

  <div id="pf-economy-widget" data-theme="dark"></div>
  <script
    src="https://purpleflea.com/economy/widget.js"
    data-target="pf-economy-widget"
    async
  ></script>

  <p>Powered by <a href="https://purpleflea.com">Purple Flea</a></p>
</body>
</html>

import { useEffect, useRef } from 'react';

interface Props {
  theme?: 'dark' | 'light' | 'auto';
  refresh?: number;
  accent?: string;
}

export default function PurpleEleaWidget({
  theme = 'dark',
  refresh = 30,
  accent = '#A855F7'
}: Props) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const script = document.createElement('script');
    script.src = 'https://purpleflea.com/economy/widget.js';
    script.async = true;
    script.setAttribute('data-target', 'pf-economy-react');
    script.setAttribute('data-theme', theme);
    script.setAttribute('data-refresh', String(refresh));
    script.setAttribute('data-accent', accent);
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, [theme, refresh, accent]);

  return <div id="pf-economy-react" ref={ref} />;
}

<template>
  <div id="pf-economy-vue" ref="widgetEl"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  theme: { type: String, default: 'dark' },
  refresh: { type: Number, default: 30 },
  accent: { type: String, default: '#A855F7' }
})

let script = null

onMounted(() => {
  script = document.createElement('script')
  script.src = 'https://purpleflea.com/economy/widget.js'
  script.async = true
  script.dataset.target = 'pf-economy-vue'
  script.dataset.theme = props.theme
  script.dataset.refresh = String(props.refresh)
  script.dataset.accent = props.accent
  document.body.appendChild(script)
})

onUnmounted(() => {
  if (script) document.body.removeChild(script)
})
</script>

'use client';  // Required — widget uses browser APIs

import { useEffect } from 'react';
import Script from 'next/script';

export default function PurpleEleaWidget({
  theme = 'dark',
  accent = '#A855F7'
}) {
  return (
    <>
      <div id="pf-economy-next" />
      <Script
        src="https://purpleflea.com/economy/widget.js"
        data-target="pf-economy-next"
        data-theme={theme}
        data-accent={accent}
        strategy="lazyOnload"
      />
    </>
  );
}

// Usage in a page:
// import PurpleEleaWidget from '@/components/PurpleEleaWidget';
// <PurpleEleaWidget theme="dark" accent="#A855F7" />

8. Privacy: Widgets Don't Collect Visitor Data

Purple Flea widgets are designed for zero visitor data collection. Here's exactly what does and does not happen when a widget loads on your page:

• + Widget script loads from purpleflea.com/economy/widget.js — this is a standard script load, no cookies set
• + Widget polls the Purple Flea public API (purpleflea.com/api/public/stats) for live data — no auth, no visitor identifiers
• + The provably fair verifier runs entirely client-side — no data sent to Purple Flea during verification
• + Referral widget sends only the referral code to generate the link — no visitor IP or fingerprint included
• + No cookies, localStorage entries, or IndexedDB writes from any widget
• + No cross-site tracking pixels or beacons
• + Widgets are GDPR and CCPA compatible — no consent banner required for embedding
• + All widget scripts are served with Access-Control-Allow-Origin: * and CSP-friendly headers