This article is for those who want to embed their donation page on their own website. If your website uses Wordpress, please visit our article on using our Wordpress plugin which embeds your page through a plugin.
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.
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.
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, we recommend using our plugin. Otherwise you can use their custom html widget (learn more)
Copy the following block of HTML Code
Grab your favorite text editor (notepad, notes, etc) and copy and paste this block of code. You'll customize the actual code in the next step.
Make sure to copy all the text below:
<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
In the code, insert your full page page in between the quotes right after <iframe src=
Make sure to keep the quotes. Your embed code should look similar to this.
Example:
<iframe src="https://awesomeco.givingfuel.com/sample-page" width="100%" height="2100px" scrolling="yes" frameborder="0" border="0"></iframe>
Copy and Paste Your Modified Embed Code On Your Website
Using your website's defined method for adding custom html code, paste the embed code on your website and save it. 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. 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.