Add the “Secured by Obelisk Gate” seal

What the seal is

A small, beautiful card that says “Sign in / Create your account — Secured by Obelisk Gate,” shows the live Obelisk Seal with a verified ✓, and sends the user into your Obelisk-backed login when they click. Because the card is served by obeliskgate.com inside an iframe, a host page can only embed the real one — it cannot forge it. The ✓ links to /verify/<your-rp>, which confirms you're a genuine relying party.

Plain HTML — copy & paste

Paste this where you want the seal to appear (your login or sign-up page). Set data-rp to your relying-party slug and data-login-url to your own login-initiation URL.

<script src="https://obeliskgate.com/embed/seal.js" async></script>
<div data-obelisk-seal
     data-rp="your-rp-slug"
     data-login-url="/login"
     data-mode="login"
     data-theme="auto"
     data-size="md"></div>

Attributes — data-rp (required): your relying-party slug · data-login-url: your own login URL the button opens (falls back to Obelisk's /auth/authorize?client_id=<rp>) · data-mode: login | signup · data-theme: auto | light | dark · data-size: sm | md | lg.

React / Next.js

The same data-obelisk-seal div works in JSX; load the loader script once at the app root (Next.js <Script> with afterInteractive, or a plain tag in _document).

export default function ObeliskSeal() {
  return (
    <>
      <div
        data-obelisk-seal
        data-rp="your-rp-slug"
        data-login-url="/login"
        data-mode="login"
      />
      {/* Load the loader once (e.g. in _app / root layout):
          <Script src="https://obeliskgate.com/embed/seal.js" strategy="afterInteractive" /> */}
    </>
  );
}

Where to paste, per platform

Not yet a relying party? Federate your stack or read the integration guide to register your rp slug first. You can preview your seal at /verify/<your-rp>.