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.
Link to Church Center pages from your church website or embed them into your website, depending on the page.
|
Feature |
Embed |
Link |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
||
|
✓ |
||
|
✓ |
||
|
✓ |
||
|
✓ |
||
|
✓ |
If you'd prefer people to stay on your church website, use ChurchCenterModal to create a popup on your website.
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
-
Include the ChurchCenterModal script tag on your webpage in the <head> of your document:
<script src="https://js.churchcenter.com/modal/v1"></script>
-
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.
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)
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.
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.
Here are some examples of how those pages look on Church Center:
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.