Installation

💡

Try it out: Use the Embed Playground to configure the widget visually, preview it in real-time, and generate ready-to-use code.

This guide covers installing the Passport Embed package and rendering the widget in your React application.

Prerequisites

Before installing, make sure you have:

A React application (v18+)
Your Embed API key and Scorer ID from the Developer Portal

If you don’t have credentials yet, follow the getting access guide to generate them.

Install the Package

Add the Passport Embed package to your project:


npm install @human.tech/passport-embed@latest


yarn add @human.tech/passport-embed@latest

Basic Setup

Import and render the PassportScoreWidget component:


import { PassportScoreWidget, DarkTheme } from "@human.tech/passport-embed";
 
const EMBED_API_KEY = "<YOUR_EMBED_API_KEY>";
const SCORER_ID = "<YOUR_SCORER_ID>";
 
function MyPage() {
  // Your wallet connection logic provides userAddress
  const userAddress = "0x...";
 
  const signMessage = async (message: string): Promise<string> => {
    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
    return await window.ethereum.request({
      method: "personal_sign",
      params: [message, accounts[0]]
    });
  };
 
  return (
    <PassportScoreWidget
      apiKey={EMBED_API_KEY}
      scorerId={SCORER_ID}
      address={userAddress}
      generateSignatureCallback={signMessage}
      theme={DarkTheme}
    />
  );
}

Required Props

Prop	Description
`apiKey`	Your Embed API key from the Developer Portal
`scorerId`	Your Scorer ID from the Developer Portal
`generateSignatureCallback`	Function to sign messages for OAuth-based stamps (see example above)

Optional Props

Prop	Description
`address`	User’s wallet address (if already known)
`connectWalletCallback`	Function to prompt wallet connection if address isn’t provided
`theme`	`DarkTheme` or `LightTheme` (defaults to `DarkTheme`)
`collapseMode`	`"shift"`, `"overlay"`, or `"off"`

For the complete props reference, see the Component Reference.

Next Steps

Pulling user data — Retrieve scores and stamps from your application
Customization — Theme and style the widget
Component Reference — Full props and hooks documentation

Try Before You Code

Use the Embed Playground to configure your widget visually and generate ready-to-use code for your project.