Alwyn Barry

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

Javascript Integration for ChurchSuite

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

<p>Integration for ChurchSuite (AKA CS Integration) allows you to display certain<br />
data from ChurchSuite on your WordPress website without resorting to embedding<br />
iframes. This plugin provides shortcodes that are easy to drop into any page<br />
or post. Each shortcode will, behind the scenes, request data from your<br />
ChurchSuite feed, and will display the data returned in a similar way to the<br />
usual ChurchSuite iframes, but natively to your website.  Many aspects of the<br />
display can be modified in your theme to make the display match your website<br />
theme. The shortcodes allow you to use a range of query parameters so that you<br />
can display just the data you want for each part of your website.</p>
<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’ group by date</li>
<li>Shortcode to return a full month calendar, for the current month or a date</li>
<li>Shortcode 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>
<p>For the technical among you: This shortcode works on the ‘server side’,<br />
building the response which is delivered to your browser from churchsuite.</p>
<h4>Difference between this plugin and cs-js-integration</h4>
<p>We also provide the <code>cs-js-integration</code> plugin.  That plugin uses the more<br />
recent v3 ChurchSuite API which does not permit such flexibility because it<br />
requires you to create a ChurchSuite ’embed configuration’ to pass in the<br />
shortcode call.  It also does all the work on the ‘client side’ so that<br />
the client browser holds the cached data and the client browser creates all<br />
the html for output.  That plugin use Javascript to create the response<br />
whereas this plugin uses php.  This server-side implementation can be faster<br />
for many repeated requests, and is less speed dependent on the client<br />
provision. However the client-side implementation can be faster for an<br />
individual user. The cs-js-integration plugin uses Alpine.js to output the<br />
HTML, which means an end user could change the output by changing the HTML<br />
files without having to get into the php of the plugin. However, the<br />
Alpine.js code isn’t straightforward and so this is likely to be of little<br />
advantage. Really, it’s simply ‘horses for courses’ – you have the choice<br />
of which to use!</p>
<h3>Support</h3>
<p>If you have a problem or a feature request, please send a message to the author.</p>
<h3>Demo</h3>
<p>Currently there is no demo site, but you can view examples on a church website:</p>
<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>
<p>This plugin relies on information provided by ChurchSuite using their ’embed’<br />
JSON feed.  Details of this JSON feed can be found here:</p>
<p>https://github.com/ChurchSuite/churchsuite-api/blob/master/modules/embed.md</p>
<h3>Usage</h3>
<ul>
<li>
<p>For the <em>Event Cards shortcode</em>, place the shortcode into a page or post or<br />
into a shortcode block. The shortcode will be:</p>
<pre><code>[cs-event-cards church_name="mychurch" num_results="3"]
</code></pre>
<p>where <code>mychurch</code> is the name of your church and <code>3</code> is changed to the<br />
number of future featured events you need in a page or post.  Use the<br />
parameter <code>featured="1"</code> to obtain only featured events.  Because your<br />
calendar will have <em>many</em> events, make sure you include <code>num_results</code><br />
to get the number of events you want.</p>
<p>If you want events on a specific day, use the parameters <code>date_start</code><br />
and <code>date_end</code>. If you want events from a particular Calendar category,<br />
use <code>category=1</code> where <code>1</code> is replaced by the category number for the<br />
Calendar category you want.</p>
</li>
<li>
<p>For the <em>Event List shortcode</em>, place the shortcode into a page or post<br />
or into a shortcode block. The shortcode will be:</p>
<pre><code>[cs-event-list church_name="mychurch" num_results="10"]
</code></pre>
<p>The comments above about parameters also apply to this shortcode.  By<br />
default only a maximum of 5 days events are returned, but this can be<br />
overridden by adding the <code>date_end</code> parameter.</p>
</li>
<li>
<p>For the <em>Calendar shortcode</em> place the shortcode into a page or post or into a<br />
shortcode block. The shortcode will look like:</p>
<pre><code>[cs-calendar church_name="mychurch"]
</code></pre>
<p>(where <code>mychurch</code> is the name of your church used to get into your churchsuite).<br />
The only parameter that might be used with this apart from <code>church_name</code> is<br />
    date_from which will can be any date which will identify the month to be<br />
displayed – so <code>2025-01-15</code> and <code>2025-01-30</code> will both display the month<br />
January in 2025.</p>
</li>
<li>
<p>For the <em>Smallgroups shortcode</em>, place the shortcode into a page or post or into<br />
a shortcode block. The shortcode will be:</p>
<pre><code>[cs-smallgroups church_name="mychurch"]
</code></pre>
<p>(where <code>mychurch</code> is the name of your church.  The more limited set of<br />
parameters provided by ChurchSuite for small groups can all be used.</p>
</li>
</ul>
<p>See <code>https://github.com/ChurchSuite/churchsuite-api/blob/master/modules/embed.md=calendar-json-feed</code><br />
for a full list of parameters that can be used.</p>
<h3>License</h3>
<p>The plugin itself is released under the GNU General Public License. A copy of<br />
this license can be found at the license homepage or in the <code>cs-integration.php</code><br />
file in the top comment.</p>


Integration for ChurchSuite

Integration for ChurchSuite is a plugin to enable display of data from ChurchSuite JSON feeds

Javascript Integration for ChurchSuite vs Integration for ChurchSuite