Better GivingDeveloper

Donate Button

Add a donate button that opens the form in a dialog when clicked.

See it in action on a demo page

This approach is great for call-to-action buttons, headers, or sidebars where you want to keep the page clean while making donations easily accessible.

Button color
Border radius

120 × 40

|
<button
  onclick="document.getElementById('donate-dialog').showModal()"
  style="width: 120px; height: 40px; background: #2563eb; color: white; border: 0; border-radius: 6px; cursor: pointer; font-weight: 500"
>
  Donate
</button>

<dialog id="donate-dialog" style="padding: 0; border: 0; border-radius: 8px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">
  <form method="dialog" style="display: flex; justify-content: flex-end">
    <button style="font-size: 24px; position: absolute; right: 8px; background: none; border: none; cursor: pointer">
      &times;
    </button>
  </form>
  <iframe
    title="donation form embed"
    src="https://better.giving/forms/E7JXrhQifQrS9XGw2CFNm"
    allow="payment"
    width="100%"
    height="500"
    style="max-width: 700px; width: 90vw"
  ></iframe>
</dialog>

How to embed on your platform

WordPressWixSquarespaceWebflowWeeblyShopifyGoDaddyBloggerGhostHubSpot