Giving Website Integration

Created on:
Updated on:

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.

Note

You also have the option to use Publishing to set up Church Center web and app. With Publishing, you have the option to add additional custom pages, host live sermon streams, and create a library of videos from previous services.

Tip

You can find your account's Church Center URL on your Church Center page in Giving.

Accessing Links and Embed Codes

Access the codes you can use to link or embed your Giving site from the Church Center tab on the Manage page in Giving.

Church Center on web.png

Direct Link to Donation Site

The easiest way to link to the Giving site is to create a direct link from your main church website. Since this is HTML on your website, the style of this link is totally up to you.

Simple Link

You can add a simple link from your main site to the donation form. For example:

<a href="https://yoursubdomain.churchcenter.com/giving" target="_blank" title="Give Online">Give Online</a>

Link Directly to a Fund

To link directly to a fund, use the fund direct link for your URL. For example, this URL would link directly to your New Building fund:

https://yoursubdomain.churchcenter.com/giving/to/new-building

Link to a Suggested Donation Amount

To link to a suggested donation amount, you need to add some additional code at the end of the URL. For example, to pre-fill the donation form with $100, use this code:

https://yoursubdomain.churchcenter.com/giving?default_amount=100

Link to a Fund and Donation Amount

You can also link both directly to a fund and include a suggested amount. For example, to link to the New Building fund with a suggested donation of $100, use this code for the URL:

https://yoursubdomain.churchcenter.com/giving/to/new-building?default_amount=100

Example for Centerville Church: Click here to give $100 to our New Building fund.

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):

Give to First Ballard Church

You should see something like this:

give modal on website.png

Note

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.

Warning

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.churchcenter.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.churchcenter.com/giving?open-in-church-center-modal=true">Give online</a>

 

Warning

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

Note

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

Was this article helpful?
0 out of 0 found this helpful