Add a Lightning Boost Button to Any Website

What Is a Boost Button?

A boost button lets visitors send sats to a creator directly from a web page. Press and hold to charge up — the longer you hold, the more sats. Release to pay. It's the Lightning equivalent of a tip jar, but interactive and fun.

The Lightning Boost Widget makes this a one-line embed. No build step, no React, no npm. Just add a script tag and a data attribute.

Quick Start

Add this to any HTML page:

<div data-boost data-ln-address="you@getalby.com"></div>
<script src="https://boost.maximumsats.com/boost-widget.js"></script>

That's it. The widget renders a button, handles the press-and-hold interaction, fetches a Lightning invoice from the recipient's Lightning Address, and pays it through the visitor's WebLN wallet (Alby, Zeus, etc.).

How It Works

The widget follows this flow:

1. User presses and holds the button. A counter ticks up (1 sat per 200ms by default) and a fill bar shows progress.
2. User releases. The widget calls window.webln.enable() to connect to their wallet.
3. Invoice request. For Lightning Address recipients, the widget fetches /.well-known/lnurlp/, calls the callback with the amount in millisats, and gets an invoice.
4. Payment. The invoice is paid via webln.sendPayment(). The button turns green on success.

For keysend recipients, step 3 is skipped — the widget sends directly to the node pubkey via webln.keysend().

Configuration

All configuration is via HTML data attributes:

<div data-boost
     data-ln-address="hello@getalby.com"
     data-name="Alby"
     data-max="500"
     data-rate="100"
     data-start="1"></div>

Keysend Example

If you have a Lightning node pubkey instead of a Lightning Address, use keysend:

<div data-boost
     data-pubkey="030a58b8653d32b99200a2334cfe913e51dc7d155aa0116c176657a4f1722677a3"
     data-name="My Node"
     data-max="200"></div>
<script src="https://boost.maximumsats.com/boost-widget.js"></script>

Keysend sends directly to the node — no LNURL resolution needed.

Multiple Buttons

Add multiple boost buttons on the same page. Each operates independently:

<div data-boost data-ln-address="alice@getalby.com" data-name="Alice"></div>
<div data-boost data-ln-address="bob@getalby.com" data-name="Bob"></div>
<script src="https://boost.maximumsats.com/boost-widget.js"></script>

The script tag only needs to appear once.

Dynamic Initialization

If you add boost buttons after page load (e.g., in a single-page app), call LnBoost.init() to initialize new buttons:

// After adding new data-boost elements to the DOM
LnBoost.init();

Under the Hood

The widget is vanilla JavaScript, under 4KB. It injects its own styles (scoped with .ln-boost- prefixes), creates a button element inside each [data-boost] container, and handles all state internally. No global namespace pollution beyond window.LnBoost.

The LNURL-pay flow for Lightning Addresses:

1. Split the address: user@domain
2. Fetch https://domain/.well-known/lnurlp/user
3. Get the callback URL from the response
4. Call callback?amount=N where N is millisats
5. Extract the pr (payment request/invoice) from the response
6. Pay via webln.sendPayment(pr)

Source Code

The full source is on GitHub: joelklabo/lightning-boost-widget

The widget JS is served from a Cloudflare Worker with CORS headers, so any site can load it.

Resources

• Live Demo — try the press-and-hold interaction
• WebLN Docs — the browser API for Lightning wallets
• LNURL Spec — Lightning Address resolution protocol
• Alby Developer Guides — more Lightning integration tutorials