This article is for those who want to embed their donation page on their own website. Please know at the outset, embedding comes with some potential downsides and your website may not support embedding external pages.
Before implementing this method, please review the following disclaimers.
** Make sure your website is secured with a HTTPS SSL certificate. Otherwise, visitors may be concerned that the webpage is not secure and or may get a warning that not all elements on the website are secure.
** Be sure to test your embedded page from a mobile phone. Using iframes may cause difficulty with scrolling or viewing the page on mobile. Especially with making sure the full height of your page is visible.
** The GivingFuel team cannot help you troubleshoot issues with your own website if this method does not function properly. You'll need to contact your website provider or web developer.
Jump To...
Ensure Your Website Can Accept Custom HTML
Before you begin, make sure your website can accept custom HTML with iframes in the body. Most website builders support custom HTML, but not all. Be sure to first know how and where to add embeddable code on your website.
NOTE: Not all website providers offer iframe implementation. In the case that your website does not allow iframes, an alternative option is to utilize our Button Generator feature.
For Squarespace users, use an Embed Block which you can learn about here.
For Wix users, use the HTML iframe widget (learn more)
For Weebly users, use their embed code element (learn more)
For Wordpress, you can use their custom html widget (learn more)
Embed Your Donation Page
Copy the following block of HTML Code
<iframe src="INSERT_YOUR_PAGE_URL_HERE" width="100%" height="2100px" scrolling="yes" frameborder="0" border=“0"></iframe>
Customize the block of code with your page URL by inserting your full page in between the quotes right after <iframe src=. Make sure to keep the quotes. Your embed code should look similar to this
<iframe src="https://awesomeco.givingfuel.com/sample-page" width="100%" height="2100px" scrolling="yes" frameborder="0" border="0"></iframe>
Using your website's defined method for adding custom html code, paste the embed code on your website and save it.
Note: Be sure to test it to make sure you can see all fields and buttons on desktop and on mobile phones.
FAQs
The submit button or part of the page is cut off on my embedded page. How do I fix?
This means your iframe is too short. Using the html code, make the height parameter a larger number like 2500px instead of 2100px.
How do I get an HTTPS on my website?
Contact your hosting provider or your web developer. You need to buy and install an SSL certificate for your website hosting. Note you'll need to renew this every 1-2 years.
Can I iframe a Peer to Peer page?
P2P style pages are not supported with an iframe.