Skip to main content

​
Widgets Overview

React components for NEUS verification and access gating, plus a standalone script-tag embed for any site.

VerifyGate Component

Gate UI behind verification requirements.

ProofBadge Component

Display verification status by proof receipt ID.

Script Tag Embed

Add a “Verified by NEUS” badge to any page without a framework.

​
Script Tag (No Framework Required)

The fastest way to add a “Verified by NEUS” badge to any page: 
<script src="https://verify.neus.network/widget.js"></script>

<!-- Place this where you want the badge to appear -->
<div data-neus-proof="0xYOUR_PROOF_RECEIPT_ID"></div>
The widget auto-scans the page on load and renders a badge for each data-neus-proof element.

​
Data Attributes

AttributeRequiredDefaultDescription
data-neus-proofYes-Proof receipt identifier. In SDK flows, use proofId.
data-neus-api-urlNohttps://api.neus.networkOverride API base URL
data-neus-ui-baseNohttps://neus.networkOverride proof viewer base URL
data-neus-sizeNosmsm or md
data-neus-show-chainsNofalsetrue to show chain count

​
Manual API

<script src="https://verify.neus.network/widget.js"></script>
<script>
  // Mount a badge into a specific element
  NeusWidget.mount(document.getElementById('my-badge'), { proofId: '0xYOUR_PROOF_RECEIPT_ID' });

  // Re-scan a subtree (e.g. after dynamic content loads)
  NeusWidget.mountAll(document.querySelector('.content-area'));

  // Remove a badge
  NeusWidget.unmount(document.getElementById('my-badge'));
</script>

​
CSS Theming

The badge uses CSS variables so it inherits your site’s typography: 
:root {
  --neus-badge-bg:     rgba(148, 163, 184, 0.06);
  --neus-badge-border: rgba(148, 163, 184, 0.2);
  --neus-badge-text:   #94a3b8;
  --neus-badge-font:   inherit;
}
CORS: The widget fetches GET https://api.neus.network/api/v1/verification/status/:qHash with Access-Control-Allow-Origin: * - no CORS setup required.

​
React Install

npm install @neus/sdk react react-dom

​
VerifyGate

Gate UI behind verification requirements. 
import { VerifyGate } from '@neus/sdk/widgets';

export function Page() {
  return (
    <VerifyGate
      requiredVerifiers={['nft-ownership']}
      verifierData={{
        'nft-ownership': { contractAddress: '0x...', tokenId: '1', chainId: 8453 }
      }}
      appId="neus-network"
    >
      <div>Unlocked</div>
    </VerifyGate>
  );
}

​
Key Props

PropTypeDefaultDescription
requiredVerifiersstring[]['ownership-basic']Verifiers to check
verifierDataobject-Data keyed by verifier id
strategy'reuse-or-create' | 'reuse' | 'fresh''reuse-or-create'Proof strategy
proofOptions{ privacyLevel, publicDisplay, storeOriginalContent }privateProof options
mode'create' | 'access''create'Operation mode
proofIdstring-Required for mode="access"; same receipt ID appears as qHash on HTTP paths
maxProofAgeMsnumber-Max proof age for reuse checks
onError(error: Error) => void-Error callback
apiUrlstring-Custom API base URL
appIdstring-Public app attribution identifier
sponsorGrantstring-Sponsor JWT for sponsored proofs
hostedCheckoutUrlstring-Hosted verify page URL
  • Reuse without prompting can only see public + discoverable proofs
  • Reusing private proofs requires an owner signature
  • Interactive verifiers use NEUS hosted checkout automatically
<VerifyGate
  requiredVerifiers={['ownership-social']}
  appId="neus-network"
  sponsorGrant={sponsorGrantJwt}
  hostedCheckoutUrl="https://neus.network/verify"
>
  <button>Continue</button>
</VerifyGate>

​
ProofBadge

Display verification status by proof receipt ID (proofId in SDKs). 
import { ProofBadge } from '@neus/sdk/widgets';

<ProofBadge proofId="0x..." showChains />