Snippet examples

Copy-paste HTML, JavaScript, and React for every Givebear widget: embeds, attribution, funds, and campaigns.

Use these snippets to drop Givebear widgets onto any page. Each one matches the SDK exactly. Replace YOUR_ORG_ID with your organization ID from the dashboard.

Most sections end with a live example: the same widget the snippet produces, rendered against a read-only demo organization. Click around freely; the demo organization cannot process payments.

Every HTML and JavaScript snippet needs the SDK script once per page:

<script src="https://givebear.io/sdk/givebear.js" async></script>

Three ways to render appear below:

Add a data-givebear-* attribute and let the SDK auto-mount on load.
Call a window.Givebear method yourself for full control.
In React, use the components from @givebear/react. They load the SDK themselves, so skip the script tag.

For the full method list see installation and API. For every config field see the configuration reference.

Render a donation button

The button opens the donation form in a modal on click.

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

<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>

import { DonateButton } from "@givebear/react";

export function Donate() {
  return <DonateButton organizationId="YOUR_ORG_ID" />;
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

The async loader queue lets your inline call run before the bundle arrives. The SDK drains window.Givebear.q once it loads. See the loading patterns.

Render an inline donation form

Use data-givebear-embed (or renderInline) to mount the form directly in the page instead of a modal.

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

<div id="donate-inline"></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.renderInline("#donate-inline", { organizationId: "YOUR_ORG_ID" });
  });
</script>

import { DonationForm } from "@givebear/react";

export function GivePage() {
  return <DonationForm organizationId="YOUR_ORG_ID" />;
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

Render a donation card

The card shows your title and description above a donate button.

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

<div id="gb-card"></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.renderCard("#gb-card", { organizationId: "YOUR_ORG_ID" });
  });
</script>

import { DonationCard } from "@givebear/react";

export function GiveCard() {
  return <DonationCard organizationId="YOUR_ORG_ID" />;
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

Skip the rendered button and trigger the modal from any element with Givebear.open.

<button id="my-cta">Support us</button>
<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) {
    document.getElementById("my-cta").addEventListener("click", function () {
      gb.open({ organizationId: "YOUR_ORG_ID" });
    });
  });
</script>

import { loadGivebear } from "@givebear/react";

export function SupportCta() {
  return (
    <button
      type="button"
      onClick={async () => {
        const gb = await loadGivebear();
        gb?.open({ organizationId: "YOUR_ORG_ID" });
      }}
    >
      Support us
    </button>
  );
}

Customize the button text and color

data-button-text sets the label. data-accent-color sets the button background. The default accent is #387A4B.

<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>

<div id="gb-button"></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("#gb-button", {
      organizationId: "YOUR_ORG_ID",
      buttonText: "Give now",
      accentColor: "#1a5c8a",
    });
  });
</script>

import { DonateButton } from "@givebear/react";

export function Donate() {
  return (
    <DonateButton
      organizationId="YOUR_ORG_ID"
      buttonText="Give now"
      accentColor="#1a5c8a"
    />
  );
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

accentColor styles the button only. The donation form inside the modal and inline embed always renders on a light theme.

Target a fund

Pass data-fund-id (or fundId) to route donations to a specific fund.

<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>

<div id="gb-fund-card"></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.renderCard("#gb-fund-card", {
      organizationId: "YOUR_ORG_ID",
      fundId: "YOUR_FUND_ID",
    });
  });
</script>

import { DonationCard } from "@givebear/react";

export function FundCard() {
  return (
    <DonationCard organizationId="YOUR_ORG_ID" fundId="YOUR_FUND_ID" />
  );
}

Target a campaign

Pass data-campaign-id (or campaignId) to attribute gifts to a campaign.

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

<div id="gb-campaign-button"></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("#gb-campaign-button", {
      organizationId: "YOUR_ORG_ID",
      campaignId: "YOUR_CAMPAIGN_ID",
      buttonText: "Donate to our spring campaign",
    });
  });
</script>

import { DonateButton } from "@givebear/react";

export function CampaignButton() {
  return (
    <DonateButton
      organizationId="YOUR_ORG_ID"
      campaignId="YOUR_CAMPAIGN_ID"
      buttonText="Donate to our spring campaign"
    />
  );
}

Attribute donations to a Connect app

If you build on Givebear Connect, set appId to your app's OAuth client ID. Donations made through the embedded widget are then credited to your app.

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

<div id="donate-inline"></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.renderInline("#donate-inline", {
      organizationId: "YOUR_ORG_ID",
      appId: "YOUR_APP_CLIENT_ID",
    });
  });
</script>

import { DonationForm } from "@givebear/react";

export function AppCheckout() {
  return (
    <DonationForm
      organizationId="YOUR_ORG_ID"
      appId="YOUR_APP_CLIENT_ID"
    />
  );
}

The SDK passes appId to the donation form as the app query parameter. The resulting donation records the source as app:<clientId>. Find your client ID in the developer portal and learn how apps connect in authentication.

Show a fundraising thermometer

The thermometer renders a campaign progress bar with a recent-donations feed.

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

<div id="gb-thermometer"></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.renderThermometer("#gb-thermometer", {
      organizationId: "YOUR_ORG_ID",
      campaignId: "YOUR_CAMPAIGN_ID",
    });
  });
</script>

import { Thermometer } from "@givebear/react";

export function CampaignProgress() {
  return (
    <Thermometer
      organizationId="YOUR_ORG_ID"
      campaignId="YOUR_CAMPAIGN_ID"
    />
  );
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

To hide the recent-donations feed, pass hideRecent (or the data-hide-recent attribute).

<div
  data-givebear-thermometer
  data-organization-id="YOUR_ORG_ID"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-hide-recent
></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

<div id="gb-thermometer"></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.renderThermometer("#gb-thermometer", {
      organizationId: "YOUR_ORG_ID",
      campaignId: "YOUR_CAMPAIGN_ID",
      hideRecent: true,
    });
  });
</script>

import { Thermometer } from "@givebear/react";

export function QuietProgress() {
  return (
    <Thermometer
      organizationId="YOUR_ORG_ID"
      campaignId="YOUR_CAMPAIGN_ID"
      hideRecent
    />
  );
}

Show a campaign hero

The campaign hero is a full landing block: campaign title, raised total, progress bar, matching banner, donate button, and recent gifts, from one snippet.

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

<div id="gb-hero"></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.renderCampaignHero("#gb-hero", {
      organizationId: "YOUR_ORG_ID",
      campaignId: "YOUR_CAMPAIGN_ID",
    });
  });
</script>

import { CampaignHero } from "@givebear/react";

export function CampaignPage() {
  return (
    <CampaignHero
      organizationId="YOUR_ORG_ID"
      campaignId="YOUR_CAMPAIGN_ID"
    />
  );
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

Show a supporters ticker

The ticker is a one-line strip cycling anonymized recent gifts. Place it above a donate button or form for social proof. It renders nothing while the campaign has no recent gifts.

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

<div id="gb-supporters"></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.renderSupporters("#gb-supporters", {
      organizationId: "YOUR_ORG_ID",
      campaignId: "YOUR_CAMPAIGN_ID",
    });
  });
</script>

import { SupportersTicker } from "@givebear/react";

export function SocialProof() {
  return (
    <SupportersTicker
      organizationId="YOUR_ORG_ID"
      campaignId="YOUR_CAMPAIGN_ID"
    />
  );
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

Embed a single event

The event card shows one published event with its date, time, location, and a register button.

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

<div id="gb-event"></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.renderEventCard("#gb-event", {
      organizationId: "YOUR_ORG_ID",
      eventId: "YOUR_EVENT_ID",
    });
  });
</script>

import { EventCard } from "@givebear/react";

export function NextEvent() {
  return (
    <EventCard organizationId="YOUR_ORG_ID" eventId="YOUR_EVENT_ID" />
  );
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

Render a Connect embed session

Platforms mint a session server-side and render it with data-session-token. The session carries the org, target, amounts, and prefill; no other attributes are needed. See Embedded donations.

<div data-givebear-embed data-session-token="gbes_..."></div>
<script src="https://givebear.io/sdk/givebear.js" async></script>

<div id="gb-checkout"></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.renderInline("#gb-checkout", { sessionToken: "gbes_..." });
  });
</script>

import { EmbeddedDonation } from "@givebear/react";

export function Checkout({ sessionToken }: { sessionToken: string }) {
  return <EmbeddedDonation sessionToken={sessionToken} />;
}

Show an events calendar

Use data-givebear-calendar for the full calendar, or data-mode="next" for the 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>

<div id="gb-calendar"></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.renderCalendar("#gb-calendar", {
      organizationId: "YOUR_ORG_ID",
      mode: "next",
    });
  });
</script>

import { Calendar } from "@givebear/react";

export function NextUp() {
  return <Calendar organizationId="YOUR_ORG_ID" mode="next" />;
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

To render only events, use data-givebear-events (or category="event" in React). It mounts the calendar with the event category preselected.

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

<div id="gb-events"></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.renderCalendar("#gb-events", {
      organizationId: "YOUR_ORG_ID",
      category: "event",
    });
  });
</script>

import { Calendar } from "@givebear/react";

export function EventsList() {
  return <Calendar organizationId="YOUR_ORG_ID" category="event" />;
}

Show prayer times

Use data-givebear-prayer-times. Set data-mode="strip" for a compact row and data-time-format="24h" for 24-hour times.

<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>

<div id="gb-prayer-times"></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.renderPrayerTimes("#gb-prayer-times", {
      organizationId: "YOUR_ORG_ID",
      mode: "strip",
      timeFormat: "24h",
    });
  });
</script>

import { PrayerTimes } from "@givebear/react";

export function PrayerStrip() {
  return (
    <PrayerTimes
      organizationId="YOUR_ORG_ID"
      mode="strip"
      timeFormat="24h"
    />
  );
}

Loading live example…

Live example, running against the read-only demo organization.Open its donate page

Include a fallback link

Write your embeds this way by default. The widget mounts with JavaScript, so crawlers, script blockers, and slow connections see nothing until the SDK boots. Pairing the widget with a static link means there is always a working path to your donation page. Give the widget an id, add a data-givebear-fallback element whose data-for matches that id, and the SDK removes the fallback the moment the live widget mounts.

The snippets the dashboard embed builders generate already include this markup, and the @givebear/react components render an equivalent fallback link automatically.

<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>

Render a donation button

Render an inline donation form

Render a donation card

Customize the button text and color

Target a fund

Target a campaign

Attribute donations to a Connect app

Show a fundraising thermometer

Show a campaign hero

Show a supporters ticker

Embed a single event

Render a Connect embed session

Show an events calendar

Show prayer times

Include a fallback link

Next steps

Configuration reference

Installation and API

Troubleshooting

Givebear Connect

On this page