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:

Summary: This guide explains how to embed your Tithely Giving form directly onto your church's website using an <iframe> HTML snippet. This allows donors to give without leaving your site, creating a seamless experience. This method is for users with websites not built on Tithely Sites (e.g., WordPress, Squarespace, Wix).

Before You Begin

  • You must have Admin or financial user permissions in your Tithely account.
  • You must have permission to edit pages and add custom HTML/embed code on your church's website builder (e.g., WordPress, Squarespace, etc.).
  • ❗ Safari Browser Limitation: Due to Safari's built-in security features, users on that browser may have difficulty logging in or may not see the confirmation page correctly after giving. This is a browser-specific issue that Tithely cannot control.
  • ❗ Website Builder Compatibility: Some website builders (especially on free plans) may not allow you to embed custom code or <iframe> elements. Please check with your website provider if you encounter issues.

Part 1: Create Your <iframe> Embed Code

An <iframe> is a simple HTML tag that displays one webpage inside of another. First, you'll get your giving form's unique URL, then you'll place it inside the <iframe> tags.

  1. Log into your Tithely account.
  2. Select Giving from the main menu on the left.
  3. Click on the Giving Form tab.

  4. Locate and copy your unique Giving Form URL. Note: If you have multiple locations, ensure you select the correct one from the dropdown menu first.
     

    Screenshot 2024-05-16 at 2.40.24 PM.png

  5. Now, take the base <iframe> code below and replace the placeholder URL in the src="..." attribute with the Giving Form URL you just copied.

    Base Code Template:

    HTML

     
    <iframe src="YOUR_GIVING_FORM_URL_HERE" width="100%" height="800px"></iframe>

    Finished Example:

    HTML

     
    <iframe src="https://give.tithe.ly/?formId=a1ca4c5d-6865-11ee-90fc-1260ab546d11" width="100%" height="800px"></iframe>

Part 2: Add the Code to Your Website

  1. Log into your website's admin dashboard (WordPress, Squarespace, etc.).
  2. Navigate to the page where you want the giving form to appear and open the editor.
  3. Look for an option to add a custom HTML, embed, or code block. Sometimes this is represented by a < > icon.
  4. Paste the complete <iframe> code you created in Part 1 into this block.
  5. Save and Publish your page.
  6. View the live page to ensure the form appears correctly. You may need to adjust the width and height values in your code to fit your page layout.

Using Squarespace or Wix?

If your website is built on these specific platforms, we have detailed guides that may be easier to follow:

Frequently Asked Questions

  • The giving form isn't showing up, or the space is blank. This usually indicates that your website builder is blocking the <iframe> code. Please verify that your website subscription plan level supports custom HTML embeds. You may need to contact your website provider's support for more information.
  • The form is too small or too big on the page. You can adjust the size by changing the width and height values in your <iframe> code. For width, 100% is usually best as it will adapt to the screen size. For height, you may need to experiment with different pixel values (e.g., height="800px", height="900px") until it looks right and minimizes internal scroll bars.

Articles in this section