University Advancement provides a quick and easy way to embed an online giving form on your website.
The form will allow your visitors to select a fund and make a gift with a major credit card. The form is very customizable and can fit a variety of needs and uses.
What is the online giving form?
The online giving form is the UW’s web application for accepting online donations. The main portal for the form is https://washington.edu/giving/make-a-gift. Donors can use it to search for funds, see the current needs for a given school, college or department and they can log in to see a list of funds they’ve supported in the past. You can either send donors to the form with a link to the main UW Foundation portal, or you can install the form onto your own website, so donors never have to leave your site in order to make a gift.
Fund self serve
The Online Giving Administration Dashboard is your gateway to generating giving links, generating the code for embedding Online Giving, as well as managing your school or department’s priority funds (see below).
Update your department or school’s priority funds
To update your priority funds, proceed to the Fund Maintenance section of the Online Giving Administration Dashboard. Next, use the search box to search for the school or department you would like to manage. After the list of funds is loaded, simply drag and drop the funds in the order you would like them to appear on Online Giving. You can also drag and drop funds to move them from “priority funds” to “more funds”.
If you encounter a permission error, please contact advsti@uw.edu and we can look at setting you up with the correct permissions for your department.
Change fund names and descriptions
To update fund names and descriptions please contact giftfund@uw.edu.
Creating giving links
You can create links to the giving form and display virtually any combination of funds. Some examples of things you can do include…
- Show Department Priority and/or Other funds
- Show any single or random group of funds
- Skip to the Donation Amount or Donor Information steps with funds already in the basket
- Pre-populate fields like Name, Address, Comments, etc.
- Add an appeal code to better track your gift
In addition to manually building your giving links, we also have a tool that helps to automate the creation of these links. This tool can be found by navigating to the “Generate a Giving Link” section of Online Giving Administration Dashboard (under the iframe Generator heading).
Appendix A of the PDF guide has all of the code samples you need to create links like these. If you’d like to do something but can’t figure out how to do it from this document, please contact the STI team at advsti@uw.edu.
Generate a short/friendly URL for your giving link
If you like a more user-friendly link which is easier to share, you can submit a request to UW Marketing using their Short URL Request Form.
Embedding the form
Our Online Giving Form can be loaded onto your site using an iframe. You can think of an iframe as a web browser on a page. You can place it the same way you would place an image, but instead of loading an image, it loads a remote website. That lets you load the Online Giving Form so people can make their gift without ever leaving your site.
Note: If you are using a domain that is not uw.edu or washington.edu, you will encounter cookie and certificate errors. Please contact us at advsti@uw.edu so we can work with you to get it going.
How to embed the iframe
We’ve designed the iframe to be as modular and flexible as possible. To accommodate as many people using this form as possible, we’ve created ways for you to customize what funds people see. Let’s look at how you can implement it on your site.
Step 1: If the website where you would like to embed Online Giving is not on a washington.edu or uw.edu domain please contact advsti@uw.edu as there are additional configuration steps needed for Online Giving to work properly. Otherwise, please proceed to Step 2.
Step 2: Head over to the “Embed Online Giving” section of the Online Giving Administration Dashboard (under the iframe Generator heading). This tool will allow you to choose various configurations for prepopulating the iframe with your desired funds, appeal code, amounts, etc. It will also handle automatic resizing of the form as well as passing query parameters down from your website’s URL to the iframe’s URL. After choosing your configuration, the tool generates a small amount of code (JavaScript and HTML) which you can then add to your site to display the iframe. More information can be found by following the above link and in Appendix C of the PDF guide.
Step 3: After generating your iframe code with the iframe Generator, add the generated code to your website and you are good to go. More information about the Online Giving iframe Generator can be found in Appendix C of the PDF guide.
Note: If you need to convert an older Online Giving implementation into an iframe Generator implementation, please see the section in Appendix C of the PDF guide titled “Updating Older Online Giving Implementations.”
Deprecated: Copying and pasting the iframe tag directly into your html has been deprecated in favor of the iframe generator implementation.
Automatic resizing of the iframe
The Online Giving iframe starts at a height of around 763px high. As the donor progresses towards checkout, the iframe height can grow to as high as 1400px. The iframe looks best when its height is sized properly and this is where automatic resizing comes in. If you are using the iframe Generator implementation mentioned in the section above, there are no additional steps needed for automatic resizing. Otherwise, please see the section in Appendix C of the PDF guide on how to update older Online Giving implementations into an iframe Generator implementation.
Deprecated: Automatic resizing via the direct embedding of the iframe tag has been deprecated in favor of the iframe generator implementation. Prior versions used the xdtunnel.html file and the iframe onload event which set document.domain to washington.edu
Optional query string pass-through
If you wish to use your giving page with many different Fund Display Options, the iframe Generator implementation will automatically handle query string pass-through for you.
Example scenario: You have created a giving page on your domain with a URL of https://artssci.washington.edu/giving and have embedded the Online Giving form there. Your implementation is configured to show the default list of funds for your department. However, occasionally you would like to send donors to this same page with just a single fund or a slightly different list of funds displayed. With the automatic query string pass-through, you can send someone a link such as https://artssci.washington.edu/giving?source_typ=3&source=LIBDIS,BUSDIS and your giving page will dynamically update to show the list of funds being passed in the “source” query parameter. For a list of all the supported query string parameters, see Appendix A of the PDF guide.
Note: The query string pass-through works by adding new query string parameters if they don’t already exist, or by replacing the values of ones that already do. However, it does not remove any query string parameters. Depending on your implementation, you may need to pass null values from some parameters when you need them to be ignored. Please see Appendix C of the PDF guide for some examples related to this.