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

Alwyn Barry

Integration for ChurchSuite

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

Blocks for ChurchSuite

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

<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>

Alternatives to Javascript Integration for ChurchSuite

Top alternatives