HazeWallet
Copy embed code
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
01

Quick start

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

<script src="https://hazewallet.com/embed.js?v=commerce-097" async defer></script>
That single script mounts the HazeWallet pill launcher automatically and exposes window.HazeWallet.open() / close() for custom integrations.
02

Embed script options

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

<script src="https://hazewallet.com/embed.js?v=commerce-097"
  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.

03

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.

04

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>
05

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.
06

Wallet flows

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

Create

Choose a password with at least 12 characters, download an encrypted backup file, and confirm you have saved it before opening your wallet.

Import

Restore an encrypted HazeWallet backup with its password, or import a supported WIF private key. Your file and key stay on this device. Seed phrases are not supported.

Receive

Choose a coin to see its address, network, and QR code. You can optionally request an amount. Only send the named coin on its native network.

Send

Review the full destination, amount, network fee, and total. Confirm with your password, then the wallet signs locally and submits through the relay.

07

Buy workflow

When Guardarian is configured for a supported asset, users can request a quote and open its checkout. Otherwise, the wallet offers a clear Receive alternative.

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.

FREE

Your brand, no upgrade fee

Customize the wallet name, logo, background image, colors and launcher in Add Widget. Preview the result and copy your snippet—no payment or account required.

Choose PNG, JPG or WebP files for local resizing, or use public HTTPS image URLs. Selected files are included in the snippet. Remote images are loaded by the visitor’s browser, so their image host receives the request. To avoid remote image requests, choose files instead.

Update your installed snippet when you change branding. Previously activated custom logos remain supported. Network fees and purchase-provider fees still apply where relevant; customization is free.

08

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

  1. Open your Cloudflare dashboard and select your domain.
  2. Go to Rules → Transform Rules → Response Header Transform Rules.
  3. Create or edit a rule that matches the page(s) that host the widget.
  4. Set the Content-Security-Policy header to your merged value above.
  5. 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.

How do I back up and recover my wallet?

Download an encrypted backup in Settings and keep the password separately. Use “Check a backup file” to verify recovery without replacing your wallet. On a new browser, choose “I already have a wallet,” select your backup, and enter its password. Haze does not use a seed phrase and cannot reset a forgotten password.

Why does my wallet lock when I refresh?

Unlocked private keys are held only in memory. Refreshing, closing the tab, or five minutes without wallet interaction requires your password again. Your encrypted wallet remains stored in this browser.

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.