1. Tithely
  2. Help Center
  3. Giving
  4. Add Tithely Giving to Your Website

Embed a Tithely Giving Form Onto Your Website Using an iframe

Updated:

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.

Caution

For users browsing with Safari, it's important to be aware that there may be difficulties when trying to log into accounts due to Safari's built-in security features. Additionally, when a user successfully gives a gift on a safari browser the confirmation page may not load correctly. Unfortunately, these issues are beyond Tithely's control to fix directly, as they stem from the browser's settings and not our platform. If you encounter such problems, you might consider using a different browser for a smoother experience.

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

  1. Log into Tithely as an Admin or limited user with financial permissions.
  2. Select Giving. 
  3. Select Giving Form. 
  4. Locate and copy your Giving Form URL.
    Note: If you have multiple locations, select your location from the drop-down menu on this page.
    Screenshot 2024-05-16 at 2.40.24 PM.png
  5. Paste your code between the iframe tags (example below).
    <iframe src="https://give.tithe.ly/?formId=a1ca4c5d-6865-11ee-90fc-1260ab546d11" 
    width=100% height=800px></iframe>
  6. Now that you have created your iframe, log in to your website builder and locate the page you would like to place this form.
  7. 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.
  8. Once you have placed your iframe, save, and publish your site and check to see how it looks.

Using Squarespace or Wix?

Tithe.ly Giving can be easily added to your website. If you have a website built with Squarespace or Wix, check out our step-by-step guides for each platform to make the process simple:

Note: Not all website builders allow custom code on your site. Check with your provider before adding custom code. 

Articles in this section