GivebearDonation widgets
Add a Givebear donation button, card, or inline form to your website with a copy-paste snippet.
Donation widgets put Givebear giving directly on your own website. You build the widget in your dashboard, copy a snippet, and paste it where you want donors to give. No code knowledge is needed.
This guide covers the three donation surfaces the builder produces: a button, a card, and an inline form.
Before you start
You need a few things in place before a widget can take donations:
- Your organization can already accept donations on its public Givebear page.
- Your organization has a public donation address set in Settings, roles, and billing. The builder blocks snippet generation until this exists.
- You can edit your website, or you can send the snippet to whoever can.
Widgets route donors through your normal Givebear checkout. Plan and processing fees are the same as any other Givebear donation. See pricing.
Build and place a widget
Open the widget builder
In your dashboard, go to Website button. The builder opens with a live preview on the right.
Pick a widget style
Choose the surface that fits the spot on your page:
| Style | What it does | Best for |
|---|---|---|
| Inline | Puts the full donation form right on the page. | A page that is itself the donation landing page. |
| Button | Shows a button that opens a secure donation modal. | Headers, footers, and short sections. |
| Card | Shows a richer prompt with a button that opens the modal. | A section with room to add context. |
Choose a destination
Set where the gift goes:
- Page sends donors to general giving for your organization.
- Fund points the gift at one fund, such as General Fund or Zakat.
- Campaign points the gift at a specific campaign appeal.
Match the destination to the surrounding content. A program page should point at that program's fund, not a generic page.
Customize the look (button and card only)
For a button or card, set the button text and an accent color. The inline form does not use these. Check the preview to confirm the button text stays readable on your accent color.
Copy the snippet
The builder shows two snippet formats: HTML and JavaScript. HTML is the simpler copy-paste for most websites. Select a format and click Copy.
Paste it into your website
Paste the snippet where the widget should appear. The snippet loads Givebear, renders the widget, and includes an accessible fallback link for visitors before the widget loads.
If you add several widgets to one page, you only need the script line once. See theming and platforms for builder-specific steps.
What you just did
You created a self-contained donation widget and placed it on your site. Donors can now give without leaving your page. Gifts appear in your dashboard alongside every other donation.
Choose the right destination
A widget can point at your organization, a fund, or a campaign:
- Use Page for a general "donate" entry point.
- Use a fund for a stable, ongoing destination.
- Use a campaign for a seasonal or urgent appeal.
Set up the fund or campaign first in the fundraising guide, then point a widget at it.
If a widget does not work
- Snippet generation is blocked. Set a public donation address in Settings, roles, and billing.
- The widget opens but payment fails. Confirm your organization can take donations on its public Givebear page first.
- The widget shows the fallback link only. The page may block scripts, or the snippet may be incomplete. Re-copy the full snippet.
- Styling looks wrong on your site. See theming and platforms.
Related pages
Calendar and prayer widgets
Embed events, a calendar, or prayer times on your site.
Theming and platforms
Match widget styling and place snippets on website builders.
Fundraising guide
Set up the funds and campaigns your widgets point to.
Donations and finance
Track the gifts your widgets bring in.
SDK reference
For developers who want to render widgets in code.