An iframe (short for inline frame) is an HTML element that will allow you to embed (place) an external webpage onto your website.
In this scenario, we will use the iFrame to place and display the Tithely Giving form on your website.
What does an Iframe look like?
<iframe src="https://www.yourwebsite.com" width=100% height=800px></iframe>
The primary areas you will see are:
src=”https://yourwebsite.com"
width= repersented by a percentage or pixel size (100% or 400px)
height= repersented by a percentage or pixel size (100% or 400px)
<iframe> </iframe>= The opening and closing iframe tags
The only area on this that you will need to edit is the “src=” The rest you can copy and paste. You are able to adjust the size of your iframe by editing the property values in “width=” and “height=”if you find the iframe does not fit correctly on your site.
Note: If your iframe does not load on your website or if areas of your iframe do not appear correct it may be your website provider does not support iframe or the contents of your iframe. Some drag-and-drop website providers require business plans or higher to enable the embed code function. Please contact your website provider for more support.
How To Embed a Giving Form
- Login to your Tithely account at https://app.tithely.com.
- Select Giving.
- Select Settings from the Giving Menu.
- Select Giving 1.0 Form & App.
- Highlight and copy your Church ID (highlighted in the image above).
- Using the code below, remove the '1234567' and replace it with your Church ID.
<iframe src="https://tithe.ly/give_new/www/#/tithely/give-one-time/1234567"
width=100% height=800px></iframe> - Now that you have created your iframe, log in to your website builder and locate the page you would like to place this form.
- In your website builder, look for the option to embed or add custom code. Sometimes you will see an icon that looks like this </> indicating a place to input custom HTML code. A text box will appear, and there you will place your iframe.
- Once you have placed your iframe, save, and publish your site and check to see how it looks.
Note: Not all website builders allow custom code on your site. Check with your provider before adding custom code. If you are using Squarespace or Wix, check out these articles on how to place a giving button instead.