Implementation guide
Iframe setup, React component, and common patterns.
Basic iframe
<iframe
src="https://www.solscanner.app/scanner/TOKEN_MINT/map?embed=1&key=YOUR_API_KEY"
width="100%"
height="600"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="border: none; border-radius: 12px;"
></iframe>Replace TOKEN_MINT and YOUR_API_KEY. Host is https://www.solscanner.app (the apex solscanner.app redirects to www).
Required sandbox tokens
If your page applies a strict sandbox attribute, it must include at least:
| Token | Why |
|---|---|
allow-scripts | The map is client-rendered React — requires JS to run |
allow-same-origin | Needed to make same-origin API calls to api.solscanner.app |
allow-popups | Wallet explorer links (Solscan, Solana Explorer) open in new tabs |
allow-popups-to-escape-sandbox | So the explorer link lands on the real Solscan, not a sandboxed child |
React component
function SolScannerEmbed({
mint,
apiKey,
mode,
height = 600,
className,
}: {
mint: string;
apiKey: string;
mode?: "holders" | "traders" | "quick" | "deep" | "max";
height?: number | string;
className?: string;
}) {
const modeParam = mode ? `&${mode}` : "";
const src = `https://www.solscanner.app/scanner/${mint}/map?embed=1&key=${apiKey}${modeParam}`;
return (
<iframe
src={src}
width="100%"
height={height}
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
className={className}
style={{ border: "none", borderRadius: 12 }}
/>
);
}<SolScannerEmbed
mint="So11111111111111111111111111111111111111112"
apiKey="emb_your_key_here"
mode="holders"
/>Wallet scans
Use a wallet address instead of a token mint. Depth is optional — if omitted, the embed runs a quick scan (same as passing &quick).
<iframe
src="https://www.solscanner.app/scanner/WALLET_ADDRESS/map?embed=1&key=YOUR_KEY&deep"
width="100%" height="600"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
style="border: none;"
></iframe>| Param | Speed | What you get |
|---|---|---|
quick (default) | Fast | Basic connections |
deep | Medium | Full graph |
max | Slow | Maximum depth |
Switching tokens dynamically
Update the iframe src to load a different address without reloading the page:
function loadToken(mint) {
document.getElementById("solscanner-embed").src =
`https://www.solscanner.app/scanner/${mint}/map?embed=1&key=${API_KEY}`;
}Responsive sizing
For fluid layouts, use the aspect-ratio trick:
<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.solscanner.app/scanner/TOKEN/map?embed=1&key=KEY"
style="position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
></iframe>
</div>CSP headers
If your site uses Content-Security-Policy, allow our host. Include both the apex and www so clients following the redirect still pass:
Content-Security-Policy: frame-src 'self' https://www.solscanner.app https://solscanner.app;What's included
The embed has the full interactive map: zoom, pan, drag nodes, hover tooltips, click-to-expand wallet details, cluster sidebar, filter panel, directional arrows, and rescan (30s cooldown).
It does not include SolScanner navigation, login prompts, or credit purchase UI.