GivebearInstallation and API
Load the Givebear browser SDK and use the public window.Givebear methods.
Add the SDK script to your page:
<script src="https://givebear.io/sdk/givebear.js" async></script>Async loading pattern
If your page loads the script with async (recommended), use the queue pattern so inline calls work before the SDK finishes loading:
<script>
window.Givebear = window.Givebear || function(cb) {
(window.Givebear.q = window.Givebear.q || []).push(cb);
};
</script>
<script src="https://givebear.io/sdk/givebear.js" async></script>
<script>
window.Givebear(function(gb) {
gb.renderButton("#donate-btn", { organizationId: "your-org-id" });
});
</script>Auto-mount (recommended)
Add data attributes to any element and the SDK mounts automatically on page load. No JavaScript required:
<div data-givebear-button data-organization-id="your-org-id"></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>Supported attributes:
| Attribute | Widget |
|---|---|
data-givebear-button | Donation button |
data-givebear-card | Donation card |
data-givebear-embed | Inline donation form |
data-givebear-prayer-times | Prayer times |
data-givebear-calendar | Calendar |
data-givebear-events | Events (calendar filtered to events only) |
Place the <script> tag after widget elements or anywhere. Auto-mount waits for DOMContentLoaded.
JavaScript API
Use window.Givebear directly when the script is loaded synchronously, or use the queue pattern above:
| Method | Purpose |
|---|---|
renderButton(target, config) | Render a donation button into a target element. |
renderCard(target, config) | Render a richer donation card. |
renderInline(target, config) | Render an inline donation experience. |
render(target, config) | Alias for renderInline. |
renderPrayerTimes(target, config) | Render prayer-time content. |
renderCalendar(target, config) | Render calendar or event-oriented content. |
open(config) | Open the donation experience in a modal programmatically. |
track(event, config, metadata?) | Send SDK analytics events. |
target is a CSS selector string or a DOM Element. config is documented in Configuration Reference.
Testing checklist
Before going live:
- Confirm the
organizationIdis the correct UUID (find it in your Givebear dashboard under Settings). - Confirm the organization is payment-ready in the Givebear dashboard.
- Confirm any
fundIdorcampaignIdis published and active. - Test the full donation path on desktop and mobile.
- Check the browser console for any
[Givebear]warnings. - Keep a direct Givebear public link as a fallback for visitors with JavaScript disabled.