You can use HTML to securely connect your givers to your giving form on any non-Faithlife website. You can choose between three different experiences for your givers, all of which are equally secure:
- Redirect Givers to Your Giving Form (simplest)
- Add a Lightbox (more difficult)
- Embed Your Full Form (most difficult)
Note: If you have a Faithlife site, we've already added the giving form to your site as a draft page. Learn how to publish the page.
Redirect Givers to Your Giving Form
The simplest way to direct your Givers to your Giving Form is to add a link to your form on your site via a button or a simple embedded link.
Pros/Cons
- Pros: This is the easiest option to implement. Because it redirects your givers directly your Faithlife form, it’s clear your giving is powered by Faithlife and therefore visibly reinforces the security of online giving.
- Cons: Users are directed away from your website.
Directions
Navigate to the Share/Embed menu in your Finance Team and copy the Share it with anyone link to add it a button or simple link on your website.
Note: If you’re concerned about directing people away from your website, consider making the link open in a new tab so your website still remains open in the original tab. Most visual editors allow you to check a box to open any given link in a new tab. Or you can add the following code to the HTML link tag: target="_blank".
To remove the Faithlife header from your shared giving page, add the code ?embed=true immediately after "give." So, in the example above, the link would read "https://faithlife.com/ferndale/give?embed=true".
Add a Lightbox
Embed a button on your site that pops up a lightbox when clicked. After givers submit their gift, the lightbox closes and they resume browsing your website.
Pros/Cons
- Pros: Users remain on your website during the entire giving process. This reassures them that the gift is going directly to your ministry, and facilitates them continuing to engage with your website after they give.
- Cons: Givers might be less comfortable providing their financial information in a form that isn’t supported by a recognizable “big brand.” This approach requires slightly more HTML work. On mobile, clicking the “give” button will redirect people to your Faithlife Giving form.
Directions
Navigate to the Share/Embed menu in your Finance Team and use the embed code provided.
Copy and paste the first code block inside your body tag and the second code where you want the give button to appear on your website.
Note: If your website uses Wordpress or another popular user-friendly website builder, add each of the copied code blocks into an HTML code element.
When your givers click the Give button, a lightbox popup will open so they can complete their gift.
Embed Your Full Form
You can embed your entire giving form directly into any page on your church’s website. It will look and act just like your Faithlife Share it with anyone link, but givers will remain on your website. After they submit their gift, the giver will receive an on-screen confirmation message.
Pros/Cons
- Pros: Users remain on your website during the entire giving process. This reassures them that the gift is going toward you, and facilitates them continuing to engage with your website.
- Cons: Givers might be less comfortable providing their financial information in a form that isn’t supported by a recognizable “big brand.” This approach requires the most HTML work. On mobile, your form will be replaced by a “give” button, which will redirect people to your Faithlife Giving form.
Directions
Embedding the full giving form requires adding a script tag to the <head> section of your webpage and embedding an iframe in the body of the webpage.
-
Coby and paste the following script in the head section of your page.
<script>function receiveMessage(e){if("close"!==e.data){var n=e.data,a=n.height,i=n.change;null!=a&&resizeIframe(a),null!=i&&scrollPage(i)}}function resizeIframe(e){var n=document.getElementById("giving-frame");null!=n&&(n.height="".concat(e+32,"px"))}function scrollPage(e){window.scroll({top:window.scrollY+e,behavior:"smooth"})}window.addEventListener("message",receiveMessage,!1);</script>Note: If your website uses Wordpress or another popular user-friendly website builder, you may need to directly edit the theme code or use a plugin to access the head tag of your page.
-
Copy and paste the following iframe in the body of your page.
<iframe id="giving-frame" src="https://faithlife.com/<yourGroupToken>/give?embed=true" width="100%" height="620px" frameborder="0" scrolling="no"></iframe>Note: If your website uses Wordpress or another popular user-friendly website builder, add the copied code block into an HTML code element.
-
Replace
To find your group token, navigate to the Share/Embed menu in your Finance Team. Your token is visible in your shareable link. Replace<yourGroupToken>of the iframe with the group token in your Faithlife giving form link.<yourGroupToken>in the iframe code you copy and pasted above with this token.
Your webpage will now display your full giving form.
Note: Our customer success team is happy to address any questions you have about adding Faithlife Giving to your church’s website. You can contact them via the chat widget on this page, by calling 888-0751-6467, or by emailing success@faithlife.com.
If you haven't yet activated Faithlife Giving, navigate to faithlife.com/products/giving/features and click Get Started.
