Engive GitHub Widget

A drop-in script tag that renders a beautiful GitHub stats card on any third-party site. No build step, no React, no dependencies.

Theme

<!-- Engive GitHub Widget: glass-dark -->
<script
  src="https://ankurhalder.com/widget/embed.js"
  data-username="ankurhalder"
  data-theme="glass-dark"
  data-engive-widget="loader"
  defer
></script>
<div class="engive-github-widget" data-widget="developer-card"></div>

How it works

The <script> tag loads /widget/embed.js (~35 KB raw, ~8 KB gzipped).
The script finds every host <div> with data-widget and calls fetch() against the matching endpoint:
- developer-card → /api/widget/ankurhalder/stats
- top-languages → /api/widget/ankurhalder/top-languages
- streak-stats → /api/widget/ankurhalder/streak
- repo-showcase → /api/widget/ankurhalder/repos
- contribution-graph → /api/widget/ankurhalder/contributions
The server returns a minified JSON payload (~200 B – 2 KB depending on the widget) with the widget's data.
The script renders the card DOM and applies the theme stylesheet.

The response is cached at the Vercel edge for 1 hour, so repeat visitors on the same site hit a CDN cache and never reach the server.

The widget set

Engive ships five widgets. Each is a separate data-widget value on its own host div, and each is rendered by the same embed.js bundle:

developer-card — avatar, name, bio, top 3 languages, total stars, total commits, current streak.
top-languages — horizontal bar of the top 6 languages by bytes, with hex-matched dots. Replaces github-readme-stats top-langs.
streak-stats — current streak, longest streak, total commits. Replaces streak-stats.demolab.com.
repo-showcase — horizontal scroller of the user's top repos by stars. Shows language, stars, forks, topics.
contribution-graph — 53-week contribution calendar with a streak header. Replaces github-readme-activity-graph.

You can mix and match — one script tag handles as many widgets as you put on the page:

<!-- Engive GitHub Widgets -->
<script
  src="https://ankurhalder.com/widget/embed.js"
  data-username="ankurhalder"
  data-theme="glass-dark"
  data-engive-widget="loader"
  defer
></script>

<div class="engive-github-widget" data-widget="developer-card"></div>
<div class="engive-github-widget" data-widget="top-languages"></div>
<div class="engive-github-widget" data-widget="streak-stats"></div>
<div class="engive-github-widget" data-widget="repo-showcase"></div>
<div class="engive-github-widget" data-widget="contribution-graph"></div>

Configuration

All configuration is via data-* attributes on the script tag, or custom values set in your dashboard:

Attribute	Default	Description
data-username	ankurhalder	GitHub username to display. Fully supports any synced user.
data-theme	glass-dark	One of `glass-dark`, `glass-light`, `aurora`. If you saved custom settings in the builder, they will be applied automatically instead.
data-engive-widget	—	Set to `loader` to mark the script as the authoritative loader.

Per-host overrides are also supported: a <div data-theme="aurora"> overrides the theme for that one card.

Theming & Customization

Built-in themes ship with the widgets:

glass-dark — default, matches the dark dashboard
glass-light — light variant, for white-background READMEs
aurora — animated gradient theme

To customize your cards visually without coding, sign in and navigate to the Widgets customizer in your dashboard. You can choose from presets like Neon, Dracula, and Light, customize background/border colors, radii, width, fonts, and toggles (e.g. brand footer).

Performance

Bundle: 35 KB raw (~8 KB gzipped) for all 5 widgets
Data: ~1 KB JSON per render
Cache: 1 hour at the Vercel edge (s-maxage=3600)
No cookies, no auth, no build step on third-party sites
Respects prefers-reduced-motion

Use it in your email signature

Most email clients don't execute <script> tags, so a live widget won't render. The fallback most developers use is a static screenshot of the card. We host a per-theme, per-username SVG that you can drop into any email signature:

email-signature.html

<!-- Engive GitHub Widget — static SVG for email signatures -->
<a href="https://github.com/ankurhalder"
   target="_blank"
   rel="noopener noreferrer">
  <img src="https://www.ankurhalder.com/api/widget/ankurhalder/stats.svg?theme=glass-dark"
       alt="Ankur Halder on GitHub"
       width="320"
       height="auto"
       style="display:block;border:0;outline:none;" />
</a>

Replace ankurhalder with your username and glass-dark with one of the supported themes. The endpoint returns an SVG that renders identically in Gmail, Outlook, Apple Mail, and most newsletter platforms.

Tip: if your email client strips remote images, host the SVG yourself by fetching the URL once and attaching the file to your signature template.

FAQ

Why does the response come from a different origin?

CORS is enabled (Access-Control-Allow-Origin: *) on the widget routes. The data is public so any site can embed it without a server-side proxy.

Can I embed my own GitHub stats?

Yes, any registered user can sync their data and embed widgets customized in their personal dashboard.

How do I remove the "Made with Engive" footer?

You can toggle the footer display in the widget customization settings under your dashboard.

What happens if the API is down?

The embed catches fetch errors and renders a friendly error card with the same theme. The third-party site stays up.