Ramadhan (global)

When you load the script, Ramadhan is available on window (e.g. window.Ramadhan).

Ramadhan.init(charityId, options?)

Creates a Ramadhan instance for the given charity.

Argument	Type	Description
`charityId`	string	Your Givebrite charity ID.
`options`	object	Optional.
`options.env`	`"dev"` \| `"production"`	API environment. Default: `"production"`.

Returns: A Ramadhan instance.

const ramadhan = Ramadhan.init("YOUR_CHARITY_ID");
const ramadhanDev = Ramadhan.init("YOUR_CHARITY_ID", { env: "dev" });

Ramadhan instance

ramadhan.renderButton(buttonOptions?, containerElement?)

Renders the donation button. The SDK fetches the charity, then draws the button. On click, it opens the charity’s Ramadhan flow in a dialog.

Argument	Type	Description
`buttonOptions`	object	Optional. See Customization.
`buttonOptions.text`	string	Button label. Default: `"Automate Your Giving"`.
`buttonOptions.icon`	`true` \| `false` \| string	Show default arrow (`true`/omit), hide icon (`false`), or image URL.
`buttonOptions.style`	object	CSS-like style overrides.
`containerElement`	HTMLElement	Optional. Where to render. Default: first element with class `ramadhan`.

ramadhan.renderButton({ text: "Donate", icon: true });
ramadhan.renderButton({ text: "Donate" }, document.getElementById("my-container"));

ramadhan.getCharity()

Returns a Promise that resolves to the charity object from the API. Useful if you need charity data (e.g. name, theme) before or without rendering the button.

const charity = await ramadhan.getCharity();
console.log(charity.name, charity.theme?.primary);

Auto-initialization (script tag)

If you load the script with a charityId query parameter:

<script src="https://s3.givebrite.com/ramadhan.min.js?charityId=YOUR_CHARITY_ID"></script>

the SDK creates an instance and assigns it to window.ramadhan. You can then call:

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

No need to call Ramadhan.init() in this case; the instance uses the production API by default.

API Reference