Getting Started
Donately Components is a JavaScript library that lets you embed fundraising UI elements — campaign lists, donation feeds, fundraiser profiles, and forms — on any website. No backend required.
Include the Library
Add the CSS and JavaScript files from the CDN to your page:
<!-- In your <head> -->
<link rel="stylesheet" href="https://cdn.donately.com/dntly-components/2.3/donately-components.css">
<!-- Before closing </body> -->
<script src="https://cdn.donately.com/dntly-components/2.3/donately-components.min.js"></script>2.3). Patch updates are deployed automatically to the same URL, so you always get the latest bug fixes.Add a Component
Place the component HTML in your page using data-dntly attributes. Each component uses a "clonable card" pattern for list items:
<div data-dntly="dntly-campaign-list-component">
<div data-dntly="cmp-list-outer-container">
<div data-dntly="cmp-list-inner-container">
<!-- This card is cloned for each campaign -->
<div data-dntly="cmp-list-card" data-dntly-clonable-card style="display:none">
<h3 data-dntly="cmp-list-card-title"></h3>
<p data-dntly="cmp-list-card-description"></p>
<div data-dntly="cmp-list-card-amount-raised"></div>
</div>
</div>
</div>
</div>Initialization
Initialize all components on the page by calling buildComponents():
<script>
function dntlyReady(name, callback) {
window.setTimeout(function() {
if (window[name]) { callback(); }
else { dntlyReady(name, callback); }
}, 10);
}
dntlyReady("DonatelyComponents", function() {
DonatelyComponents.componentHandler.buildComponents({
options: {
"donately-id": "act_ba7d12ab27bb",
"campaign-id": "cmp_e4b08ef12147", // optional
"fundraiser-id": "fndr_3ae925bf846f", // optional
"form-id": "frm_3ae925bf846f" // optional
},
afterComponentLoad: function(parentElement, componentInstanceKey) {
// Called when each component finishes loading
}
});
});
</script>Options can also be passed via URL query parameters (e.g., ?campaign_id=cmp_xxx&limit=10) or as data attributes on the component element.
Global Options
| Option | Description |
|---|---|
| donately-id | Your Donately account ID (required) |
| campaign-id | Scope components to a specific campaign |
| fundraiser-id | Scope components to a specific fundraiser |
| form-id | Scope the donation form to a specific form configuration |
| limit | Number of items to display per page (list components) |
| sort | Sort direction: ASC or DESC |
| order_by | Field to sort by (e.g., created_at, amount_in_cents) |
| build-page | Generate a full HTML page with meta tags (campaign or fundraiser) |
| donately-template-host | Host domain for template pages (e.g., Webflow) |
| donately-template-url-style | URL style for links: webflow_v1 |
Campaign List
Displays a list of campaigns with titles, descriptions, progress bars, and amount raised.
Component Name
dntly-campaign-list-component
Available Data Attributes
| Attribute | Description |
|---|---|
| cmp-list-card-title | Campaign title |
| cmp-list-card-description | Campaign description |
| cmp-list-card-amount-raised | Total amount raised |
| cmp-list-card-goal | Campaign goal amount |
| cmp-list-card-percent-funded | Percentage of goal reached |
| cmp-list-card-donor-count | Number of donors |
| cmp-list-card-donation-count | Number of donations |
| cmp-list-card-cover-photo | Campaign cover photo (sets as background image) |
| cmp-list-card-link | Link to campaign detail page |
Supports filtering by campaign status (draft, published, archived) and type (peer_to_peer, donation, etc.).
Fundraiser List
Displays a list of fundraisers with photos, progress, and team information.
Component Name
dntly-fundraiser-list-component
Available Data Attributes
| Attribute | Description |
|---|---|
| fndr-list-card-title | Fundraiser title |
| fndr-list-card-photo | Fundraiser photo |
| fndr-list-card-amount-raised | Amount raised |
| fndr-list-card-goal | Fundraising goal |
| fndr-list-card-percent-funded | Percentage of goal |
| fndr-list-card-type | Fundraiser type (individual, team, team member) |
| fndr-list-card-team-name | Parent team name (for team members) |
| fndr-list-card-link | Link to fundraiser detail page |
Donation List
Displays recent donations with donor names, amounts, comments, and dates.
Component Name
dntly-donation-list-component
Available Data Attributes
| Attribute | Description |
|---|---|
| don-list-card-donor-name | Donor display name |
| don-list-card-amount | Donation amount |
| don-list-card-comment | Donor comment |
| don-list-card-date | Donation date |
| don-list-card-ecard-message | E-card message (if applicable) |
Campaign Details
Displays a full campaign page with cover photo, description, progress stats, and event countdown.
Component Name
dntly-campaign-details-component
Available Data Attributes
| Attribute | Description |
|---|---|
| cmp-details-title | Campaign title |
| cmp-details-description | Full campaign description (HTML) |
| cmp-details-cover-photo | Cover photo |
| cmp-details-amount-raised | Total amount raised |
| cmp-details-goal | Campaign goal |
| cmp-details-percent-funded | Percentage of goal |
| cmp-details-donor-count | Number of unique donors |
| cmp-details-donation-count | Number of donations |
| cmp-details-start-date | Campaign start date |
| cmp-details-end-date | Campaign end date |
| cmp-details-days-left | Days remaining (event campaigns) |
Fundraiser Details
Displays an individual fundraiser's profile, progress, and relationship to parent campaign or team.
Component Name
dntly-fundraiser-details-component
Available Data Attributes
| Attribute | Description |
|---|---|
| fndr-details-title | Fundraiser title |
| fndr-details-description | Fundraiser description |
| fndr-details-photo | Fundraiser photo |
| fndr-details-amount-raised | Amount raised |
| fndr-details-goal | Fundraising goal |
| fndr-details-percent-funded | Percentage of goal |
| fndr-details-type | Type (individual, team, team_member) |
| fndr-details-parent-link | Link to parent campaign |
| fndr-details-team-name | Team name (for team members) |
Account Details
Displays organization/account information and branding.
Component Name
dntly-account-details-component
Available Data Attributes
| Attribute | Description |
|---|---|
| acct-details-name | Account/organization name |
| acct-details-logo | Account logo |
| acct-details-description | Account description |
Donation Form
An embeddable donation form component. For the full-featured standalone donation form, see the Embeddable Form docs.
Component Name
dntly-donation-form-component
Fundraiser Create
Allows supporters to create their own fundraiser pages for peer-to-peer campaigns. Includes photo upload and form validation.
Component Name
dntly-fundraiser-create-component
Conditional Visibility
The logic component (dntly-logic-component) enables conditional show/hide of elements based on data values, without writing JavaScript.
Show/Hide Attributes
<!-- Show element only when condition is true -->
<div data-dntly-show-if="type==p2p_fundraisers">
This is a peer-to-peer campaign!
</div>
<!-- Hide element when condition is true -->
<div data-dntly-hide-if="total_count==0">
Campaign list content
</div>Supported Operators
==— Equal to!=— Not equal to&&— Logical AND (combine conditions)||— Logical OR (either condition)
Callbacks
The afterComponentLoad callback fires after each component finishes loading its data and rendering:
DonatelyComponents.componentHandler.buildComponents({
options: { "donately-id": "act_ba7d12ab27bb" },
afterComponentLoad: function(parentElement, componentInstanceKey) {
console.log("Component loaded:", componentInstanceKey);
// parentElement is the DOM node of the component
}
});CDN Documentation
Full interactive documentation for each component is available on the CDN. These auto-generated docs include all available data attributes, example markup, and live previews.
Access the documentation at:
https://cdn.donately.com/dntly-components/2.3/docs/Individual component docs:
/docs/campaign-list.html/docs/campaign-details.html/docs/fundraiser-list.html/docs/fundraiser-details.html/docs/donation-list.html/docs/account-details.html