This guide explains how to embed our donation forms on your website. You have three installation options, depending on your content management system and how you want the form to appear.

All three options support automatic resizing — the form grows and shrinks as the donor selects amounts, opens payment options, or triggers validation messages, so there are never scrollbars inside the form.

Pick the option that fits your needs:

The first two options share the same script file. You include it once per page and use as many embeds as you like.

Note that in these code examples, you will replace

with the actual URL of your donation form.

Add a button or link with the data-givingtech-modal attribute. When clicked, the donation form opens in a centered modal with a darkened backdrop.

You can use any element — button, link, or styled <div>:

The modal closes when:

If you'd rather open the modal from your own code (for example, after a user finishes reading a video), use the GivingTech.openModal() function:

To close it programmatically:

Paste this anywhere on your page where you want the donation form to appear:

html

The form will render at the full width of the surrounding container and auto-resize as the donor interacts with it. The <script> tag only needs to appear once per page, even if you have multiple donation forms or modal buttons.

Use this only if your CMS will not let you include a <script> tag. It's a single self-contained <iframe> element that loads our resize handler on its own:

html

This version is functionally equivalent to Option 2, but doesn't require a separate <script> tag — the iframe boots the script itself once it loads. Note that this option does not support modal popups or dynamic content (forms added to the page after initial load).

Our embed script automatically forwards tracking parameters from your page URL into the donation form, so attribution data — where the donor came from, which campaign brought them in, which ad they clicked — is preserved through the donation.

If a donor lands on a page like:

…and that page contains your embed snippet, the donation form URL is automatically rewritten to:

You don't need to do anything for this to work. It happens automatically.

If you hardcode a parameter in your embed URL, it takes precedence over whatever's on the parent page URL. For example, given this embed:

…even if the parent page URL has ?utm_campaign=spring2026, the donation form will use utm_campaign=evergreen. This lets you pin certain values for specific landing pages without worrying about parent-page params overwriting them.

The form doesn't appear. Check the browser console for errors. Make sure the <script> tag is included on the page (or use Option 3 if your CMS strips scripts). Verify the URL in data-givingtech is correct and uses HTTPS.

The form appears but doesn't resize. The most likely cause is that your CMS or theme is loading the form in a different iframe or container. Confirm that the iframe's src is pointing to your donation form

The modal doesn't open when I click the button. Confirm the <script> is loaded (check Network tab in browser dev tools). If you have a JavaScript framework that prevents default click events globally, you may need to call GivingTech.openModal(...) from your own click handler instead of using data-givingtech-modal.

UTM parameters aren't carrying through. Check the actual URL in the browser address bar — many sites strip UTMs after capturing them to a cookie or analytics tool. If your site does this, hardcode the values into the embed URL itself, or use server-side rendering to inject them.

The form looks too narrow. The form fills 100% of its parent container's width. If you want a specific maximum width, wrap it:

If you run into any issues that aren't covered here, please contact us by live chat and provide us with: