DEV Community

linderroger-eng
linderroger-eng

Posted on

Embed Live Government Contracts & Financial Data on Any Website in 10 Lines of HTML

#webdev #api #opensource #javascript

Your website could be showing live government contract awards, SEC insider trades, and FDA alerts right now. Here's how in 10 lines of HTML.

No backend. No complex API wiring. No auth headaches. Just drop in a script tag and a div, and your site lights up with real, live government data — updated automatically.

Let me show you exactly how.

The 10-Line Embed

This is all it takes to get a live government contracts feed on any webpage:

<!DOCTYPE html>
<html>
<head><title>Live Gov Data</title></head>
<body>

  <!-- 1. Load the widget bundle -->
  <script src="https://data-widgets.onrender.com/widget.js"></script>

  <!-- 2. Drop a widget div anywhere -->
  <div
    data-widget="contracts"
    data-api-key="YOUR_KEY"
    data-theme="dark"
    data-limit="5"
  ></div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

That's it. The widget auto-initializes on page load, calls the government data API, and renders a styled feed right inside that div. No React. No build step. No npm install. Pure HTML.

What Data Do You Get?

There are 4 widget types, each pulling from a different live government or financial data source:

1. contracts — Live Government Contract Awards

Displays a real-time feed of federal contract awards from USASpending.gov. Each entry shows the awarding agency, recipient company, contract value, and award date. Perfect for competitive intelligence on government procurement activity.

<div data-widget="contracts" data-api-key="YOUR_KEY" data-limit="10"></div>
Enter fullscreen mode Exit fullscreen mode

Shows: Agency name, contractor, dollar amount, award date — refreshed daily from official federal data.

2. edgar — SEC Insider Trades

Streams Form 4 filings from the SEC EDGAR database — the insider buys and sells that executives are legally required to disclose. Know when C-suite insiders are loading up or dumping shares.

<div data-widget="edgar" data-api-key="YOUR_KEY" data-ticker="AAPL" data-limit="5"></div>
Enter fullscreen mode Exit fullscreen mode

Shows: Filer name, company ticker, trade type (buy/sell), shares, price, and filing date.

3. fda — FDA Device Recalls

Pulls active medical device recalls and safety alerts straight from the FDA's public enforcement database. Critical for pharma, medtech, and compliance-focused audiences.

<div data-widget="fda" data-api-key="YOUR_KEY" data-limit="5"></div>
Enter fullscreen mode Exit fullscreen mode

Shows: Device name, recalling firm, recall class (I/II/III), reason for recall, and status.

4. macro — US Macro Indicators

Displays key US macroeconomic indicators sourced from Federal Reserve (FRED) data: GDP growth rate, unemployment rate, CPI inflation, and more. Great for financial dashboards and economic research tools.

<div data-widget="macro" data-api-key="YOUR_KEY"></div>
Enter fullscreen mode Exit fullscreen mode

Shows: GDP, unemployment rate, inflation (CPI), latest values with period labels — all in a clean summary card.

How It Works Under the Hood

The system is architected for simplicity on your end:

  1. CDN-hosted vanilla JS — widget.js is a self-contained bundle hosted at https://data-widgets.onrender.com. No dependencies, no framework lock-in. It scans the DOM for data-widget attributes on page load.

  2. API calls to the bundle server — The script makes authenticated requests to https://api-bundle.onrender.com, which aggregates data from USASpending.gov, SEC EDGAR, FDA openFDA, and FRED APIs — handling rate limits, caching, and normalization so you don't have to.

  3. Auto-renders into your div — Fetched data is injected directly into the target div as styled HTML. The widget applies your chosen theme and respects the data-limit you set. No virtual DOM, no re-renders — just clean, readable markup.

  4. Your API key authenticates the request — Get a free key at RapidAPI to start pulling data immediately.

Architecture at a glance:

Your page → widget.js → api-bundle.onrender.com → [USASpending / EDGAR / FDA / FRED]
                              ↓
                      Normalized JSON
                              ↓
                      Rendered HTML → injected into your div
Enter fullscreen mode Exit fullscreen mode

Customization Options

Every widget supports these HTML data attributes — no JavaScript configuration required:

data-theme

  • "light" — White background, dark text (default)
  • "dark" — Dark background, light text — great for dashboards

data-limit

  • Integer: number of records to display (e.g., data-limit="5" or data-limit="20")
  • Default: 5

data-ticker (edgar widget only)

  • Filter SEC filings by stock ticker symbol
  • Example: data-ticker="MSFT" shows only Microsoft insider trades

data-api-key

  • Your RapidAPI key — required for all widgets

Example — dark-themed EDGAR widget for Tesla, 10 filings:

<div
  data-widget="edgar"
  data-api-key="YOUR_KEY"
  data-ticker="TSLA"
  data-theme="dark"
  data-limit="10"
></div>
Enter fullscreen mode Exit fullscreen mode

Real-World Use Cases

🏛️ Government Contractor Tracking Site

Building a site that helps businesses find government contracting opportunities? Embed the contracts widget to surface the most recent federal awards in your niche. Filter by agency or keyword server-side, then let the widget handle the display.

📊 Financial News Dashboard

Running a stock-focused blog or fintech app? Add the edgar widget to any company profile page. Readers get live insider trading disclosures right alongside your analysis — no scraping required.

💊 Pharma Compliance Portal

Medical device companies, distributors, and hospital procurement teams all need to track FDA recalls. The fda widget makes it trivial to surface active alerts on any internal portal, giving your compliance team a live feed they can actually use.

📈 Economic Research Blog

Want to anchor your macro commentary in live data? Drop the macro widget in your sidebar or below your articles. Readers see current GDP, unemployment, and inflation numbers automatically — no more manually updating static charts.

Pricing

Tier Requests/month Use Case
Free Up to 500 calls Prototypes, personal projects, testing
Basic 10,000 calls Small production sites, blogs
Pro 100,000+ calls Production apps, dashboards, SaaS tools

Start free — no credit card required. Upgrade when you need volume. All tiers include access to all 4 widget types.

Getting Started

  1. Get your free API key → Go to https://rapidapi.com/search/government and subscribe to the Government Data Bundle API (free tier available)

  2. Copy the script tag → Add this to your HTML <head> or before </body>:

   <script src="https://data-widgets.onrender.com/widget.js"></script>
Enter fullscreen mode Exit fullscreen mode
  1. Add a widget div → Place this wherever you want the data to appear: 
   <div data-widget="contracts" data-api-key="YOUR_KEY" data-limit="5"></div>
Enter fullscreen mode Exit fullscreen mode

  1. Choose your widget type → Swap contracts for edgar, fda, or macro depending on your use case

  2. Customize the look → Add data-theme="dark" for dark mode, adjust data-limit for more or fewer records

  3. Deploy and done → No build step, no server changes — just push your updated HTML and the widget runs

Why This Approach?

Government APIs are notoriously painful to work with — inconsistent response formats, rate limits, authentication quirks, and documentation that was last updated in 2014. The bundle API abstracts all of that away.

You get:

  • ✅ A single consistent API key across all data sources
  • ✅ Pre-normalized, display-ready data
  • ✅ Handled rate limiting and caching
  • ✅ A vanilla JS widget that works in any HTML page — React, Vue, plain HTML, WordPress, whatever
  • ✅ Free tier to start without a credit card

The whole point is that adding live government data to your project shouldn't require a week of API research. It should take 10 minutes.

Try It Now

Get your free API key at https://rapidapi.com/search/government and have live data rendering in your next project today.

All 4 widget types — contracts, edgar, fda, macro — are available on the free tier. No credit card required to start.

Drop a comment below if you build something with it — would love to see what people create with live government data.

Top comments (0)