JavaScript SDK
Customization
Customize the appearance of the Ramadhan donation button
Button options
Pass an options object to renderButton() to customize the button.
text (string)
Label on the button. Default: "Automate Your Giving".
ramadhan.renderButton({ text: "Donate with Ramadhan" });icon (boolean | string | false)
trueor omitted — Show the default arrow icon on the right of the text.false— Text only, no icon.- string (URL) — Use a custom image as the icon.
ramadhan.renderButton({ text: "Donate", icon: true });
ramadhan.renderButton({ text: "Donate", icon: false });
ramadhan.renderButton({ text: "Donate", icon: "https://example.com/icon.png" });style (object)
Override the button’s look. The button uses the charity’s primary theme colour by default when available.
| Property | Description | Default |
|---|---|---|
backgroundColor | Background colour | Charity theme or #C7EF00 |
color | Text and icon colour | #fff |
padding | Button padding | 12px 24px |
borderRadius | Border radius | 4px |
fontFamily | Font family | inherit |
fontWeight | Font weight | 600 |
ramadhan.renderButton({
text: "Donate Now",
icon: true,
style: {
backgroundColor: "#0066cc",
color: "#ffffff",
padding: "16px 32px",
borderRadius: "8px",
},
});