GivebearConfiguration reference
Every Givebear SDK config field and data-givebear attribute, with types and defaults.
This page lists every configuration field accepted by the window.Givebear
render methods, plus every data- attribute the SDK reads when it auto-mounts
embeds. Field names, types, and defaults match the SDK source exactly.
For how to load the SDK and call these methods, see Installation and API. For copy-paste embeds, see Snippet examples.
All fields are passed as a single config object: gb.renderButton(target, config). The same fields map to data- attributes for auto-mounted embeds.
See Data attributes.
Shared fields
Every widget accepts these base fields. At least one of organizationId or
orgId is required so the SDK knows which account to credit.
Prop
Type
Widgets theme themselves with the organization's configured accent color
automatically. Set accentColor only to pin a different color; pass a
six-digit hex value so the readable text color can be derived.
appId is the OAuth client ID of a Givebear Connect
app. Set it when a connected app embeds the widget so donations are attributed
to that app. For server-controlled embeds (locked target, preset amounts,
donor prefill), mint a session and pass sessionToken instead. See
Embedded donations.
Button (renderButton)
A donate button that opens the modal. Extends the shared fields.
Prop
Type
Card (renderCard)
A card with title, description, and donate button. Extends the shared fields.
Prop
Type
Inline embed (renderInline)
The full donation form, rendered on the page or in a modal. Extends the
shared fields. render is a back-compatible alias for
renderInline.
Prop
Type
Modal (open)
Givebear.open(config) opens the donation modal directly. It takes the
shared fields only, with no extra options.
Thermometer (renderThermometer)
A campaign progress bar with raised total and recent donations. Extends the
shared fields. Pair it with campaignId for campaign goals.
Prop
Type
Campaign hero (renderCampaignHero)
A full campaign block: title, raised total, progress bar, matching banner,
donate button, and the recent-gift feed. Extends the
shared fields. Requires campaignId.
Prop
Type
Supporters ticker (renderSupporters)
A one-line strip that cycles through the campaign's anonymized recent gifts
("Someone donated $50 · 3m ago"). Extends the shared fields.
Requires campaignId. Renders nothing visible while the campaign has no
recent gifts, so it never reserves empty space.
Event card (renderEventCard)
One published event as a card with date, time, location, and a register button linking to the hosted event page. Extends the shared fields.
Prop
Type
Prayer times (renderPrayerTimes)
Daily prayer times for the organization. Extends the shared fields.
Prop
Type
Calendar (renderCalendar)
Upcoming events for the organization. Extends the shared fields.
Prop
Type
The events-only embed (data-givebear-events) calls renderCalendar with
category forced to "event". Any category you set on that element is
overridden.
Data attributes
The SDK scans the page on load and mounts any element carrying a widget attribute. Add one widget attribute plus the config attributes you need. No JavaScript is required.
Widget selectors
Each attribute mounts one widget type. Use exactly one per element.
| Attribute | Renders |
|---|---|
data-givebear-button | Donate button (renderButton) |
data-givebear-card | Donation card (renderCard) |
data-givebear-embed | Inline donation form (renderInline) |
data-givebear-thermometer | Campaign thermometer (renderThermometer) |
data-givebear-campaign-hero | Campaign hero (renderCampaignHero) |
data-givebear-supporters | Supporters ticker (renderSupporters) |
data-givebear-event-card | Single event card (renderEventCard) |
data-givebear-prayer-times | Prayer times (renderPrayerTimes) |
data-givebear-calendar | Events calendar (renderCalendar) |
data-givebear-events | Calendar with category forced to event |
Config attributes
These map to the config fields above. The SDK reads them via dataset, so
camelCase fields become kebab-case attributes.
| Attribute | Config field | Type |
|---|---|---|
data-organization-id | organizationId | string |
data-org-id | orgId | string |
data-fund-id | fundId | string |
data-project-id | projectId (deprecated) | string |
data-campaign-id | campaignId | string |
data-event-id | eventId | string |
data-accent-color | accentColor | string |
data-theme | theme | "auto" | "light" | "dark" |
data-app-id | appId | string |
data-session-token | sessionToken | string |
data-button-text | buttonText | string |
data-placement | placement | "inline" | "modal" |
data-mode | mode | widget-specific |
data-time-format | timeFormat | "12h" | "24h" |
data-category | category | string |
data-tradition | tradition | string |
data-limit | limit | number |
data-cache-key | cacheKey | number | string |
data-hide-recent | hideRecent | present, or "false" to disable |
Only these data attributes are read. data-mode accepts the values valid for
the widget on that element (for example full, card, or strip on a prayer
times widget). Invalid values fall back to the widget default.
SDK-managed attributes
The SDK sets these itself. You do not add them.
| Attribute | Meaning |
|---|---|
data-givebear-mounted | Set to 1 after the SDK mounts an element, so it mounts once. |
data-givebear-fallback | Marks a static SEO fallback node paired with a widget. |
data-for | On a fallback node, the id of the widget it backs. Removed once the widget renders. |
Auto-mount example
<div
data-givebear-button
data-organization-id="your-org-id"
data-fund-id="your-fund-id"
data-accent-color="#387A4B"
data-theme="auto"
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>Related
Installation and API
Load the SDK and call window.Givebear methods.
Snippet examples
Copy-paste embeds for every widget.
Analytics and versioning
SDK version and how widgets report usage.
Givebear Connect
Use appId to attribute embeds to a connected app.