Quick Start

Add CKB micropayments to any website in under 2 minutes. One script tag — that's the entire integration.

Installation

Paste this single script tag before the closing </body> on your website:

<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_CKB_ADDRESS_HERE"
></script>

Replace YOUR_CKB_ADDRESS_HERE with your actual CKB wallet address:

💡 No API key needed. Just paste the script and you're live. The widget works with any static HTML page.

Test Locally

Create a file called test.html and open it in your browser:

<!DOCTYPE html>
<html>
<head><title>My Website</title></head>
<body>
  <h1>Welcome to My Site</h1>
  <p>Visitors can now tip me with CKB.</p>

  <script
    src="https://cdn.fibertap.dev/widget.min.js"
    data-creator="ckt1qyqvsv5240xeh85wvnau2eky8pwrhh4jr8ts8vyj3c"
  ></script>
</body>
</html>

You'll see a floating tip button in the bottom-right corner. Click it to test the payment flow.

Configuration

Customize the widget with data- attributes on the script tag:

AttributeTypeDefaultDescription
data-creatorstring(required)CKB address to receive payments
data-themestringautolight, dark, or auto
data-positionstringbottom-rightbottom-right or bottom-left
data-presetsstring1, 5, 10Comma-separated preset amounts (CKB)
data-labelstringTipButton text label
data-modestring(wallet)Set to qr for QR code mode
data-apistringhttps://api.fibertap.devCustom API endpoint

Themes

The widget supports three theme modes. auto detects the user's system preference.

<!-- Always dark -->
<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_ADDRESS"
  data-theme="dark"
></script>

<!-- Always light -->
<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_ADDRESS"
  data-theme="light"
></script>

<!-- Match system preference (default) -->
<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_ADDRESS"
  data-theme="auto"
></script>

Position

Place the widget on either side of the screen:

<!-- Bottom right (default) -->
<script data-position="bottom-right" src="...widget.min.js" ></script>

<!-- Bottom left -->
<script data-position="bottom-left" src="...widget.min.js" ></script>

Custom API Endpoint

If you run your own FiberTap API server (or use the widget offline):

<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_ADDRESS"
  data-api="https://your-api.example.com"
></script>

Manual Initialization

Initialize the widget programmatically instead of via a script tag:

<script type="module">
  import { createWidget } from "https://cdn.fibertap.dev/widget.min.js";

  createWidget({
    creator: "YOUR_ADDRESS",
    theme: "dark",
    position: "bottom-left",
    presets: [1, 5, 10, 25],
    label: "Support me",
  });
</script>
ℹ️ Shadow DOM Isolation: The widget renders inside a Shadow DOM. Your page's CSS cannot affect the widget, and the widget's CSS cannot affect your page. This is by design.

WordPress

Add the script to your theme's footer. Go to Appearance → Theme Editor → footer.php and paste before </body>:

<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_CKB_ADDRESS"
></script>
💡 Alternative: Install a "Code Injection" plugin and paste the snippet in the site-wide footer section. No theme editing required.

Next.js

In pages/_document.tsx or app/layout.tsx:

import Script from "next/script";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.fibertap.dev/widget.min.js"
          data-creator="YOUR_CKB_ADDRESS"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

React / Vite

Create a component and use it anywhere in your app:

import { useEffect, useRef } from "react";

export function FiberTap({ creator, theme = "auto" }) {
  const loaded = useRef(false);

  useEffect(() => {
    if (loaded.current) return;
    loaded.current = true;

    const s = document.createElement("script");
    s.src = "https://cdn.fibertap.dev/widget.min.js";
    s.dataset.creator = creator;
    s.dataset.theme = theme;
    document.body.appendChild(s);
  }, [creator, theme]);

  return null;
}

// Usage: <FiberTap creator="ckb1q..." theme="dark" />

Ghost / Substack

Go to Settings → Code injection → Site Footer and paste the script tag.

Hugo

In layouts/_default/baseof.html:

{{ define "scripts" }}
  <script
    src="https://cdn.fibertap.dev/widget.min.js"
    data-creator="YOUR_CKB_ADDRESS"
  ></script>
{{ end }}

GitHub Pages

Add the script before </body> in your layout template or individual pages:

<!-- In _layouts/default.html or directly in pages -->
<script
  src="https://cdn.fibertap.dev/widget.min.js"
  data-creator="YOUR_CKB_ADDRESS"
></script>

Discord Bot Integration

Register a creator, set up webhooks, and listen for payment.confirmed events to verify tips in your Discord server.

// 1. Register as a creator
const res = await fetch("https://api.fibertap.dev/api/creators/register", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    ckbAddress: "ckb1q...",
    displayName: "My Discord Bot",
  }),
});

// 2. Register webhook to receive payment events
await fetch(\`https://api.fibertap.dev/api/creators/\${id}/webhooks\`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-api-key": apiKey,
  },
  body: JSON.stringify({ url: "https://your-server.com/webhook" }),
});

Webhooks

Get notified when payments are confirmed. Register a webhook URL and receive POST requests with HMAC-SHA256 signatures.

Event Payload

{
  "type": "payment.confirmed",
  "paymentId": "ft_pay_xyz",
  "amount": "100000000",
  "senderAddress": "ckt1q...",
  "txHash": "0xabc...",
  "confirmedAt": 1700000000000,
  "message": "Great article!"
}

Verify Signatures

import crypto from "crypto";

function verifyWebhook(payload, signature, secret) {
  const expected = crypto
    .createHmac("sha256", secret)
    .update(payload)
    .digest("hex");

  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expected)
  );
}

API Reference

Base URL: https://api.fibertap.dev

Endpoints

MethodEndpointAuthDescription
POST/api/creators/registerPublicRegister a new creator
GET/api/creators/:idPublicGet creator profile
PATCH/api/creators/:id/configAPI keyUpdate widget config
POST/api/creators/:id/webhooksAPI keyRegister webhook
DELETE/api/creators/:id/webhooks/:whIdAPI keyDelete webhook
POST/api/payments/requestPublicCreate payment request
POST/api/payments/:id/confirmPublicConfirm payment
GET/api/payments/:id/statusPublicCheck payment status
GET/healthPublicHealth check

Troubleshooting

Widget doesn't appear

Button appears but clicking does nothing

Styling conflicts

The widget uses Shadow DOM isolation. If you see styling issues, it's likely a z-index conflict. The widget renders at z-index: 2147483647 (max safe value).

ℹ️ Browser Support: Chrome 90+, Firefox 90+, Safari 15+, Edge 90+. The widget requires Shadow DOM support.
`;