Embed or Link Your Church Center Pages

Created on:
Updated on:

When your account is created, a unique churchcenter.com URL is generated to host your groups, events, forms, online donations, and more. You can use the provided URL or choose your own in the account settings, and then share your Church Center web pages with your congregation and guests.

Notice

You can use Publishing to customize your home page, add custom pages, host live sermon streams, and create a library of videos or audio from previous services.

Which Pages Can I Link or Embed?

Link to Church Center pages from your church website or embed them into your website, depending on the page.

Accessing Links

You can get links and embed codes from the Church Center tab on the Manage page in Giving.

Church Center on web.png

Create a Popup on Your Website

If you'd prefer people to stay on your church website, use ChurchCenterModal to create a popup on your website.

give modal on website.png

Danger

  • On mobile devices, the donation form always opens in a new browser window.

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

  • Apple Pay won't work on popups because Apple restricts its use on embedded websites.

  • Church Center uses an encrypted TLS connection, which may differ from your church's website. Using different encryptions can cause security alerts when payments are being collected.

  • When operating in an iframe, the web browser's forward and back buttons may not work correctly.

. Steps to Embed

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

    <script src="https://js.churchcenter.com/modal/v1"></script>
  2. Add a link to your website (the location, name, and style is up to you):

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

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

Tip

Troubleshooting Tips:

  • If the embedded form doesn't launch, view the web page's source code to ensure that those two snippets are 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. 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://yoursubdomain.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.

Linking Examples

When adding links to your church website, you can link directly to specific Church Center pages. Add links to particular groups, events at a campus, a category of signups, or a specific donation fund to make it easier for people to find relevant information.

Note

Linking to https://yoursubdomain.churchcenter.com always takes people to your home page in Church Center.

The following sections have some examples of specific Church Center pages you can link to on other websites or share in email with your church.

Main Product Pages

Here are some examples of how those pages look on Church Center:

Specific Page Links

Here are a few examples of ways that you can link to the unique Church Center pages for your church:

  • On your church calendar, you can link the Winter Camp event to: https://yoursubdomain.churchcenter.com/registrations/events/1345

  • On your page about small groups, you can link your Find a Group button to https://yoursubdomain.churchcenter.com/groups/small-groups

Note

If an event or form is duplicated, the URL will change, and you'll need to update the links on your website.

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.

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

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

Fund with 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.

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