Widgets

Embeddable Donation Components

Amply widgets let you add donation functionality to any website with a single code snippet. Drop them into your HTML and donors can give directly from your page — no redirects, no iframes, no friction.

Available Widgets

Amply provides two widgets, both built as standard Web Components:

Widget	What It Does
<amply-form>	Inline donation form embedded directly on your page
<amply-button>	Styled button that opens a donation form in a modal overlay

Both widgets handle the full donation flow: amount selection, donor details, and payment via Stripe.

Installation

Add the Amply widget script to your page, ideally before the closing </body> tag:

<script src="https://widgets.amply-impact.org/v1/amply.js"></script>

That is the only dependency. The script registers both <amply-form> and <amply-button> as custom elements. You can then use them anywhere in your HTML.

Note: The CDN URL above is the planned production URL. If you are setting up widgets during early access, your Amply contact will provide the current script URL.

Donation Form

The <amply-form> widget renders an inline donation form directly on your page. Use it when you want the form to be visible without any user interaction — for example, on a dedicated donations page or in a sidebar.

<amply-form
  organization="your-org-slug"
  amounts="1000,2500,5000,10000"
  theme="light">
</amply-form>

The form adapts to the width of its container. Place it inside any block-level element and it will fill the available space.

Donation Button

The <amply-button> widget renders a styled button. When clicked, it opens a modal overlay containing the donation form. Use it when you want to offer donations without dedicating page space to a full form — for example, in a navigation bar or call-to-action section.

<amply-button
  organization="your-org-slug"
  text="Support Our Cause"
  theme="light">
</amply-button>

The button label defaults to "Donate Now" if you omit the text attribute.

Attributes

Both widgets accept the same attributes, with one exception noted below.

Attribute	Required	Default	Description
organization	Yes	—	Your organization slug, found in your Amply dashboard
amounts	No	1000,2500,5000,10000	Preset donation amounts in cents, comma-separated
theme	No	light	Visual theme: light, dark, or minimal
primary-color	No	—	Override the primary brand color (hex value, e.g. #05668D)
api-url	No	Auto-configured	API endpoint URL (only needed for non-standard setups)
stripe-key	No	Auto-configured	Stripe publishable key (only needed for non-standard setups)
text	No	Donate Now	Button label (<amply-button> only — ignored by <amply-form>)

About amounts: Values are in cents to avoid floating-point issues. 1000 = $10.00, 2500 = $25.00, and so on. Donors can always enter a custom amount regardless of the presets you configure.

About api-url and stripe-key: In production, these are configured automatically by the widget script. You should only set them explicitly if your Amply contact instructs you to.

How a Donation Works

When a donor interacts with either widget, the flow is:

1. Organization info loads — The widget fetches your organization's details from the Amply public API.
2. Amount selection — The donor picks a preset amount or enters a custom one. They can optionally choose to cover transaction fees.
3. Donor details — The donor provides their email, name, and an optional message. They choose whether their donation appears publicly or anonymously.
4. Payment — The donation is created via the Amply API. Stripe's Payment Element loads for secure card entry.
5. Confirmation — Payment is confirmed and the donor sees a success screen.

All donations made through widgets are tagged with the source widget in your dashboard analytics, so you can distinguish them from donations made on your hosted Amply page (source: website).

Theming

Built-in Themes

Three themes are available out of the box:

• light — White background, dark text. Works on light pages.
• dark — Dark background, light text. Works on dark pages.
• minimal — Reduced chrome, blends into the host page.

<amply-form organization="your-org-slug" theme="dark"></amply-form>

Custom Brand Color

Override the primary color to match your brand:

<amply-form
  organization="your-org-slug"
  primary-color="#2563eb">
</amply-form>

This affects buttons, focus rings, and accent elements within the widget.

Style Isolation

Widgets use Shadow DOM, which means:

• Your page styles do not affect the widget. Your CSS will not accidentally break the donation form.
• Widget styles do not affect your page. No CSS leakage into your site.
• No framework conflicts. The widget works alongside React, Vue, Angular, WordPress, or plain HTML without interference.

Complete Examples

Dedicated Donation Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Support Our Mission</title>
</head>
<body>
  <h1>Support Our Mission</h1>
  <p>Every donation makes a difference. Choose an amount below.</p>

  <div style="max-width: 480px;">
    <amply-form
      organization="your-org-slug"
      amounts="1000,2500,5000,10000"
      theme="light">
    </amply-form>
  </div>

  <script src="https://widgets.amply-impact.org/v1/amply.js"></script>
</body>
</html>

Button in a Navigation Bar

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <amply-button
    organization="your-org-slug"
    text="Donate"
    theme="minimal"
    primary-color="#e63946">
  </amply-button>
</nav>

<script src="https://widgets.amply-impact.org/v1/amply.js"></script>

Multiple Widgets on One Page

You can place multiple widgets on the same page. Each operates independently:

<!-- Sidebar button -->
<amply-button organization="your-org-slug" text="Quick Donate"></amply-button>

<!-- Full form further down the page -->
<amply-form
  organization="your-org-slug"
  amounts="2500,5000,10000,25000"
  theme="dark">
</amply-form>

<script src="https://widgets.amply-impact.org/v1/amply.js"></script>

Only include the script tag once, regardless of how many widgets you use.

Technical Details

• Size: ~10 KB gzipped. Stripe.js loads separately and is managed by the widget.
• Standards: Built on the Web Components standard (Custom Elements + Shadow DOM).
• Compatibility: Works in all modern browsers (Chrome, Firefox, Safari, Edge).
• Donations: One-time donations only. Recurring donations are planned for a future release.

Troubleshooting

Widget does not appear

1. Confirm the <script> tag is present and the URL is correct.
2. Check that the organization attribute matches your slug exactly (case-sensitive).
3. Open your browser's developer console and look for error messages.

Widget appears but looks broken

1. Make sure the widget's container has a reasonable width (at least 300px).
2. Try a different theme value to rule out color conflicts with your page background.

Payment fails

1. Verify your organization is fully set up in the Amply dashboard (Stripe account connected).
2. Check the browser console for specific error messages from Stripe or the Amply API.

Coming Soon

Future widget types are planned but not yet available:

• Progress Bar — Display campaign or fundraising goal progress.
• Donor Wall — Show recent supporters (with their consent).
• Campaign Card — Embeddable campaign summary with donate action.
• Recurring Donations — Monthly and annual giving options within existing widgets.

---

Related:

• Integrations Overview
• Plugins
• API Documentation