The Problem
You built something useful. A blog post, a tool, an open source project. People say "thanks" but you have no way to accept a tip. Setting up a payment processor means merchant accounts, KYC, minimum payouts. For a tip jar, that's absurd.
Lightning fixes this. And Alby's simple-boost web component makes it a single HTML tag.
What You Get
A button on your page. When someone clicks it, their browser wallet (Alby, any WebLN-compatible extension) opens a payment prompt. They confirm, sats move from their wallet to yours. No accounts, no middleware, no backend.
Step 1: Get a Lightning Address
You need a Lightning address to receive payments. It looks like an email address: you@getalby.com or you@yourdomain.com.
Options:
- Alby Hub — self-hosted, gives you
you@getalby.com - LNbits — set up LNURL-pay for any wallet
- satoshis.lol — NIP-05 + Lightning address, 100 sats
Step 2: Add the Component
Two lines. The script tag loads the web component. The <simple-boost> tag renders the button.
<script type="module" src="https://esm.sh/simple-boost@3.1.1"></script>
<simple-boost
address="max@klabo.world"
amount="100"
currency="sats">
Tip 100 sats ⚡
</simple-boost>That's it. Drop these two lines anywhere in your HTML. The component handles the payment flow, QR code generation, and confirmation.
Step 3: Customize
The component supports several attributes:
| Attribute | What it does | Example |
|---|---|---|
address | Your Lightning address | max@klabo.world |
amount | Default tip amount | 100 |
currency | Currency unit | sats, usd, eur |
nwc | NWC connection string (invoice creation) | See below |
For styling, simple-boost ships with built-in themes:
<!-- Try different themes -->
<simple-boost address="max@klabo.world" amount="21" currency="sats" class="alby">
Boost ⚡
</simple-boost>Available themes: alby, hey, figma, next, bootstrap, gumroad, spotify (and -filled variants).
Alternative: NWC Instead of a Lightning Address
Instead of a Lightning address, you can provide an NWC (Nostr Wallet Connect) connection string. The component uses NWC to create invoices that visitors pay — it's an alternative way to receive tips if you don't have a Lightning address set up.
Important: Use address OR nwc, not both. They are mutually exclusive. If you provide both, NWC takes priority.
<simple-boost
amount="21"
currency="sats"
nwc="nostr+walletconnect://pubkey?relay=wss://relay.getalby.com&secret=...">
Tip 21 sats
</simple-boost>make_invoice and lookup_invoice permissions. Do not grant pay_invoice or send_payment — the component only needs to create and check invoices, never send funds.React / Next.js
simple-boost works as a React component too:
npm install simple-boost @lit/reactimport { SimpleBoostButton } from 'simple-boost/react';
function TipJar() {
return (
<SimpleBoostButton
address="max@klabo.world"
amount={100}
currency="sats"
>
Support this project
</SimpleBoostButton>
);
}For Next.js 13+ App Router, add 'use client' at the top of the component file.
Where to Put It
Some ideas that work well:
- End of blog posts — readers who found value will tip
- README files — GitHub renders custom elements (with a fallback link)
- Documentation sites — if your docs saved someone hours, 100 sats is nothing
- Tool pages — free tools with an optional tip button
How I Use It
Every article on this site now has a tip button at the bottom. It took 5 minutes to add across all posts. The component loads from a CDN, so there's no build step, no npm install, no bundling.
My Lightning address (max@klabo.world) connects to an LNbits wallet. Tips arrive instantly. I can see them in real time.
Resources
- simple-boost on GitHub — source code and docs
- Live demo — try the button, see themes
- Alby Developer Guide — NWC, WebLN, and more
- Building a Lightning Service with NWC — if you want a full backend
The simplest way to accept Bitcoin on the web. No accounts, no fees, no friction.