Embedding a Donation Widget on WordPress, Squarespace, or Wix
By HeartBridge Team · · 7 min read
Key takeaways
- An embedded donation widget works best when the page has one clear goal.
- Test the form on mobile and desktop before you invite donors to use it.
- Keep the donation page short, focused, and easy to scan.
- HeartBridge includes an embeddable widget, hosted pages, and other fundraising tools for small nonprofits.
- If you are changing platforms, handle data export and donor records before you launch the new page.
Can you embed a donation widget website visitors will actually use?
Yes, and for a small nonprofit, that can be the simplest way to turn website traffic into gifts. If you want to embed donation widget website pages on WordPress, Squarespace, or Wix, the goal is not to make the page fancy. The goal is to make giving obvious, quick, and trustworthy.
HeartBridge includes an embeddable widget, hosted pages, donation forms, recurring giving, campaigns, and text-to-give. Each nonprofit connects its own Stripe account, HeartBridge is never merchant of record, and HeartBridge adds no per-gift platform fee. Stripe's standard 2.9% + $0.30 applies to each transaction.
If you are comparing setup paths, start with the page type you already use most. Then decide whether you want the donation form embedded directly on your site, or whether a hosted page makes more sense for a campaign, event, or quick launch. If you are still deciding, see features and pricing.
What should the donation widget do on your site?
A good embedded widget should make it easy for a donor to complete a gift without hunting for the next step. Keep the flow short, keep the ask clear, and keep the page focused on one action.
- Show a clear donation amount or suggested amounts.
- Make recurring giving easy to find.
- Keep the form visible without extra clicks.
- Work on your existing site pages so donors do not feel redirected into a different experience.
- Match the page purpose, such as general giving, campaign support, event registration, or sponsorships.
For many small nonprofits, the best setup is a donation page with one short message, one form, and one clear button. If you are planning a site change at the same time, our switch guide can help you think through the move before you publish anything new.
How do you embed it on WordPress, Squarespace, or Wix?
The exact clicks will depend on your website builder, but the workflow is usually the same. You create the form or widget, copy the embed code, place it on the page, and test the full donor experience from start to finish.
| Platform | Practical setup step | What to check before publishing |
|---|---|---|
| WordPress | Add the widget to a page or block where custom HTML/embed code is allowed. | Check that the form loads on desktop and mobile, and that the donate button is easy to see. |
| Squarespace | Place the widget in an embed or code area on the donation page. | Confirm the spacing, button placement, and mobile layout still feel simple. |
| Wix | Insert the widget into the page using the site editor's embed option. | Make sure the widget does not get cut off inside a narrow section. |
Before you publish, test the page as if you were a first-time donor. Check the page title, the donation amount choices, the recurring option, the payment fields, and the thank-you message. If your site has a lot of navigation links, consider removing distractions from the donation page so the form gets the attention it needs.
What should you test before asking donors to use it?
Testing is where many small teams save themselves from avoidable problems. A form can look fine in the editor and still feel awkward on a phone, or a button can be easy to miss if the page layout is crowded.
- Open the page on a phone and a desktop.
- Submit a small test gift.
- Check that the payment flow completes cleanly.
- Confirm the donor receives the expected confirmation or thank-you message.
- Verify the gift appears where your team expects it to appear for records and follow-up.
If you are concerned about donor records or migration work, review data export guidance before you make a platform change. That is especially useful when you want to keep your records organized while improving your website giving flow.
How do you keep the page simple enough to convert?
Small nonprofits usually do best with a short page and a single goal. You do not need a long explanation of every program on the same page as the form. Instead, use one brief paragraph that answers why the gift matters now, then place the widget right where donors can see it.
IRS guidance on charitable contributions and recordkeeping is a good reminder that donors and organizations both benefit from clean, accurate donation records, so the back end should be as tidy as the front end. See IRS resources on charitable contributions and nonprofit topics at irs.gov/charities-non-profits. For practical nonprofit operations guidance, the Council of Nonprofits is another useful reference at councilofnonprofits.org.
Here is a simple page formula you can use:
- Headline: Tell donors exactly what their gift supports.
- One short paragraph: Explain why now matters.
- Widget: Place the donation form immediately below the message.
- One trust cue: Add a brief note about security, receipt timing, or where funds go.
If your team wants a broader donation-page review, pair this post with A Donation Page Conversion Checklist for Small Nonprofits.
What if you also want recurring gifts, campaigns, or text giving?
That is where a donation widget becomes part of a larger fundraising system. HeartBridge also includes recurring giving, campaigns, peer-to-peer fundraising, ticketed events, volunteer management, sponsorships, a donor CRM with CSV import, smart emails, and AI features for campaign building, donor engagement suggestions, grant writing, thank-you notes, and impact reports.
For a small team, that matters because you can keep one site experience and still support more than one fundraising need. A widget can handle general giving, while hosted pages can support campaigns or event-specific asks. If you want to add mobile giving too, see text-to-give.
Do this this week
- Pick one page on your site that should become the primary giving page.
- Write a 2 to 3 sentence donation message that explains exactly what the gift supports.
- Place the widget on the page and test it on a phone before publishing.
- Submit a small test gift and confirm the receipt or confirmation flow.
- Decide whether you also need recurring giving, a campaign page, or text-to-give.
How does this affect your platform choice?
If your current setup makes it hard to embed a form cleanly, or if you are juggling multiple tools, it may be time to simplify. HeartBridge plans include Starter, which is free, Professional at $29/month, and Enterprise with custom pricing. Because each nonprofit connects its own Stripe account and HeartBridge adds no per-gift platform fee, you can keep the donation flow straightforward for donors and for your internal reconciliation.
If you are planning a move from another platform, you may also want to read what happened to Flipcause and Flipcause alternative options before you decide what to do next.
FAQ
Do I need a developer to embed a donation widget?
Not always. If your website builder supports embed or custom code blocks, a small nonprofit can often add the widget without a developer. The key is to test the page on mobile and desktop before you share it publicly.
Should I use an embedded form or a hosted donation page?
Use the embedded form when you want donors to stay on your website page. Use a hosted page when you want a cleaner standalone page for a campaign, event, or one-time appeal. Many nonprofits use both.
How much does HeartBridge charge for donations?
HeartBridge adds no per-gift platform fee. Each nonprofit connects its own Stripe account, and Stripe's standard 2.9% + $0.30 applies to each transaction.
Can I use the widget for recurring giving?
Yes. HeartBridge includes recurring giving, so you can offer donors a monthly option alongside one-time gifts.
What should I check after embedding the widget?
Check the layout, mobile display, payment flow, receipt or confirmation message, and where the gift appears in your records. A quick test gift is worth the time.
What if I am changing platforms at the same time?
Make sure you export and organize your donor data before you switch. If that is your situation, start with the export guide and then review switching steps.
Key takeaways
- An embedded donation widget works best when the page has one clear goal.
- Test the form on mobile and desktop before you invite donors to use it.
- Keep the donation page short, focused, and easy to scan.
- HeartBridge includes an embeddable widget, hosted pages, and other fundraising tools for small nonprofits.
- If you are changing platforms, handle data export and donor records before you launch the new page.
Sources
For nonprofit and donor-record guidance, see IRS Charities and Nonprofits and Council of Nonprofits. For payment processing context, see Stripe.
If you are ready to set up your giving page, register and start building your donation flow.
Frequently asked questions
Sources
IRS Charities and Nonprofits · Council of Nonprofits · Stripe
Start free on HeartBridge
No credit card required. Run your fundraising on your own Stripe account, with AI built in.
Start free on HeartBridge