Embed a donation form on Wix
Before you start
The first step is to create an embedded donation form on GoFundMe Pro.
Studio embedded forms in Wix only work when linked to a donate button. Adding an inline form to your page is not currently supported in Wix.
To embed a donation form on your Wix site, you'll need to:
- Safelist your website
- Install the code snippet
- Link the form to a button on your page
Safelist your website
To make sure your embedded form appears, safelist your website. If you need to add multiple domains (such as a test site or sandbox), follow these steps:
- Go to the Settings tab in the Studio designer
- Select Install
- Under Safelisted domains, add the URL of each website where you plan to embed the form
- Publish or Update your campaign to push through the changes
Install a code snippet
The Install snippet is a script that lets embedded campaigns appear on your site. You only need to add it once to your website’s <head> section, where it will work for all embedded campaigns.
Only add one Install snippet. Multiple snippets may slow down your website.
To copy the Install snippet:
- Go to the campaign’s Settings tab
- Select Install
- Next to Install snippet, select Copy
To add the Install script to Wix:
- Go to your Wix dashboard
- In the menu, select Settings
- Search for and select Custom Code
- Choose Add Custom Code
- Paste in the Install script
- Add code to all pages
- Place code in the Head and Apply
Link the form to a button
With the Install snippet added you’re ready to embed your donation form by linking it to a button. The embedded form will open anytime the button is selected.
To attach the form to a donate button:
- In your campaign’s Install page, select Copy campaign parameter
- Go to your Wix site’s editor
- Select your donate button
- Select the link icon
- Add the parameter to your website’s URL and link to it. For example, www.example.com/?campaign=12345
Legacy donation forms
If you're using a legacy inline embedded donation form, you can add it to your Wix site, but the process will differ slightly from other builders. To start:
- Go to your inline form's campaign editor
- Select the Installation tab
- Copy the embed code
- Go to your Wix site designer
- Select Add
- Select Embed Code and HTML Embed
- Place the block where you want the form to appear
- Increase the block's size to fit the form
- You may need to adjust this later to get the size right.
- In the block, enter <div class="classy-inline-embed"></div>
- On the next line, paste in your embed code
- Find the elementSelector: line
- Replace everything between quotation marks with .classy-inline-embed
You'll notice the form won't appear in the preview, but if you save and publish your site, it'll appear when you view it. If scrollbars appear, return to your site's editor and increase the size of the HTML block you added.
Safelist your Wix site
To ensure your embedded forms display correctly, safelist the unique URL Wix creates for iFrames.
To find the URL:
- Go to your Wix site
- Right-click on the embedded form and select Inspect
- Press Command + F (Mac) or Ctrl + F (Windows) and search for "iFrame"
- Copy the URL from src="..."
Add the URL to your safelist:
- Open GoFundMe Pro's campaign editor
- Go to the Details tab
- In the About section, add the URL to your safelist