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 also have the option to use Publishing to set up Church Center web and app. With Publishing, you have the option to customize your home page, add additional custom pages, host live sermon streams, and create a library of videos or audio from previous services.
For now, there are no theming controls for Church Center. We've intentionally kept the design of Church Center as neutral as possible (black text on a white page with blue links).
You can link to Church Center pages from your own church website or embed them, depending on the type of page.
|
Feature |
Embed |
Link |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
||
|
✓ |
||
|
✓ |
||
|
✓ |
||
|
✓ |
||
|
✓ |
If you embed events, groups, the directory, or the main church calendar into your web pages, you might run into these issues:
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.
For instance, on event registrations that require payment, Church Center asks for credit card numbers and bank account information. When these payment forms are framed by another website, some browsers raise security alerts to visitors, even if your church website is also SSL encrypted.
While not an impossible technical hurdle, this setup can be more volatile as web browsers become increasingly proactive about protecting their users.
On mobile devices, where screen space is already limited, cramming the whole Groups or Registrations system into a smaller box with a fixed height makes it nearly unusable. As designed, Church Center is meant to work well on small-screen devices like phones and tablets.
To make matters worse, when operating in an iframe, the web browser's forward and back buttons usually don't work correctly. The "parent" website essentially hijacks the back button, which can be maddening if you're two steps into your event registration process.
When a website is boxed in by an iframe, the URL (link) to that page isn't accessible to the visitor – only the parent page's URL is visible. This isn't a problem for simpler "widget" type items, like a Pinterest pin or a Facebook page comment. These elements exist as properties of that page, and visitors don't need or care about the URL of those small pieces.
This isn't the case with items like a small group's group page or an event's registration page. People need those URLs to be able to share them, save them, or copy and paste them.
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.
You should see something like this:
-
On mobile devices, the donation form will always open in a new browser window.
-
Apple restricts the use of Apple Pay on embedded websites. When embedded, Apple Pay won't work on the donation form.
-
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.
Danger
Your website must be encrypted (https) for ChurchCenterModal to work. On http websites, the donation form will always open in a new browser tab.
. How 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
Debugging:
-
If the embedded form doesn't launch, view the source code 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. 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 will always take people to your Home page in Church Center.
The following sections have some examples of specific Church Center pages that you can link to on other websites or share in email communication with your church.
Here are some examples of how those pages look on Church Center:
-
Event Request Forms
Here are a few examples of ways that you can link to the unique Church Center pages for your church:
-
On your church website, the Donate Now button can link to: https://yoursubdomain.churchcenter.com/giving
Tip
Check out our Funds article for instructions on linking to a specific Fund and setting a suggested donation amount.
-
In 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 in Planning Center, the Church Center URL will change, and you'll need to update the links on your website.