Embedded form settings
Adjust your campaign’s settings in Embedded Studio to customize the supporter experience by editing FAQs, adding custom questions, and turning on or off nudges.
To access settings:
- Go to the Studio designer
- Select the Settings tab
About
The About page includes campaign details:
- Campaign name
- Internal event name
- Fundraising goal
- Campaign contact
Donation options
To edit donation settings, go to Donations and Donation options. This page lets you adjust:
- Anonymous donations
- Hide donation amount
- Donate as an organization
- Minimum donation amount
- Comment with donation
- Contact opt-in checkbox
- Recurring nudge
Donor covered fees
In Donations and Donor covered fees, you can adjust settings that encourage supporters to cover transaction fees, such as:
- Cover fees
- Percentage
- Donor covered fees nudge
Dedications
The Dedications page lets supporters donate in honor of someone. Options include:
- Dedicate options
- Postal notification
- Dedication emails
- eCards
Only active designations appear in campaign settings. Make sure your designations are activated in your account settings.
Program designations
On the Program designations page, you can let supporters choose where to direct their donations. Options include:
- Default designation
- Sorting designations
- Grouping designations
Donation matching
The Donation matching page manages settings for Double the Donation integration and sponsor matching for campaigns in which sponsors will match donations.
Sharing
The Sharing page controls how your campaign appears when shared on social media. To edit the social links for your organization, go to your Account settings.
Questions
In the Questions section, you can set up Frequently Asked Questions and Donor questions to ask supporters before or after they complete a donation.
- Donor questions marked as required will appear before the donation is complete. Limiting required questions can improve conversion rates.
- Frequently asked questions are shown within the embedded form to address common concerns.
Theme
The Theme page lets you customize the campaign’s default appearance by editing:
- Default logo
- Campaign colors
Install
The Install page includes important elements for embedding your campaign on your website:
- Safelisted domains
- Install snippet
- Embed codes
For specific instructions on adding the snippet and embedding the form, refer to our guides:
Legacy donation forms
For easier customizations, we recommend moving to Embedded Studio and using the latest forms. If you're working with a legacy embedded form, you can still customize it for:
You can add donation options to your form such as the ability to give with company credit cards and dedicate gifts to others. To access these settings:
- Open the campaign editor
- Select the Details tab
In the menu, select Donation Page to turn on or off settings such as comments and simple billing address. Also, select Theme to adjust the form’s logo and primary color.
Nudges
Nudges give you two additional revenue-driving features to convert more visitors into lasting donors. You can add an abandoned cart nudge on pop-up donation forms and a recurring donation nudge on both types of embedded forms.
Abandoned cart nudges
Encourage supporters to complete their donation with friendly abandoned cart notifications that appear when supporters exit the popup checkout flow.
To add an abandoned cart nudge to your form, copy the following code and add it to your code embed where it says // ADD ABANDON CART NUDGE CODE HERE TO ENABLE.
Then add the code to your website's footer.
nudgeTrays: [
// CUSTOMIZE YOUR MESSAGE
{
title: 'Make a difference 💜',
content: 'Complete your gift to help make our mission possible.',
ctaLabel: 'Give Now',
ctaColor: '#1a73e8',
triggerEvent: 'eg:donation:incomplete',
},
],
In the code, you can adjust the nudge’s title, content, button label, and button color. Just replace the text or hex code between the single quotation marks.
Recurring nudges
Recurring nudges help turn one-time gifts into sustainable, monthly donors. This nudge suggests a smaller monthly donation when someone chooses a one-time gift between your highest and lowest options (the two middle options). The suggested amount will be one-fourth of the selected one-time amount.
Recurring nudges for popup and inline donation forms
To add a recurring nudge, add egrn: true between the urlParams brackets in your code embed.
urlParams: { egrn: true }
If you plan to use recurring nudges and source codes or pass-through parameters, replace urlParams: { egrn: true } with
urlParams: { ...readURLParams(), ...{ egrn: true } },
Can I use both nudges with popup embeds?
Yes! Just add both the abandoned cart tray and the recurring giving nudge to their respective locations in the code embed.
Source codes and pass-through parameters
To use source codes and pass-through parameters with your legacy embedded donation form, you'll first need to edit your code embed.
In your embed, find urlParams: { }, and replace it with urlParams: readURLParams(),
Now, the URL parameters you add will pass through to the embedded donation form.
Source codes
To use source codes with your legacy embedded donation form, add the source code to the URL you share with supporters. This URL should take supporters to the page where they will most likely interact with the embed, like your homepage.
If the supporter navigates to another page before interacting with the embed, the source code will not pass on to GoFundMe Pro.
For example, if you think supporters are most likely to interact with your embed on your homepage, https://npo.org, you should share that URL with the source code attached. Such as, https://npo.org/?c_src=newsletter. If the supporter moves to https://npo.org/our-impact before interacting with the embed, the source code will not pass on.
Pass-through parameters
You can use pass-through parameters with your legacy embedded donation forms, but you'll need to add the ones you want to use to your code embed.
In your code embed, find const validUrlParams = ['c_src', 'c_src2']
On this line, add the pass-through parameters you plan to use, such as:
const validUrlParams = ['c_src', 'c_src2', 'amount', 'recurring', 'designation'];
Then, add the pass-through parameter to the URL you share with supporters. For example, https://npo.org/?amount=50.
Or, attach the pass-through parameter to the end of the URL parameter linked to your donate button. Just be sure to include an ampersand (&) before the pass-through parameter. For example, ?campaign=12345&amount=50.
Learn more about pass-through parameters
Collect billing address
You can collect billing addresses on embedded forms in two ways, simple billing address or full billing address. We recommend simple billing address because it uses a single auto-complete field for a streamlined donation experience.
Note: The billing address will not be required if simple billing is used.
Simple billing address
To use simple billing address, go to Details and Donation Page in your campaign editor. Then turn on the option for simple billing address.
Collect full billing address
To require a supporter's full billing address, enter egfa: true
between the urlParams brackets in your code embed.
urlParams: { egfa: true }
This will prompt supporters to enter their billing address after entering their payment details. Note that the billing address will not be captured for supporters who use digital wallets and do not have a billing address saved in their wallets.
If you have already included the recurring nudge parameter, separate each with a comma.
urlParams: { egrn: true, egfa: true }
If you plan to use source codes or pass-through parameters, replace
urlParams: { egrn: true, egfa: true }, with
urlParams: { ...readURLParams(), ...{ egfa: true, egrn: true } },
Use multiple campaigns
If you'd like to add multiple campaigns to your website, for example, you want to include both a pop-up and an inline embed, you can edit your code embed to accommodate multiple campaigns.
To add another campaign to your embed code snippet, find
campaigns:, duplicate the segment within the square brackets
[ ],
and separate the two segments with a comma. Finally, replace the Campaign
ID
and the element selector with the ones you want to use for the other campaign.
...
campaigns: [
{
campaignId: 'YOUR CAMPAIGN'S ID',
donation: {
modal: {
urlParams: { },
elementSelector: 'SELECTOR FROM YOUR WEBSITE'
},
// Add ABANDON cart NUDGE Code Here to enable
}
},
{
campaignId: 'YOUR OTHER CAMPAIGN'S ID',
donation: {
modal: {
urlParams: { },
elementSelector: 'ANOTHER SELECTOR FROM YOUR WEBSITE'
},
// Add ABANDON cart NUDGE Code Here to enable
}
}
]
...
If you need additional help, view this complete example. Copy and paste this code snippet directly into your website's footer. Remember to replace the campaign IDs and element selectors.
Important: Add only one code embed to your website's footer. If you add more than one code embed, your website will only read the last one entered, and the earlier embeds will not work.
Lazy load
By default, embedded forms load in the background on page load. This allows popup forms to open instantly when a supporter selects Donate.
If you plan to use multiple embedded campaigns on one page, this will slow down your page load. To fix this, you can adjust your campaigns to lazy load. This means the embedded form will only load when selected instead.
To set your embedded campaign to lazy load, add lazyLoad: true,
to the campaign snippet in your embed code.
...
{
campaignId: "123456",
donation: {
modal: {
lazyLoad: true,
urlParams: { },
elementSelector: '.donate-btn'
},
...