Boost recurring donations this giving season with the upsell prompt!With the Donations app, you are able to embed a donation page into a website or websites of your choosing using code available to you within the Soapbox administrator.
To access the embed code for a give Donation page:
- Open the Donation page you wish to embed
- Click the Integration tab
- Scroll down to the Donation Page Embed Code section
- Copy the code provided
- Click Cancel to exist the Donation page
Add the embed code into the site or sites of your choosing.
Understanding what portions of the Donate page will be displayed on the parent page
The Donation page will render only the main page content and not include the header or footer of the Soapbox site.
Altering the height of iframe for the embedded Donation page
By default, the iframe containing the embedded Donation page will fill 100% of the container in which it is placed on the parent page. If you wish to explicitly set the height of the iframe to a specific pixel height, you can do so by adding a DIV around the embed code provided like this:
<div id="embed-container" style="height:1000px">
<div id="sbx-widget-donate-form"></div>
<script src="https://myorg.secure.stagenonprofitsoapbox.com/donate/widget/1?form" crossorigin="anonymous"></script>
</div>
Accepting Apple Pay in an embedded Donation page
Donors using Safari 17 or later on a Mac, or iOS 17 or later on an iPhone or iPad, can give with Apple Pay in an embedded Donation page. For Apple Pay to appear:
- Apple Pay must be enabled for the Donation page.
- Both your Soapbox site's domain and the domain of the website where you embed the page must be added in your Stripe account. Add the website's domain exactly as donors see it in the address bar: www.example.org and example.org are separate domains, so add each one your website uses. See Enabling Apple Pay with Stripe for the Donations app.
The embed code from the Integration tab already gives the embedded page permission to use Apple Pay, so embed code you added earlier does not need to change. If you built your own iframe instead of using the embed code, add allow="payment" to it, for example <iframe src="..." allow="payment"></iframe>.
Donors using older versions of Safari will not see Apple Pay in an embedded Donation page, but can still give by card.
Merge fields on the confirmation page of an embedded Donation page
The confirmation page of an embedded Donation page shows merge fields, such as the donor's name and the donation amount, the same way as the Donation page on your Soapbox site. If a donor reopens the confirmation page more than 30 minutes after giving, the merge fields are blank. The confirmation email is not affected.