Integrate Planning Center with your Nucleus

Embed Your Planning Center Forms Natively On Your Nucleus

Planning Center enables sharing of PCO Forms onto other websites for native use. By following this guide, you can have your PCO Form pop up as on overlay on top of the page of your Nucleus website that your user is currently on, so they can fill out their information without going anywhere.

Note: Mobile devices don't support PCO popups however, so the form will always open in a new browser window.

Best Practices For Nucleus

Planning Center has a guide for integrating a PCO Form with virtually any website. In our best effort to make this easiest for you and to help you achieve the best results on your site, we've distilled all of that information for you here (with a couple tweaks to make your PCO Forms work even better on Nucleus!).

You can always link a PCO Form to an Action, a Hyperlink, or Navigation Item on your Nucleus site by simply using the sharing link that PCO generates. That link looks like this: https://lifeabundant.churchcenter.com/people/forms/6765

Note: Keep in mind that if you link your form using this method it will open in a new browser tab.

To embed your form natively and activate it as a pop up overlay, follow these steps 👇

Embedding A PCO Form

1. Add The Script Tag

To enable the pop up modal, you'll have to add this line of code to your Nucleus site. Adding this to the head code of your site ensures that the pop up will be available on any page that you embed it on.

To add this code, navigate to Design > Custom Code in your Web Dashboard, and then Add New. Select Head Code.

Copy the script code below, paste it in your new code window, and then save your changes. Enable the code.

<script src="https://js.churchcenter.com/modal/v1"></script>

2. Find And Customize Your Link

Before we add your link, we must first find and slightly customize your embed link.

In Planning Center, you'll need to retrieve your embed link for the Form you'd like to embed. To find that link, in your PCO account click on the Form > Settings > copy the Embed Link that's generate on the right side of your screen,

Note: It's at this point that we deviate slightly from the PCO guide for embedding, and we do a slight customization for Nucleus best practice.

Now that you've copied your link, we're going to customize it by adding ?open-in-church-center-modal=true to the end of it. Your link should look like this:

https://lifeabundant.churchcenter.com/people/forms/6765?open-in-church-center-modal=true

3. Add Your Link

Now, we need to add your link where you want your Form to appear. Again, you can link this Form to an Action, a Hyperlink, a Navigation Item, and more in Nucleus. For the sake of this example, let's link it to an Action.

With your newly customized link copied, let's add an Action to any section type and link your Form to it.

Select URL as the Action type, paste your link into the URL field, and fill in your text for the call to action.

Save your changes, publish your page, and voila!

Because you added the PCO modal code to the head section of your entire Nucleus site, a pop up will function wherever you include this link on your site. Now your congregation can fill out your PCO Forms and take more next steps right on your Nucleus site.

Note: Did you know there's another type of integration with PCO you can enable on your Nucleus account? Specifically integrated with the Smart Contact and Additional Contact step in Nucleus Flows, this allows profile data to be entered in a Flow and submitted directly to your PCO account. This way, you can keep all your people records up to date in PCO, without manually needing to create/update people records in your PCO account when people submit information through a Nucleus Flow. Click here to learn more about this integration.