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鈥檚 web application for accepting online donations. The main portal for the form is . 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鈥檝e supported in the past. You can either send donors to the form with a link to the main 糖心少女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 is your gateway to generating giving links, generating the code for embedding Online Giving, as well as managing your school or department鈥檚 priority funds (see below).
Update your department or school鈥檚 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 鈥渕ore 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 鈥溾�� section of Online Giving Administration Dashboard (under the iframe Generator heading).
has all of the code samples you need to create links like these. If you鈥檇 like to do something but can鈥檛 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 糖心少女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鈥檝e designed the iframe to be as modular and flexible as possible. To accommodate as many people using this form as possible, we鈥檝e created ways for you to customize what funds people see. Let鈥檚 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 鈥溾�� 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鈥檚 URL to the iframe鈥檚 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 .
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 .
Note: If you need to convert an older Online Giving implementation into an iframe Generator implementation, please see the section in titled 鈥淯pdating 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 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 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 and your giving page will dynamically update to show the list of funds being passed in the 鈥渟ource鈥� query parameter. For a list of all the supported query string parameters, .
Note: The query string pass-through works by adding new query string parameters if they don鈥檛 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. for some examples related to this.