Platforms

However your site is built, the widget itself is the same — a few lines of code loading pybara-donate.iife.js. What differs is how those lines get in, and whether your site’s address can hold the DNS record the widget needs.

A domain of your own

The widget requires a TXT record at _pybara-payto.<your domain> — see Setup. A platform subdomain (*.replit.app, *.lovable.app, *.webflow.io, …) cannot hold one, so the widget needs a custom domain attached to your site.

AI site builders — Replit, Lovable, Bolt

A site built by an AI agent is edited by prompting it — which is all the widget needs:

1. Set your site up in Pybara Wallet — Setup walks through the DNS record and the terms. The last step gives you the snippet for your site, with your principal and its address already filled in, and a ready-made prompt.
2. Paste the prompt into your builder — something like “Add this Pybara donation widget to my page, exactly as given: …” — and the agent inserts it where it belongs.
3. Say where it goes — “in the footer”, “on my /support page” — and give it your site’s accent colour for primaryColor.

Two things to know on these platforms:

• Custom domain required. A *.replit.app or *.lovable.app address cannot hold the _pybara-payto record. Attach your own domain first — every builder offers this — then set the site up in Pybara Wallet.
• Content Security Policy. If the generated app sets one, point the agent at the allowances in the widget’s README.
• Every option, machine-readable. The init options have a JSON Schema at /donate-widget/options.schema.json — an agent can validate the config it writes against it.

Site builders with embed blocks — Webflow, Squarespace

These take the same snippet in a custom-code or embed block:

• Per page: an Embed element holding the <div>, the <script> tag and the PybaraDonate.init(…) call.
• Site-wide: the builder’s custom-code setting (on Webflow, Site settings → Custom code), which usually needs a paid plan.

Plain HTML

Any page, no platform:

<div id="pybara-donate"></div>
<script src="https://cdn.jsdelivr.net/npm/@pybara/donate-widget@beta/dist/pybara-donate.iife.js"></script>
<script>
  PybaraDonate.init({
    target: '#pybara-donate',               // where the widget renders
    recipientPrincipal: 'xxxxx-xxxxx-...',  // your Pybara Wallet's principal
    siteUrl: 'https://example.com',         // your site's address
    siteName: 'Example Charity',            // the name donors see
  });
</script>

Every option and its default is in Options.