Ramadhan Giving Widget Documentation
JavaScript SDK

Introduction

Complete guide to implementing the Ramadhan donation flow with vanilla JavaScript

Quickstart

Get started with the Ramadhan JS SDK in minutes. This example shows the simplest way to add the donation button to your website.

Minimal Example

<!DOCTYPE html>
<html>
  <head>
    <title>Ramadhan Donation</title>
  </head>
  <body>
    <!-- 1. Add the Ramadhan script with your charity ID -->
    <script src="https://s3.givebrite.com/ramadhan.min.js?charityId=YOUR_CHARITY_ID"></script>

    <!-- 2. Add the button container -->
    <div class="ramadhan" style="width: 300px"></div>

    <!-- 3. Render the button (instance is window.ramadhan when using ?charityId= in script) -->
    <script>
      ramadhan.renderButton({ text: "Automate Your Giving" });
    </script>
  </body>
</html>

That's it! The button will appear and, when clicked, open the charity's Ramadhan flow in a dialog.

Next Steps