An iframe (short for inline frame) is an HTML element that will allow you to embed (place) an external webpage onto your own website.

In this scenario, we will be using the iFrame to place and display the Tithely Giving form on your website.


Overview

This is what an iFrame looks like.

<iframe src="https://yourwebsite.com" width=100% height=800px></iframe>

The basic areas you will see are:

src=”https://yourwebsite.com"

width=100%

height=800px

And the opening and closing <iframe> </iframe>

The only area on this that you will need to edit is the “src=” The rest you can simply copy and paste.

How To

Step 1: To get started locate your direct link by logging into Tithely Giving, select ‘Website Giving’ then select the ‘Direct Giving’ button. This will open a new window.

Step 2: Copy the URL from this window.

Note: Do not use the short direct link on the ‘Website Giving’ page, this will not work.

Your URL should look something like this:

https://tithe.ly/give_new/www/#/tithely/give-one-time/123456

Step 3: Now replace the ‘https://yourwebsite.com’ from this example and place your own URL.

<iframe src="https://yourwebsite.com" width=100% height=800px></iframe>

Your iFrame should look similar to this now:

<iframe src="https://tithe.ly/give_new/www/#/tithely/give-one-time/123456" width=100% height=800px></iframe>

Step 4: Now that you have created your iFrame login to your website builder.

Locate the page you would like to place this form.

In your website builder look for the option to ‘embed’ or to 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, here is where you will place your iFrame.

Step 5: Once you have placed your iFrame, save, and publish your site and check to see how it looks.


Please 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.

Note: If you are using Internet Explorer and are having issues embedding a video, try using another browser such as Chrome. Internet Explorer tends to have issues when trying to embed something on a page.


Did this answer your question?