Installation & Setup

Option 1: Script tag with auto-initialization

Load the SDK with your charity ID in the URL. The SDK will auto-initialize and expose window.ramadhan:

<script src="https://s3.givebrite.com/ramadhan.min.js?charityId=YOUR_CHARITY_ID"></script>
<div class="ramadhan" style="width: 300px"></div>
<script>
  ramadhan.renderButton({ text: "Automate Your Giving" });
</script>

Replace YOUR_CHARITY_ID with your Givebrite charity ID. The button uses the production API by default.

Option 2: Manual initialization (recommended for dev/production control)

Load the script without a charity ID, then initialize when ready. This lets you set the environment (dev vs production).

Load the script without query parameters:

<script src="https://s3.givebrite.com/ramadhan.min.js"></script>
<div class="ramadhan" style="width: 300px"></div>

Initialize with your charity ID and optional env:

// Use production API (default)
const ramadhan = Ramadhan.init("YOUR_CHARITY_ID");

// Or use dev API
const ramadhan = Ramadhan.init("YOUR_CHARITY_ID", { env: "dev" });

ramadhan.renderButton({ text: "Automate Your Giving", icon: true });

Environments

env: "dev" — Uses https://api.givebrite.com/dev/v1 for charity data.
env: "production" (default) — Uses https://api.givebrite.com/v1.

Button container

The SDK looks for an element with the class ramadhan to render the button. You can pass a different container as the second argument to renderButton(buttonOptions, containerElement).

<div class="ramadhan" style="width: 300px"></div>

Browser support

The Ramadhan JavaScript SDK supports modern browsers that support the Fetch API and standard DOM APIs.

Installation & Setup