EMBEDDABLE SELF-CUSTODY DOCUMENTATION

Ship a wallet experience that feels native to your site.

HazeWallet gives websites and web apps a sleek self-custody wallet with one script tag, optional theming, a built-in launcher pill, a JavaScript API, and an optional buy flow for funding the wallet.

Quick promise

No HazeWallet signup required
Users keep their own keys
Theme it to match your brand
Launch with the default pill or your own button

Quick start

Drop in the script, optionally set a few theme variables, and HazeWallet is live.

<script src="https://hazewallet.com/embed.js?v=23" async defer></script>

That single script mounts the HazeWallet pill launcher automatically and exposes window.HazeWallet.open() / close() for custom integrations.

Embed script options

Configure the launcher label and open behavior before the script loads.

<script src="https://hazewallet.com/embed.js?v=23"
  data-position="right"
  data-label="HazeWallet"
  data-accent="#2ecfff"
  data-accent-deep="#7750ff"
  data-bg="#07112b"
  data-radius="18px"
  async defer></script>

Behavior

Choose right, left, top, or bottom. HazeWallet stays a compact vertical wallet panel while the host page remains visible behind it.

Theming

Use the script attributes generated by the Add Widget page, or CSS variables if you prefer to theme manually.

:root {
  --haze-accent: #2ecfff;
  --haze-accent-deep: #7750ff;
  --haze-bg: #07112b;
  --haze-radius: 18px;
}

Accent

Primary brand color used in buttons, highlights, and selection states.

Accent deep

Secondary gradient color that gives the wallet the HazeWallet glow.

Radius

Controls the roundness of the pill launcher and wallet surfaces.

Pill launcher

The default launcher is designed to feel polished, obvious, and clickable.

Default experience

HazeWallet automatically injects the launcher into the page so the wallet is immediately usable with no extra work.

<!-- Prefer your own custom CTA? -->
<button id="wallet-button">Open Wallet</button>
<script>
document.getElementById("wallet-button")
  .addEventListener("click", () => window.HazeWallet.open());
</script>

JavaScript API

Control the embedded wallet programmatically from your own site or app.

window.HazeWallet.open();

window.HazeWallet.close();

You can pair these with your own onboarding, purchase button, nav item, or floating action button.

Wallet flows

HazeWallet is built around practical self-custody flows that are simple for users and clear for builders.

Create

Users can generate a new wallet directly in the browser and encrypt it locally with a password.

Import

Existing users can paste a WIF and save it into the browser vault without sending private keys to a server.

Receive

The wallet shows a receive address and QR code for funding.

Send

Transactions are signed locally and broadcast through the configured node.

Buy workflow

The wallet includes a built-in buy view so users can request a quote and move into a provider checkout flow.

How it works

The user chooses a fiat currency and amount, confirms the destination address, and HazeWallet requests an estimate from the configured on-ramp relay.

Important trust model

HazeWallet remains self-custodial. The payment and identity checks belong to the external provider.

FAQ

Short answers to the questions builders usually ask first.

HazeWallet is blank or blocked when embedded on my website

If the HazeWallet widget appears blank, shows a browser "blocked" message, or simply never appears, the cause is almost always your website's headers — a Content-Security-Policy (CSP) and/or X-Frame-Options — not HazeWallet. A browser can only load one site inside an iframe on another site if the host page's CSP allows it. HazeWallet itself sends permissive embedding headers, so the rule you need lives on your domain.

1) Allow HazeWallet in your page's `frame-src`

This is what lets your site embed the widget:

frame-src 'self' https://hazewallet.com https://www.hazewallet.com;

2) If HazeWallet opens one of your pages, allow that page to be framed

When the wallet flow shows one of your own pages inside the widget (for example a payment or checkout page), that page must permit itself and HazeWallet in frame-ancestors:

frame-ancestors 'self' https://hazewallet.com https://www.hazewallet.com;

Do not keep frame-ancestors 'none'. It means "never allow framing." A browser drops the whole frame-ancestors directive if 'none' is present, so it must be removed — not combined with allowed domains.

Do not set X-Frame-Options: DENY on pages that must open inside the wallet — it blocks iframe embedding entirely. Remove it (or don't send it) for those pages.

Why you may also need `'self'`

If your site opens a page of its own in an iframe, and that page embeds HazeWallet, then both frame-src and frame-ancestors should include 'self' as well.

Example CSP — merge, don't replace

Merge these directives into your existing CSP rather than blindly overwriting the security settings you already rely on.

default-src 'self';
script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src https://fonts.gstatic.com;
img-src 'self' data:;
connect-src 'self' https://cloudflareinsights.com;
object-src 'none';
base-uri 'self';
form-action 'self';
frame-src 'self' https://hazewallet.com https://www.hazewallet.com;
frame-ancestors 'self' https://hazewallet.com https://www.hazewallet.com;
upgrade-insecure-requests

If you use Cloudflare

Open your Cloudflare dashboard and select your domain.
Go to Rules → Transform Rules → Response Header Transform Rules.
Create or edit a rule that matches the page(s) that host the widget.
Set the Content-Security-Policy header to your merged value above.
If X-Frame-Options is set to DENY, remove that header for those pages.

Scope the rule to only the pages that embed HazeWallet so you don't loosen security on the rest of your site.

Verify your headers (Windows PowerShell)

curl.exe -sI https://YOURDOMAIN.COM/ | findstr /I "content-security-policy x-frame-options"

Confirm the returned Content-Security-Policy contains the frame-src / frame-ancestors entries above, and that X-Frame-Options: DENY is not being sent on the pages that must be framed.

A HazeWallet error page, a 502, or a broadcast/API failure is a separate issue and should not be treated as a CSP/embedding problem.

Do site owners have to sign up with HazeWallet?

No. The core value proposition is that builders can add the widget without a HazeWallet signup or partner dashboard.

Does HazeWallet hold user funds or private keys?

No. The wallet is self-custodial and the private key stays on the user's device.

Can I brand the wallet to fit my site?

Yes. Use the theme variables to control accents, background tone, and border radius so the pill launcher and wallet feel native.

Can I open the wallet from my own buttons?

Yes. Call window.HazeWallet.open() from any interaction in your interface.