Setup PCO Model forms with Squarespace
This is a simple tutorial for setting up Planning Center embedded modal with Squarespace so you can have a cool popup like below for both Giving and Forms:
Explinations are at the bottom of each picture below.
In your admin menu Click "Settings"
Then Click "Advanced
Then Click "Code Injection"
Copy and Paste the code below into the "Header" section. Then click the webpage back button to get back to your main menu.
<script src="https://js.churchcenter.com/modal/v1"></script>
Click on "Pages"
Click the + to add a "Link".
Make sure you Check "Open in New Window" or the form won't work in Mobile Safari
Put "Give" or whatever you want your link for the form to say in the "Link Title".
Paste this code in "Link" box:
Giving: This is for your giving form.
https://yourcbcfamily.churchcenteronline.com/giving?open-in-church-center-modal=true"
Forms: Get the number for the form you want to use from the address bar in your browser when you are looking at the form in Planning Center. The form number for my "Favorite Pie" form is "1745"
Change form number "1745" in the link below to match the number in the form url for your form on Planning Center Online.
https://yourcbcfamily.churchcenter.com/people/forms/1745?data-open-in-church-center-modal=true
You can use these address fields in buttons and any links once you have added the code injection in the header.
Change the yourcbcfamily.churchcenteronline.com part to your unique church url.
Now click "Save".
You should have a working popup form now. If it's not working check to make sure you are using the https:// version of your site. And check that SSL is turned on in "Settings / Security & SSL" like this:
I hope this helps your church help broken people find hope! If you are still stuck contact PCO Support