JavaScript SDK
Examples
Integration examples for the Ramadhan JavaScript SDK (vanilla)
Vanilla JS examples
Example 1: Script tag with charity ID (simplest)
<!DOCTYPE html>
<html>
<head>
<title>Support Our Cause</title>
</head>
<body>
<h1>Donate with Ramadhan</h1>
<p>Your donation helps make a difference.</p>
<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>
</body>
</html>Example 2: Manual init with environment
Use dev or production by passing env to Ramadhan.init():
<script src="https://s3.givebrite.com/ramadhan.min.js"></script>
<div class="ramadhan" style="width: 300px"></div>
<script>
const ramadhan = Ramadhan.init("YOUR_CHARITY_ID", { env: "dev" });
ramadhan.renderButton({
text: "Automate Your Giving",
icon: true,
});
</script>Example 3: Custom styled button
<script src="https://s3.givebrite.com/ramadhan.min.js?charityId=YOUR_CHARITY_ID"></script>
<div class="ramadhan" style="width: 320px"></div>
<script>
ramadhan.renderButton({
text: "Donate Now",
icon: true,
style: {
backgroundColor: "#28a745",
color: "#ffffff",
padding: "16px 32px",
borderRadius: "8px",
fontWeight: "bold",
},
});
</script>Example 4: Text-only button (no icon)
<script src="https://s3.givebrite.com/ramadhan.min.js?charityId=YOUR_CHARITY_ID"></script>
<div class="ramadhan" style="width: 280px"></div>
<script>
ramadhan.renderButton({
text: "Open donation flow",
icon: false,
});
</script>Example 5: Custom container element
If you don’t use a div.ramadhan, pass the container as the second argument:
<script src="https://s3.givebrite.com/ramadhan.min.js"></script>
<div id="donate-area"></div>
<script>
const ramadhan = Ramadhan.init("YOUR_CHARITY_ID");
const container = document.getElementById("donate-area");
ramadhan.renderButton({ text: "Donate" }, container);
</script>