Integrate the Donation Form

There are two ways to connect the donation form to your church website: a direct link or  the embed code. This article discusses the advantages of each approach and how to do it.

Embed Code (ChurchCenterModal)

If you'd prefer your donors to stay on your church website as they interact with Giving, use ChurchCenterModal to lay the donation form on top of your existing website. After donating, the donor can close the window, and they're right back on your website

Want to give it a spin? Here's an example of a real live embedded form (don't actually donate please):

You should see something like this:

Tips:

  • On mobile devices, the donation form will always open in a new browser window.
  • Apple restricts the use of Apple Pay in embedded websites. When embedded, Apple Pay won't work on the donation form. (Because of the first point above, this means that only desktop Safari is impacted by this limitation.)
  • Just like with normal html links, you can automatically open the form to a specific fund using the fund's Direct Link found in the fund settings.

Your website must be encrypted (https) for ChurchCenterModal to work. On http websites, the donation form will always open in a new browser tab.

Basic Steps for Embedding

Step 1: Include the ChurchCenterModal script tag on your webpage in the <head> of your document:

<script src="https://js.churchcenter.com/modal/v1"></script>

Step 2: Add a link to your website (the location, name, and style is up to you):

<a href="https://firstballard.churchcenteronline.com/giving" data-open-in-church-center-modal="true">Give online</a>

Alternatively, if your website's content management system doesn't allow you to control the html of the link, you can also use a parameter in the URL itself:

<a href="https://firstballard.churchcenteronline.com/giving?open-in-church-center-modal=true">Give online</a>

Replace firstballard (in the example above) with your unique ChurchCenter subdomain, which your Organization Administrator can find that in Accounts.

Debugging tips:

  • If for some reason the embedded form doesn't launch, "View Source" of the web page to ensure that those two snippets of code are actually on the page.
  • If the link/button is present on your website but takes you to the full un-embedded donation form, check to see if the first snippet is present in your html and that the website you're looking at is a secure (https) website.
  • If your content management system doesn't allow you to edit the <head> of your document, you can put it somewhere else if needed. Just make sure it comes before the second link snippet.
Advanced Usage

Sometimes anchor tags with data attributes may not be usable due to other constraints. If a need arises to open the modal programmatically, ChurchCenterModal.open(url) is the perfect escape hatch:

var urlThatWasGeneratedProgramatically = "https://firstballard.churchcenteronline.com/giving"

ChurchCenterModal.open(urlThatWasGeneratedProgramatically)

Very Advanced Usage

If you're a developer, you may want to interact with the ChurchCenterModal using javascript for more fine-grained control:

  • ChurchCenterModal.open(url) : Opens a link to Church Center in the modal.
  • ChurchCenterModal.close() : Closes the modal.
  • ChurchCenterModal.start() : Attach the global event handler to make data-open-in-church-center-modal="true" links open in a modal. Note: this happens automatically when the script is included.
  • ChurchCenterModal.stop() : Remove the global event handler that makes data-open-in-church-center-modal="true" links open in the modal.
Have more questions? Submit a request

Comments