Donation widgets provide a seamless way for people to donate directly from your website. When donors click the "Donate" button, a popup window appears, allowing them to contribute quickly and easily without leaving your page. This offers a fast, convenient donation experience for your supporters.
Here is a video walkthrough on how to create a donation widget. A written version of the video is included below.
Creating a Donation Widget
Navigate to the Online Donation Forms module by going to the Online Donations tab in the Donations section. Then, click on "Online Donation Forms." From this page, you can create a donation widget by clicking the green plus (+) button and selecting the "New Donation Widget" option.
The lefthand side will be information for the widget that you will fill out, and the righthand side will show a preview of what the donation window will look like once completed.
Choose a name for your widget to get started. (the field at the top of the left-hand side), and add a brief description. This part won't be visible to donors, but will be the widget name that appears in your Online Forms page in Aplos. Below the name are three tabs labeled Donation, Donor, and Payment that is where you will input all the information needed for your widget to function to your needs. It is recommended to start in the donations tab.
Step 1: Donation Amounts Setup
Here you can provide custom donation amounts for your donors to select. The 'Default' checkboxes will let you choose which amount will be the default option. To edit the existing amounts given; simply click the pencil icon under Actions for any option you wish to change. If you want to delete an amount you can select the red trashcan. You are also able to add additional amounts if you need. You do have the ability to include descriptions of each donation amount, if you'd like donors to create custom amounts, and allow for one-time donations, or recurring donations.
Purposes
You can add and remove purposes if you would like the for donors to have the option to donate to specific purposes. At least one purpose is required, and all donations will default to this one purpose if no others are chosen. If you haven't set up your purposes yet, you will want to check out this resource to help get you started: How to Use Purposes in Aplos.
Below the Purposes box are additional options you can include in your widget. You can give donors the option to cover the transaction fees associated with online donations, or allow them to include a personalized note with their contribution.
Step 2: Selecting Required Donor Information
The Donor tab relates to customizing what information you wish to collect about your donors. This will require them to fill out certain boxes before finalizing their donation, whether that be their first name, last name, email, etc.
The three options mentioned are the minimum required and cannot be deleted. You can add other fields to be filled out like your own custom fields, which can be left optional by keeping the 'Required' checkbox blank. If you wish to delete and fields you added you can so so by selecting the trash can that appears next to them. You will see an option to 'Add Full Address' at the bottom, which will give donors the ability to include their address on the donation.
Step 3: Payment Information
The final tab, labeled "Payment," lets you select the payment methods you want to offer donors. You can choose to accept donations via credit card, ACH, or both. Be sure to set up your merchant account before activating your donation widget. For guidance on setting up your merchant account, refer to our AplosPay Setup Guide.
Once you're finished, click the "Save" button in the top right corner, above the preview window, to save your changes. Saved widgets will appear in the "Donation Widgets" list. To make any adjustments, simply click the Actions icon on the far right of the widget. The Actions menu also lets you add the widget to your website, disable it, or delete it entirely.
Adding a Donation Widget to Donor's My Aplos Portal
Donors who have given to your organization before can donate again directly in their My Aplos Portal. To accomplish this your organization will need to provide a donation widget to be displayed in their My Aplos. This will allow donors to quickly give again to your organization. To display your widget in My Aplos, locate the Donation Widgets list at the bottom of the Online Donation Form page. Pick one of the widgets you have already created and click the Actions symbol on the far right side. From here, click Show in My Aplos. This will provide the donor with a tool to easily access the widget and give. You can always disable this function by following the same action and clicking Hide in My Aplos.
Adding a Donation Widget to Your Website
On the Online Donations Forms page. Locate the Donation Widgets list at the bottom of the page. Pick one of the widgets you have already created and click the Actions symbol on the far right side. From here, click Add to My Page.
The following page will provide you with two options regarding donation buttons. The first option will visually replicate the look of existing buttons on your website. The second option will provide you with buttons designed by Aplos. If you would like to use one of Aplos's buttons, simply click on a button you like, and a code for that button will be generated in the field below. Click on the Copy to Clipboard button below the field of which button option you prefer.
The code you copy will then be added to your website's HTML code.
Website Builders
Aplos
Available in:
- All Plans
To set your donation widget on your Aplos website, you'll first want to view and edit the page you wish to add the widget. Next, locate and select a content block on your site that will hold your widget. Once selected, an "+" button will appear below. Click the plus sign "+" and a drop-down menu will appear. Click More and then select the HTML, JS, CSS code block. Finally, on the code block, click Settings and paste the donation widget code. Then click OK.
WordPress
Available in:
- Business Plan
- eCommerce Plan
In WordPress, there are two ways to view your edit page once in the edit tool. These are tabs labeled Visual and Text on the top right corner of the edit field. Normally, you would make edits through the default Visual version, but copying and pasting the button code into Visual won't work, so you will have to go into the Text tab. This tab will display what is written in the article along with the HTML code for the page. This may look confusing if you're unaccustomed to seeing HTML code, but simply search for the place on the page where you want the button, then use the paste tool to paste the button code you already copied.
Once you update or publish the page, the button will appear in your article. Click on it to see the widget popup that will ask for donations.
Squarespace
Available in:
- Business Plan
- Commerce Plan
In Squarespace, when editing your page you will want to add your donation widget using the Code Block tool. This is found in the Content Block Menu on the top right corner of the page you are editing. Select the Code Block and place it on your page. From there, copy and paste the widget code into the block and select Apply. Once you publish the page, the button will appear on your page. For more information on Code Blocks, check out Squarespace's resources on Code Blocks.
Weebly
Available in:
- All Plans
In Weebly, to add a donation widget to your page you will want to edit the page you wish to place the widget on. From there, select the content blocks menu and drag an Embed Code block to where you would like it on the page. Click on the block and select the Edit Custom HTML option. Paste the copied code into the block and save. For more information on Embed Code Blocks, check out Weebly's Embed Code guide.
Wix
- Not Available