Donation Widget Embed Generator
Advanced configuration options for developers
Basic Configuration
Advanced Options
Optional custom CSS to style the widget.
Where to redirect after successful donation (overrides default thank you page).
Language and currency format for the widget.
Customize which fields to display (name,email,phone,address).
Track marketing campaigns by passing UTM parameters.
Additional custom data to associate with donations.
Embed Code
<script src="https://justgive.online/embed.js"></script>
<div class="jgo-donate-widget"
data-campaign="education-for-all"
data-color="#4f46e5"
data-amounts="25,50,100,250,500"
data-default="50"
data-allow-recurring="true"
data-allow-custom="true"
data-title="Support Our Mission">
</div>Preview
Support Our Mission
Powered by JustGive.online
Select amount
Integration Documentation
Quick Start
To add a donation widget to your website, simply copy the generated code above and paste it into your HTML where you want the widget to appear.
Available Data Attributes
| Attribute | Description | Default |
|---|---|---|
data-campaign |
The campaign ID to associate donations with | general |
data-color |
Primary color for buttons and accents (hex code) | #4F46E5 |
data-amounts |
Comma-separated list of donation amounts to display | 25,50,100,250,500 |
data-default |
Default selected donation amount | 50 |
data-allow-recurring |
Enable recurring donation option | true |
data-allow-custom |
Allow custom donation amounts | true |
data-title |
Widget title text | Support Our Mission |
JavaScript API
You can also interact with the widget programmatically:
// Initialize a widget
const widget = new JustGiveWidget({
container: '#donation-container',
campaign: 'education-for-all',
amounts: [25, 50, 100, 250, 500],
defaultAmount: 50,
allowRecurring: true
});
// Set a custom donation amount
widget.setAmount(75);
// Listen for donation events
widget.on('donation:completed', function(data) {
console.log('Donation completed:', data);
});