Publish an Embedded Donate Button

Goal: Put an Ayuna-powered donation form on your affiliate's website so donors can give without leaving your domain or being routed somewhere unfamiliar.

What "embedded" means

Ayuna provides hosted donation pages designed to be embedded inside an <iframe> on your affiliate's website. The donor sees your branding (because the iframe sits inside your page), but the form itself is served by Ayuna so:

• Card data never touches your website (PCI scope stays with Ayuna and Finix)
• Donations land directly in your Ayuna database
• Receipts generate automatically
• The form is always up to date as Ayuna improves

Embed options

There are two primary embed shapes — pick based on the surrounding layout:

• Inline form (/embed/donate) — a full donation page rendered directly inside the iframe: amount selector, payment method, optional tribute, optional recurring, fund / campaign selection. Use when the embed is the donate page.
• Donate Button (/embed/donate-simple) — a small "Donate Now" button that, when clicked, opens the full donation form in a popup window (not the iframe). Use when you want a discreet button on a page that already has its own copy and design. The popup is required because Finix's payment widget cannot run inside an iframe — clicking the button breaks out into a normal browser window so card capture works.

Behind the scenes, the popup that the simple button opens lives at /embed/donate-simple/form. You don't embed that path directly — the button page constructs and opens it for you with the right query parameters.

Generating the snippet from the admin

The fastest way to get a working snippet is the Integrations page in the admin app (Admin → Integrations). It exposes copy-paste iframe HTML for every public-facing form Ayuna provides, with your affiliate_id already filled in:

Form	Path	When to use
Public Donation Page	/donate	A hosted donation page you link to (no iframe needed)
Donation Button (Simple)	/embed/donate-simple	Discreet "Donate Now" button anywhere on your site
Sponsor Inquiry Form	/embed/sponsor-inquiry	Capture sponsorship interest
Sponsorship Packages	/embed/sponsorship-packages	Browseable list of active packages with signup links
Donation Pickup Request	/embed/donation-pickup	Schedule a ReStore donation pickup (currently in beta — flagged "Coming Soon" in Integrations)
Volunteer Signup	/embed/volunteer-signup	Volunteer registration (covered in the Volunteer Guide, not this doc)

For affiliate-scoped pages the admin tool also offers deep-link options — for example, a Donation Button can be pre-scoped to a campaign, project, or fundraising event, and the Sponsorship Packages embed can be scoped to a package group, fundraising event, campaign, or project.

How to embed

On the page where you want the form, drop in an iframe:

<iframe
  src="https://app.ayunacore.com/embed/donate"
  width="100%"
  height="800"
  frameborder="0"
  title="Donate to {Affiliate}"
></iframe>

The iframe height matters — too short and the form scrolls awkwardly inside the frame. 800px is a reasonable starting point; adjust based on your form's content.

Pre-filling campaign, project, or event

Embed URLs accept query parameters that pre-select where the donation goes:

• affiliate_id — required for every embed (set automatically when you copy from Integrations)
• campaign_id — pre-select a campaign
• project_id — pre-select a construction project
• fundraising_event_id — pre-select a fundraising event
• amount — pre-fill the donation amount
• button_text — custom button label for /embed/donate-simple (default: "Donate Now")
• button_style — default, outline, or secondary

Example: a Donate Button placed on a campaign-specific landing page on your website:

https://app.ayunacore.com/embed/donate-simple?affiliate_id=atlanta&campaign_id=abc-123&amount=100&button_text=Give%20to%20Holiday%20Match

The donation lands tagged to the campaign / project / event so reporting attributes it correctly.

Branding

The embedded form respects your affiliate's color palette and logo (configured in your affiliate's admin settings). The donor sees an experience that looks like your affiliate, even though the form is served by Ayuna.

If specific elements look off, work with your team to adjust the affiliate-level theme — don't try to override styles via CSS in the parent page (CSS doesn't cross iframe boundaries by design).

Where to place it

Effective placements:

• Your "Donate" page in the main navigation
• A sidebar widget on every page
• A modal triggered by a "Donate Now" CTA
• A campaign landing page (with the campaign param pre-filled)
• A footer call-to-action

Mobile

Embedded forms are responsive and work on mobile. Test the iframe placement on mobile — sometimes you need a separate height or full-screen treatment to give the form room.

Donor experience

A donor giving through your embedded form:

1. Sees the form on your website
2. Enters amount, payment method, optional tribute or recurring details
3. Submits — payment processes through Finix
4. Sees a confirmation in the iframe
5. Receives an email receipt within minutes

The donation record is created in Ayuna with the source flagged as embedded, so reporting can attribute revenue to your website channel.

Tracking website conversions

For analytics, the parent page can fire its own analytics event when the iframe signals a successful donation (configurable). Ask your team if you need this — it's how you'd connect website visits to donations in Google Analytics, etc.