Embed a legacy embedded form
Before you start
The legacy version of our embedded forms has been sunsetted. Upgrade to an Embedded Studio form to access our newest tools and features.
To embed a legacy embedded form on your site, you need to add a code embed to your website’s footer and link your donate button to your form’s URL parameter or add a code block to the page. No coding experience is required, and we’ll walk you through the steps.
Copy embed code
First, find and copy your popup form’s code embed:
- Go to your popup form’s campaign editor
- Select the Installation tab
- Copy the embed code
Add the code embed to your website
Then, paste the code embed into your website’s footer.
We recommend adding the code to your footer so it’s the last thing that loads when a supporter visits your site. But you can also add the code to your website's header or the end of the website’s body.
Search your website builder's documentation if you need help adding custom code.
Can I embed the donation form with Google Tag Manager or other software?
We don't recommend this approach because ad-blockers may prevent the embedded form from loading.
Add the donation form to your website - popup embeds
If you're using a popup embed, all you need to do is link your donate button to the URL parameter provided. When supporters select the button, the URL parameter will attach itself to the end of your website’s URL, and the popup form will appear.
To link your popup embed:
- Return to your donation form’s Installation tab
- Copy the URL parameter (E.g., ?campaign=YOUR CAMPAIGN ID)
- Go to your website’s editor and change your donate button’s link to the URL parameter
You're all set! You can add your parameter to more buttons if you like, but make sure to test your website and visit our troubleshooting guide when you run into any issues.
Tip: You can share your website’s full URL with the parameter attached (E.g., https://yournonprofit.org/?campaign=12345) to open the form immediately when supporters visit the page.
Add the donation form to your website - inline embeds
If you're using an inline embed, you’ll need to add an HTML block to your page where you want the form to appear and adjust the element selector in the code embed added to your website’s footer.
To add an inline embed to your website:
- Go to your website's editor
- Add an HTML block where you want your form to appear
- Enter
<div class="classy-inline-embed"></div>into the block - Return to the code embedded in your website’s footer
- Replace
SELECTOR FROM YOUR WEBSITEwith.classy-inline-embed
You are all set! Make sure to test your website and visit our troubleshooting guide when you run into any issues.
Can I use a different selector?
Yes! .classy-inline-embed is just a suggestion. All you need is a unique selector in the HTML block and the same selector in your code embed.
Want to add another campaign to your website?
You can include a pop-up and an inline embedded campaign on your website. However, you need to edit the code embedded in your footer to accommodate two campaigns. Simply adding another code embed won't work.