Add a Donate button to a web page

Provide donors an easy way to donate by adding a Donate Now button on any page of your website.

When selected, a Blackbaud Checkout modal opens your specified donation form for quick checkout.

Tip: To learn more about Blackbaud Checkout, see Legacy Blackbaud Checkout.

You can place this button anywhere on any page hosted on Luminate Online or other domains.

To add a custom image or logo at the top of the modal, see Step 11 below.

  1. Choose a web page on which to place a Donate now button.

  2. Add the domain of that page to Luminate Online's framed content allow list:

    1. Go to Setup > Site Options.

    2. Select Go to display all options.

    3. Search (Ctrl + F) to locate SEC_CSP_FRAME_ANCESTORS_DOMAINS, then enter the domain of the web page that will include the Donate now button. Use a space (not comma) between multiple domains.

      Note: When this option hasn't been used before, the initial character limitation is 255 characters. To add domains in excess of 255 characters, enter at least 30 characters in the text field and Save. This raises the limit to 1000 characters.

    4. Select Finish.

  3. In Donation Management > Fundraising, create your donation form as described in Manage Donation Forms, or open (choose Edit) a published donation form.

  4. Select the Publish the Donation Form step.

  5. Under the Embed a Donate Button step, copy the code from Step 1.

  6. Open the content editor for your organization's web page.

  7. In the HTML of your web page, paste the copied code direcly above the closing </head> tag.

  8. On Publish the Donation Form, under the Embed a Donate Button step, copy the code from Step 2.

  9. In the HTML of your web page, paste the code within the <body></body> tags wherever you want the Donate now button to display.

  10. (Optional) Change the text of your Donate Now button to something else that you prefer, such as Donate or Make a Difference.

  11. (Optional) Add a custom image or logo at the top of the Blackbaud Checkout modal by including a header-image URL. Reference either an image from the Luminate Online Image Library or from another site. For example: <button luminate-donate-button site-url="https://myorg.org/site/" donation-form-id="1021" header-image="URL of the image file">Donate Now</button>

  12. Save your page.

  13. Refresh your web page and verify the functionality of your button and form.

    Tip: The styling of your Donate Now button comes from the CSS of your page.