Snippet Examples

Replace YOUR_ORG_ID with your organization's UUID from the Givebear dashboard.

Donation button

<div data-givebear-button data-organization-id="YOUR_ORG_ID"></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Button with custom text and accent color

<div
  data-givebear-button
  data-organization-id="YOUR_ORG_ID"
  data-button-text="Give now"
  data-accent-color="#1a5c8a"
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Donation card

<div data-givebear-card data-organization-id="YOUR_ORG_ID"></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Inline donation form

<div data-givebear-embed data-organization-id="YOUR_ORG_ID"></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Fund-specific giving

<div
  data-givebear-card
  data-organization-id="YOUR_ORG_ID"
  data-fund-id="YOUR_FUND_ID"
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Campaign-specific giving

<div
  data-givebear-button
  data-organization-id="YOUR_ORG_ID"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-button-text="Donate to our Ramadan campaign"
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Prayer times (full schedule)

<div data-givebear-prayer-times data-organization-id="YOUR_ORG_ID"></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Prayer times (strip, 24-hour format)

<div
  data-givebear-prayer-times
  data-organization-id="YOUR_ORG_ID"
  data-mode="strip"
  data-time-format="24h"
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Calendar (full list)

<div data-givebear-calendar data-organization-id="YOUR_ORG_ID"></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

Calendar (next event only)

<div
  data-givebear-calendar
  data-organization-id="YOUR_ORG_ID"
  data-mode="next"
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

JavaScript API: synchronous

Only use this pattern when the script tag is not async:

<div id="donate-btn"></div>
<script src="https://givebear.io/sdk/givebear.js"></script>
<script>
  window.Givebear.renderButton("#donate-btn", {
    organizationId: "YOUR_ORG_ID",
  });
</script>

JavaScript API: async (recommended)

<div id="donate-btn"></div>
<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>

SEO backlink pattern

For pages where you want crawlers to see a real link before JavaScript loads, pair the widget with a static fallback element. The SDK removes the fallback once the live widget mounts.

<div
  id="gb-donate"
  data-givebear-button
  data-organization-id="YOUR_ORG_ID"
></div>
<p data-givebear-fallback data-for="gb-donate">
  <a href="https://givebear.io/donate/by-id/YOUR_ORG_ID">
    Donate to [Organization Name]
  </a>
</p>
<script src="https://givebear.io/sdk/givebear.js" async></script>

The data-for attribute on the fallback must match the id on the widget element.

On this page