Have more questions? Submit a request

Embed or Link Your Church Center Pages

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.

Feature

Embed

Link

Giving donation form 

People form 

Directory 

Registrations signups 

Groups 

Main church calendar 

Calendar events widget 

Event request forms 

Accessing Links

You can get links from the Church Center dropdown in any product.

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

Articles in this section

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