> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wegive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding a Checkout on Your Website

> WeGive Help Center article: Embedding a Checkout on Your Website

WeGive checkouts can be added to any website so donors can give without leaving your page. There are three ways to implement a checkout: as a direct link, an inline embed, or a pop-up. This article walks through each method and the options available to you.

***

## Getting Your Embed Code

1. Open the **Checkout** you want to embed from your WeGive dashboard.
2. Click the **Implement** button.
3. A dialog will appear with three tabs: **Link To**, **Embed**, and **Pop-Up**. Choose the method that fits your website.

Before copying your code, you can configure several options directly in the Implement dialog:

* **Campaign** — Associate the checkout with a specific campaign. All donations made through this checkout will be aggregated into the selected campaign.
* **Designation** — Pre-select a fund so donors don't have to choose one themselves.
* **Payment Processor** — If your organization has multiple payment processors connected (e.g., Payrix, Stripe, Finix, or Braintree), you can select which one this checkout should use.
* **Test Mode** — Toggle this on to generate a test URL that processes test transactions instead of real ones. Test URLs route to a `/test` path and include a `preview=true` parameter.
* **Single Page** — Override the checkout layout to display as a single-page form instead of the default multi-step flow.
* **Transparent Background** — Remove the checkout background so it blends into your website's design (available for pop-up implementations).
* **UTM Parameters** — Expand the UTM fields to add `utm_source`, `utm_medium`, `utm_campaign`, `utm_term`, and `utm_content` for marketing attribution. These values are stored on each checkout session and can be used to track which channels drive donations.

Once you've configured your options, copy the generated code and paste it into your website.

***

## Method 1: Direct Link

The simplest option. You get a URL that you can use anywhere — in a button, a text link, an email, or a social media post. Clicking the link takes the donor to a full-page hosted checkout.

Your link will follow this format:

```
https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}
```

If you've associated a campaign, the URL will include it in the path:

```
https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}/{campaign-slug}
```

Any UTM parameters or other options you selected will be appended as query parameters.

***

## Method 2: Inline Embed (iframe)

The embed option generates an iframe you can paste directly into your website's HTML. The checkout form renders inline on your page, so donors can complete their gift without navigating away.

The generated code looks like this:

html

```
<iframe  id="inlineFrameExample"  allowpaymentrequest="true"  allow="payment"  title="Inline Frame Example"  width="100%"  height="100%"  src="https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"></iframe>
```

### Key attributes

* `allowpaymentrequest="true"` and `allow="payment"` enable the browser's Payment Request API, which is required for Apple Pay and Google Pay to function inside the iframe.
* `width` and `height` are set to `100%` by default, meaning the iframe will fill whatever container you place it in. You should wrap it in a parent element with a defined height to control the size on your page.

### Tips for iframe embeds

* Set a container height of at least **700px** for multi-step checkouts to avoid internal scrolling.
* If you're using a single-page checkout layout, you may need a taller container since all fields are shown at once.
* Test on mobile devices to make sure the iframe is scrollable and the payment step is accessible.

***

## Method 3: Pop-Up

The pop-up option adds a script to your page that opens the checkout in a modal overlay when a donor clicks a button. This keeps your page layout clean while still providing the full checkout experience.

The generated code includes two parts — a button and a script tag:

html

```
<button id="{checkout-id}-activator">Give Now</button><script  id="wegive-popup"  src="https://app.wegive.com/dev/wegive-popup.js"  button-id="{checkout-id}-activator"  element-url="https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"></script>
```

### How it works

* The `button-id` attribute tells the script which button on your page should trigger the pop-up. It matches the `id` of your button element.
* The `element-url` attribute is the full checkout URL, including any campaign, designation, UTM, or processor parameters you configured.
* When the donor clicks the button, the script opens a modal overlay containing the checkout.

### Using transparent background

If you enabled **Transparent Background** in the Implement dialog, the script tag will include an additional attribute:

html

```
<script  id="wegive-popup"  src="https://app.wegive.com/dev/wegive-popup.js"  button-id="{checkout-id}-activator"  element-url="https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"  background="transparent"></script>
```

This removes the default background from the pop-up overlay so you can style it to match your site.

### Customizing the trigger

You don't have to use a `<button>` element. Any HTML element with the matching `id` will work — a link, an image, a div, etc. Just make sure the `id` matches the `button-id` attribute on the script tag.

***

## URL Parameters Reference

You can manually append query parameters to any checkout URL (link, embed, or pop-up) for additional control:

* `single_page` — Set to `true` to force the single-page checkout layout.
* `preview` — Set to `true` to load the checkout in preview/test mode.
* `designation` — Pre-select a specific fund or designation.
* `campaign` — Associate the donation with a campaign for tracking. **Takes the campaign's numeric WeGive ID, not its name or Salesforce ID** (e.g. `campaign=460045`, not `campaign=Spring%20Appeal`) — an unresolvable value is flagged rather than silently dropped, so the donor isn't redirected away from your configured checkout over a bad campaign parameter. If you only have a campaign's slug (not its numeric ID) on hand, use `campaign_slug` instead — it resolves the same way.
* `campaign_slug` — Alternative to `campaign`: associates the donation with a campaign by its slug instead of its numeric ID.
* `payment_processor` — Specify which connected processor to use (e.g., if you have multiple Payrix or Stripe accounts).
* `utm_source` — Marketing attribution: the source (e.g., `website`, `newsletter`).
* `utm_medium` — Marketing attribution: the medium (e.g., `email`, `cpc`).
* `utm_campaign` — Marketing attribution: the campaign name (a free-text marketing label, independent of the `campaign`/`campaign_slug` parameters above — one associates the donation with an actual Campaign record for reporting/Salesforce purposes, the other is just a tracking tag).
* `utm_term` — Marketing attribution: the paid search keyword.
* `utm_content` — Marketing attribution: used to differentiate ad variations.

### Example with parameters

```
https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}?single_page=true&utm_source=website&utm_medium=header_button
```

***

## Dynamically Forwarding URL Parameters Into an Inline Embed

The inline embed's `src` attribute (see Method 2 above) is a single fixed URL — if you paste the same embed code on multiple pages, or reuse one embed across several marketing emails, every donor who loads that page gets the exact same hardcoded parameters. That's fine when a checkout's campaign/designation/UTM values never change, but it breaks the common case of sending several emails to the same landing page and wanting to track each email separately (e.g. `utm_content=Email1` vs. `utm_content=Email2`), since the embed itself can't read the values from the page's own URL on its own.

To forward parameters from the page's URL into the embedded checkout dynamically, add a small script alongside the iframe that copies the relevant query parameters at page-load time, before the iframe's `src` is set:

```html theme={null}
<iframe
  id="wegive-checkout"
  title="Donate"
  allowpaymentrequest="true"
  allow="payment"
  width="100%"
  height="100%"
></iframe>

<script>
  const checkout = new URL(
    "https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"
  );
  const pageParams = new URLSearchParams(window.location.search);

  [
    "utm_source", "utm_medium", "utm_campaign",
    "utm_content", "utm_term", "utm_id",
    "amount", "recurring", "frequency", "campaign", "campaign_slug", "designation"
  ].forEach(function (key) {
    if (pageParams.has(key) && !checkout.searchParams.has(key)) {
      checkout.searchParams.set(key, pageParams.get(key));
    }
  });

  document.getElementById("wegive-checkout").src = checkout.href;
</script>
```

This forwards any of the listed parameters present on the page's own URL (e.g. `yoursite.org/give?utm_source=email&utm_content=Email3`) into the embedded checkout, without hardcoding them into the embed itself — so the same embed code works across every email/campaign variant; only the links you send out need to differ. Any parameter already set directly on the checkout URL (e.g. a fixed `campaign`) is left alone by the script and takes precedence — so leave campaign-specific or email-specific values out of the base checkout URL if you want the page's own URL to supply them instead.

***

## Tracking Embedded Checkout Performance

WeGive automatically tracks checkout sessions for embedded checkouts, including whether the checkout was loaded via an iframe. You can view this data in the **Performance** tab of your checkout, which shows session flow, step progression, drop-off points, and conversion rates. UTM parameters are captured per session so you can attribute donations to specific marketing channels.

***

## Environments

If you are testing on a sandbox account, URLs will point to the sandbox environment:

```
https://app.sandbox.wegive.com/{your-org-slug}/checkout/{checkout-slug}
```

Make sure to update your embed code to use the production URL (`https://app.wegive.com/...`) before going live.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.