Alwyn Barry

JS Integration for ChurchSuite is a plugin to provide ChurchSuite event and 
smallgroup details for display in a WordPress website without using iFrames. 
The data is drawn from ChurchSuite JSON feeds using the v3 API and is displayed 
natively within your website using Javascript. This plugin uses the ChurchSuite 
Javascript v3 public API library to implement much of its functionality, but 
needs a lot less technical understanding to use in a WP website than trying 
to integrate the libraries and write it all from scratch for yourself. 
Nonetheless, it is simple to modify the output of the shortcodes to suit 
your own needs.
<h3>Current features include:</h3>
<ul>
<li>Shortcode to return events as ‘cards’ with the event image and details</li>
<li>Shortcode to return events in a ‘list’ grouped by date</li>
<li>Shortcode to return a Calendar which can move on to subsequent months where needed</li>
<li>Shortcode to return groups as ‘cards’ with the group image and details</li>
<li>All API requests are cached locally to speed performance</li>
</ul>
<h3>A little Technical information</h3>
For the technical among you: This shortcode works on the ‘client side’, 
building the in the user’s browser. This can be faster, in some circumstances, 
and more responsive to user input.
<h3>Difference between this plugin and cs-integration</h3>
We also provide the <code>cs-integration</code> plugin. That plugin uses an older 
ChurchSuite API which permits more flexibility because a range of parameters can 
be provided at call rather than having to create an ’embed configuration’ on 
ChurchSuite to pass in the shortcode call. The other plugin also does all the 
work on the ‘server side’ so that the server holds the cached data and the 
server creates all the html for output. This plugin use Javascript to create 
the response and cache in the client browser. The server-side implementation 
can be faster for many repeated requests, and is less speed dependent on the 
client provision. However the client-side implementation can be faster for an 
individual user and more immediately responsive to interaction. This plugin also 
uses Alpine.js to output the HTML, which means an end user could change the 
output by changing the HTML files without having to get into the php of the 
plugin. However, the Alpine.js code isn’t straightforward and so this is likely 
to be of little advantage. Really, it’s simply ‘horses for courses’ – you have 
the choice of which to use!
<h3>Support</h3>
If you have a problem or a feature request, please send a message to the author.
<h3>Demo</h3>
Currently there is no demo site, but we will create examples shortly
<h3>Contributions</h3>
<ul>
<li>This plugin relies on the Churchsuite v3 Javascript API library
<ul>
<li>(see https://github.com/ChurchSuite/embed-json-script)</li>
</ul>
</li>
<li>This plugin uses Alpine.js to process the ChurchSuite events and smallgroup 
information for display
<ul>
<li>(see https://alpinejs.dev/)</li>
</ul>
</li>
<li>This plugin uses dayjs to process dates, because this is what the ChurchSuite 
API uses
<ul>
<li>(see https://dayjs.org/)</li>
</ul>
</li>
</ul>
<h3>Usage</h3>
<ul>
<li>
For each of the examples below:
<ul>
<li>Replace <code>mychurch</code> with the name of your church which you use to get to 
your ChurchSuite site; e.g. <code>trinity</code> or <code>christchurch</code> … see the first name 
after <code>https://</code> in your Churchsuite link.</li>
<li>Replace <code>62436903-841e-4239-bc95-e6952e17430e</code> with the unique Id for the 
configuration of event or SmallGroup output you want to use. To easily find this 
Unique ID, go to the Settings for Events or SmallGroups, and use the Embed tab 
in the Calendar or SmalGroup Settings page on ChurchSuite to see the 
Configurations (or create new Configurations), and use ‘Preview’ to show the 
configuration you want to base the output on. The Unique ID is the string of 
dash separated hexadecimal characters you will find in the Link for the preview page.</li>
</ul>
</li>
<li>
For the Event Cards shortcode, place the shortcode into a page or post or 
into a shortcode block. The shortcode will be:
[cs-js-event-cards church_name=”mychurch” configuration=”62436903-841e-4239-bc95-e6952e17430e”]
(replacing the church name and the configuration with your church name and 
the Embed configuration unique ID you want to use)
</li>
<li>
For the Event List shortcode, place the shortcode into a page or post or 
into a shortcode block. The shortcode will be:
[cs-js-event-list church_name=”mychurch” configuration=”62436903-841e-4239-bc95-e6952e17430e”]
(replacing the church name and the configuration with your church name and 
the Embed configuration unique ID you want to use)
</li>
<li>
For the Calendar shortcode place the shortcode into a page or post or into a 
shortcode block. The shortcode will look like:
<pre><code>[cs-calendar church_name="mychurch" configuration="62436903-841e-4239-bc95-e6952e17430e"]
</code></pre>
(replacing the church name and the configuration with your church name and 
the Embed configuration unique ID you want to use. The configuration should 
be one which returns events for a number of month – the ‘grid’ option is 
best to enable you to select the right data for this shortcode.)
</li>
<li>
For the Smallgroups shortcode, place the shortcode into a page or post or 
into a shortcode block. The shortcode will be:
[cs-js-smallgroups church_name=”mychurch” configuration=”62436903-841e-4239-bc95-e6952e17430e”]
(replacing the church name and the configuration with your church name and 
the Embed configuration unique ID you want to use)
</li>
</ul>
Sadly, ChurchSuite developers won’t allow us to use any parameters inline to 
modify what data is received. You must use the (very limited) configuration 
available in the Embed Configuration. The ‘look and feel’ of the data as 
presented on your website can be altered considerably by adding your own CSS 
to your theme file – all items output are within their own css classes and so 
everything can be styled to fit with your website.
And, if you want to, you can use an HTML block to do your own output using 
Alpine.js. Just follow the examples towards the bottom of 
https://kingshope.church/events. The libraries you need have been impported for 
you by this plugin, and so, for example, a simple unstyled list of event titles 
can be generated by adding an HTML block with:
<pre><code><script>CS.url = 'https://demo.churchsuite.com';</script>

<div>
 
 <div x-data="CSEvents({configuration: '62436903-841e-4239-bc95-e6952e17430e'})">
 
 <template x-for="event in events">
 
 <div>
 
 </div>
 </template>
 </div>
</div>
</code></pre>
(replacing <code>demo</code> with your church name, and the hex string with your 
configuration unique id).
<h3>License</h3>
The plugin itself is released under the GNU General Public License. A copy of 
this license can be found at the license homepage or in the <code>csjs-integration.php</code> 
file in the top comment.

Javascript Integration for ChurchSuite

JS Integration for ChurchSuite is provides ChurchSuite event and smallgroup details for display in a Wordpress website.

Blocks For ChurchSuite allows you to display certain data from ChurchSuite 
on your WordPress website without resorting to embedding iframes. This 
plugin provides Blocks that are easy to drop into any page or post. Each 
block will, behind the scenes, request data from your ChurchSuite feed, 
and will display the data returned in a similar way to the usual 
ChurchSuite iframes, but natively to your website. Many aspects of the 
display can be modified in your theme to make the display match your 
website theme. The blocks allow you to use a range of attributes so that 
you can display just the information you want for each part of your 
website.
<h3>Current features include:</h3>
<ul>
<li>block to return events as ‘cards’ with the event image and details</li>
<li>block to return events in a ‘list’ group by date</li>
<li>block to return a full month calendar, for the current month or a date</li>
<li>block to return groups as ‘cards’ with the group image and details</li>
<li>All API requests are cached with a 4 hour cache to ensure fast performance</li>
</ul>
<h3>A little Technical information</h3>
For the technical among you: This block works on the ‘server side’, 
building the response which is delivered to your browser from churchsuite.
<h3>Support</h3>
If you have a problem or a feature request, please send a message to the author.
<h3>Demo</h3>
Currently there is no demo site, but you can view examples on a church website:
<ul>
<li>the <a href="https://www.cambray.org/" rel="nofollow ugc">Featured Events</a>,</li>
<li>the <a href="https://www.cambray.org/connect/smallgroups/" rel="nofollow ugc">Small Groups list</a>,</li>
<li>the <a href="https://www.cambray.org/whats-on/" rel="nofollow ugc">Events List</a>,</li>
<li>the <a href="https://www.cambray.org/whats-on/calendar" rel="nofollow ugc">Calendar</a></li>
</ul>
<h3>Contributions</h3>
This plugin relies on information provided by ChurchSuite using their 
’embed’ JSON feed. Details of this JSON feed can be found here:
https://github.com/ChurchSuite/churchsuite-api/blob/master/modules/embed.md
<h3>Usage</h3>
<ul>
<li>
For the Event Cards block, place the block into a page or post. Set 
the name of your ChurchSuite feed in the Church Name attribute (ie. 
the name that is at the start of your churchsuite url e.g. 
https://mychurch.churchsuite.com – the name is ‘mychurch’).
You should see the block populate with events in the 
editor straightaway
You can ude the various parameters in the side bar to refine your 
search for events – see below for the many options
Because your calendar will have many events, we can limit the number 
of events which are returned using the Number Of Events attribute 
combined with the Days Ahead attribute. This latter attribute sets 
how many days ahead you will look over to find a set of events from. 
If this is set too large and you have a lot of events, the data 
request from ChurchSuite will take too long to return. So just 
experiment until you get the number of events over the time period 
you want.
Other attributes allow you to refine the events returned as follows:
<ul>
<li>Start Date – the starting date to look for events</li>
<li>Days Ahead – the number of days ahead from the start date to look</li>
<li>Number of Results – the number of events to display from those returned</li>
<li>Featured – whether to show only events marked as ‘Featured’</li>
</ul>
And, in the ‘Advanced’ group you can do further refinements:
<ul>
<li>Categories – only look for events in the categories whose category 
 numbers are given</li>
<li>Event Names – Only list events where the string given is in the 
 event title (e.g. ‘service’ to return all services)</li>
<li>Sites – if you have a multi-site church, only look for events 
 for the sites whose site numbers are given</li>
<li>Events – Only look for events in the list of event numbers 
 (Useful if you want to highlight a few particular events)</li>
<li>Merge – List only the first event or all events in a sequence</li>
<li>Sequence – Only list events in a given sequence number</li>
</ul>
Details of these attributes and their values can be found here:
</li>
</ul>
https://github.com/ChurchSuite/churchsuite-api/blob/master/modules/embed.md
<ul>
<li>
For the Event List block, place the block into a page or post. Set 
the name of your ChurchSuite feed in the Church Name attribute (ie. 
the name that is at the start of your churchsuite url e.g. 
https://mychurch.churchsuite.com – the name is ‘mychurch’).
You should see the block populate with events in the 
editor straightaway
The comments above about attributes you can set also apply to this 
block. By default only a maximum of 5 days events are returned, but 
this can be overridden using the attributes.
</li>
<li>
For the Calendar block , place the block into a page or post. Set 
the name of your ChurchSuite feed in the Church Name attribute (ie. 
the name that is at the start of your churchsuite url e.g. 
https://mychurch.churchsuite.com – the name is ‘mychurch’).
You should see the calendar block populate with events in the 
editor straightaway.
Fewer customization parameters are available for this block because 
only a subset of the parameters listed above make sense for a monthly 
calendar.
</li>
<li>
For the Smallgroups block,, place the block into a page or post. Set 
the name of your ChurchSuite feed in the Church Name attribute (ie. 
the name that is at the start of your churchsuite url e.g. 
https://mychurch.churchsuite.com – the name is ‘mychurch’).
You should see the block populate with groups in the 
editor straightaway.
The only parameter for SmallGroup lists that ChurchSuite supports is 
the sites parameter, which you will find under the ‘Advanced’ section.
</li>
</ul>
<h3>License</h3>
The plugin itself is released under the GNU General Public License. A 
copy of this license can be found at the license homepage or in the top 
comment within the <code>blocks4cs.php</code> file.

Blocks for ChurchSuite

Blocks For ChurchSuite is a plugin providing blocks that enable display of event and small group data from ChurchSuite in various ways.

Javascript Integration for ChurchSuite vs Blocks for ChurchSuite