sdk/badge.js

Badge SDK

A lightweight, embeddable attribution badge for client applications. One script tag. Automatic light & dark mode. Shadow DOM isolated.

Choose Your Variant

Three versions tailored to each engagement tier. Pick the one that matches your relationship.

Advisor
Light
Business application development & strategy entrusted to 22nd Ventures
Dark
Business application development & strategy entrusted to 22nd Ventures
Advisor — Snippet
<twentysecond-badge tier="advisor"></twentysecond-badge>
Operator
Light
Business application development & strategy served by 22nd Ventures
Dark
Business application development & strategy served by 22nd Ventures
Operator — Snippet
<twentysecond-badge tier="operator"></twentysecond-badge>
Partner
Light
Business application development & strategy in partnership with 22nd Ventures
Dark
Business application development & strategy in partnership with 22nd Ventures
Partner — Snippet
<twentysecond-badge tier="partner"></twentysecond-badge>

Shadow DOM

Fully isolated styles. Will never conflict with your application's CSS.

Auto Theme

Follows prefers-color-scheme by default, or pin to light/dark manually.

Zero Dependencies

One script tag, one custom element. Under 3KB. No build step required.

Installation

Add the script tag once, then place the badge element wherever you want it. Swap the tier attribute to match your engagement.

HTML
<!-- Add before </body> -->
<script src="https://22ndventures.com/sdk/badge.js" defer></script>
<twentysecond-badge tier="operator"></twentysecond-badge>
Next.js
// app/layout.tsx
import Script from "next/script";

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* 22nd Ventures Badge */}
        <Script src="https://22ndventures.com/sdk/badge.js" strategy="lazyOnload" />
        <twentysecond-badge tier="operator" />
      </body>
    </html>
  );
}
React
// In your root component or layout
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://22ndventures.com/sdk/badge.js";
    script.defer = true;
    document.body.appendChild(script);
  }, []);

  return (
    <div>
      {/* Your app content */}
      <twentysecond-badge tier="operator" />
    </div>
  );
}

Theme Override

The badge follows your user's system preference by default. Pin it to a specific theme with the theme attribute.

Auto (default)
<twentysecond-badge tier="operator"></twentysecond-badge>
Force Light
<twentysecond-badge tier="operator" theme="light"></twentysecond-badge>
Force Dark
<twentysecond-badge tier="operator" theme="dark"></twentysecond-badge>

Specs

~3KB

Size

Zero

Dependencies

Shadow DOM

Isolation

All modern browsers

Compatibility

Questions about integration? Get in touch