Skip to main content

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​

Three primary embed pages:

  • Embedded donate form (/embed/donate) — full donation experience: amount selector, payment method, optional tribute, optional recurring, fund / campaign selection
  • Embedded simple donate (/embed/donate-simple) — a streamlined version optimized for high conversion: minimal fields, fast path to "Done"
  • Embedded simple donate form (/embed/donate-simple/form) — just the form portion of the simple flow, ideal for placing inside a wider page layout

Pick based on what surrounds the embed:

  • Use /embed/donate when the embed is the whole "Donate" page on your website
  • Use /embed/donate-simple when you want a fast donate experience inside a sidebar or modal
  • Use /embed/donate-simple/form when you have your own copy / context above and just need the form

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 or fund​

You can pre-fill the campaign or fund the donation goes to by including it in the iframe URL:

https://app.ayunacore.com/embed/donate?campaign=holiday-match-2026

Useful for embedding a campaign-specific donate form on a campaign landing page.

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.