How To use PCO Chef Embeds on Nucleus

March 30, 2022

Web design is hard. That's why the pcochef embeds are so great. They do a lot of tedious work for you. But some site builders don't like our embed code and need a little extra help to get going. Here are the steps for adding pcochef embeds to sites built using Nucleus.church.

Web design is hard. That's why the pcochef embeds are so great. They do a lot of tedious work for you. But some site builders don't like our embed code and need a little extra help to get going. Here are the steps for adding pcochef embeds to sites built using Nucleus.church.

  1. First got to https://nucleus.church/admin/settings/code-injection and paste the code below into the

"Custom CSS & Javascript" box:

<script defer src="//pcochef-static.s3.us-east-1.amazonaws.com/plusapi/js/pcochef-plus.js" type="text/javascript"></script>

2. Click Save Changes.

3. Go to the page where you want to display the embed and add an HTML Block.

In the HTML Block paste the div code from the pcochef recipe. Make sure to only select the div not the script. Now you should have a working embed!

Here is a DEMO CODE so you know what part you should select:

<div
 data-pcoplus-widget="eventlist"
 data-church-center-url="demo"
 data-display-mode="tiles"
 data-caption-register="Register"
 data-caption-more-information="Learn More"
 data-caption-close="Close"
 data-pcoplus-key="demo"
 data-use-modals="true"
 data-limit="8"
 data-corner-radius="4"
 data-image-shape="cinematic"
 data-brand-color="#FF7461"
 data-button-color="#4EA0CF"
 data-modal-color="#FFFFFF"
 data-text-color="#333333"
 style="text-align: center; color: rgba(90, 90, 90, 0.5)">
 Events Loading
</div>