{"id":227849,"date":"2025-04-14T09:44:03","date_gmt":"2025-04-14T09:44:03","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/js-integration-for-churchsuite\/"},"modified":"2026-03-27T15:27:57","modified_gmt":"2026-03-27T15:27:57","slug":"js-integration-for-churchsuite","status":"publish","type":"plugin","link":"https:\/\/arg.wordpress.org\/plugins\/js-integration-for-churchsuite\/","author":18523187,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.8.5","requires":"6.4","requires_php":"","requires_plugins":null,"header_name":"JS Integration for ChurchSuite","header_author":"Alwyn Barry","header_description":"JS Integration for ChurchSuite provides shortcodes that display JSON data from the public JSON ChurchSuite feeds using the ChurchSuite provided Alpine.js bindings.","assets_banners_color":"5178a6","last_updated":"2026-03-27 15:27:57","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/gitlab.com\/AlwynBarry\/cs-js-integration","header_author_uri":"https:\/\/gitlab.com\/AlwynBarry\/\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":472,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"dramb","date":"2026-03-27 15:27:57"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3272197,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3272197,"resolution":"1544x500","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3272197,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3272197,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3272343,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3272197,"resolution":"4","location":"assets","locale":""},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3272352,"resolution":"5","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[239626,1486,838],"plugin_category":[],"plugin_contributors":[239627],"plugin_business_model":[],"class_list":["post-227849","plugin","type-plugin","status-publish","hentry","plugin_tags-churchsuite","plugin_tags-events","plugin_tags-featured","plugin_contributors-dramb","plugin_committers-dramb"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/icon-256x256.png?rev=3272197","icon_2x":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/icon-256x256.png?rev=3272197","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/screenshot-1.png?rev=3272197","caption":""},{"src":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/screenshot-2.png?rev=3272197","caption":""},{"src":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/screenshot-3.png?rev=3272343","caption":""},{"src":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/screenshot-4.png?rev=3272197","caption":""},{"src":"https:\/\/ps.w.org\/js-integration-for-churchsuite\/assets\/screenshot-5.png?rev=3272352","caption":""}],"raw_content":"<!--section=description-->\n<p>JS Integration for ChurchSuite is a plugin to provide ChurchSuite event and\nsmallgroup details for display in a Wordpress website without using iFrames.\nThe data is drawn from ChurchSuite JSON feeds using the v3 API and is displayed\nnatively within your website using Javascript. This plugin uses the ChurchSuite\nJavascript v3 public API library to implement much of its functionality, but\nneeds a <strong>lot less<\/strong> technical understanding to use in a WP website than trying\nto integrate the libraries and write it all from scratch for yourself. \nNonetheless, it is simple to modify the output of the shortcodes to suit\nyour own needs.<\/p>\n\n<h3>Current features include:<\/h3>\n\n<ul>\n<li>Shortcode to return events as 'cards' with the event image and details<\/li>\n<li>Shortcode to return events in a 'list' grouped by date<\/li>\n<li>Shortcode to return a Calendar which can move on to subsequent months where needed<\/li>\n<li>Shortcode to return groups as 'cards' with the group image and details<\/li>\n<li>All API requests are cached locally to speed performance<\/li>\n<\/ul>\n\n<h3>A little Technical information<\/h3>\n\n<p>For the technical among you: This shortcode works on the 'client side',\nbuilding the in the user's browser.  This can be faster, in some circumstances,\nand more responsive to user input.<\/p>\n\n<h3>Difference between this plugin and cs-integration<\/h3>\n\n<p>We also provide the <code>cs-integration<\/code> plugin.  That plugin uses an older\nChurchSuite API which permits more flexibility because a range of parameters can\nbe provided at call rather than having to create an 'embed configuration' on\nChurchSuite to pass in the shortcode call.  The other plugin also does all the\nwork on the 'server side' so that the server holds the cached data and the\nserver creates all the html for output.  This plugin use Javascript to create\nthe response and cache in the client browser.  The server-side implementation\ncan be faster for many repeated requests, and is less speed dependent on the\nclient provision. However the client-side implementation can be faster for an\nindividual user and more immediately responsive to interaction.  This plugin also\nuses Alpine.js to output the HTML, which means an end user could change the\noutput by changing the HTML files without having to get into the php of the\nplugin. However, the Alpine.js code isn't straightforward and so this is likely\nto be of little advantage. Really, it's simply 'horses for courses' - you have\nthe choice of which to use!<\/p>\n\n<h3>Support<\/h3>\n\n<p>If you have a problem or a feature request, please send a message to the author.<\/p>\n\n<h3>Demo<\/h3>\n\n<p>Currently there is no demo site, but we will create examples shortly<\/p>\n\n<h3>Contributions<\/h3>\n\n<ul>\n<li>This plugin relies on the Churchsuite v3 Javascript API library\n\n<ul>\n<li>(see https:\/\/github.com\/ChurchSuite\/embed-json-script)<\/li>\n<\/ul><\/li>\n<li>This plugin uses Alpine.js to process the ChurchSuite events and smallgroup\ninformation for display\n\n<ul>\n<li>(see https:\/\/alpinejs.dev\/)<\/li>\n<\/ul><\/li>\n<li>This plugin uses dayjs to process dates, because this is what the ChurchSuite\nAPI uses\n\n<ul>\n<li>(see https:\/\/dayjs.org\/)<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<h3>Usage<\/h3>\n\n<ul>\n<li><p>For each of the examples below:<\/p>\n\n<ul>\n<li>Replace <code>mychurch<\/code> with the name of your church which you use to get to\nyour ChurchSuite site; e.g. <code>trinity<\/code> or <code>christchurch<\/code> ... see the first name\nafter <code>https:\/\/<\/code> in your Churchsuite link.<\/li>\n<li>Replace <code>62436903-841e-4239-bc95-e6952e17430e<\/code> with the unique Id for the\nconfiguration of event or SmallGroup output you want to use. To easily find this\nUnique ID, go to the Settings for Events or SmallGroups, and use the Embed tab \nin the Calendar or SmalGroup Settings page on ChurchSuite to see the\nConfigurations (or create new Configurations), and use 'Preview' to show the\nconfiguration you want to base the output on.  The Unique ID is the string of\ndash separated hexadecimal characters you will find in the Link for the preview page.<\/li>\n<\/ul><\/li>\n<li><p>For the <em>Event Cards shortcode<\/em>, place the shortcode into a page or post or\ninto a shortcode block. The shortcode will be:<\/p>\n\n<p>[cs-js-event-cards church_name=\"mychurch\" configuration=\"62436903-841e-4239-bc95-e6952e17430e\"]<\/p>\n\n<p>(replacing the church name and the configuration with your church name and\nthe Embed configuration unique ID you want to use)<\/p><\/li>\n<li><p>For the <em>Event List shortcode<\/em>, place the shortcode into a page or post or\ninto a shortcode block. The shortcode will be:<\/p>\n\n<p>[cs-js-event-list church_name=\"mychurch\" configuration=\"62436903-841e-4239-bc95-e6952e17430e\"]<\/p>\n\n<p>(replacing the church name and the configuration with your church name and\nthe Embed configuration unique ID you want to use)<\/p><\/li>\n<li><p>For the <em>Calendar shortcode<\/em> place the shortcode into a page or post or into a\nshortcode block. The shortcode will look like:<\/p>\n\n<pre><code>[cs-calendar church_name=\"mychurch\" configuration=\"62436903-841e-4239-bc95-e6952e17430e\"]\n<\/code><\/pre>\n\n<p>(replacing the church name and the configuration with your church name and\nthe Embed configuration unique ID you want to use.  The configuration should\nbe one which returns events for a number of month - the 'grid' option is\nbest to enable you to select the right data for this shortcode.)<\/p><\/li>\n<li><p>For the <em>Smallgroups shortcode<\/em>, place the shortcode into a page or post or\ninto a shortcode block. The shortcode will be:<\/p>\n\n<p>[cs-js-smallgroups church_name=\"mychurch\" configuration=\"62436903-841e-4239-bc95-e6952e17430e\"]<\/p>\n\n<p>(replacing the church name and the configuration with your church name and\nthe Embed configuration unique ID you want to use)<\/p><\/li>\n<\/ul>\n\n<p>Sadly, ChurchSuite developers won't allow us to use any parameters inline to\nmodify what data is received.  You must use the (very limited) configuration\navailable in the Embed Configuration.  The 'look and feel' of the data as\npresented on your website can be altered considerably by adding your own CSS\nto your theme file - all items output are within their own css classes and so\neverything can be styled to fit with your website.<\/p>\n\n<p>And, if you want to, you can use an HTML block to do your own output using\nAlpine.js.  Just follow the examples towards the bottom of\nhttps:\/\/kingshope.church\/events. The libraries you need have been impported for\nyou by this plugin, and so, for example, a simple unstyled list of event titles\ncan be generated by adding an HTML block with:<\/p>\n\n<pre><code>&lt;script&gt;CS.url = 'https:\/\/demo.churchsuite.com';&lt;\/script&gt;\n\n&lt;div&gt;\n  &lt;!-- Tell it which configuration to use... --&gt;\n  &lt;div x-data=\"CSEvents({configuration: '62436903-841e-4239-bc95-e6952e17430e'})\"&gt;\n    &lt;!-- ... and then get designing! --&gt;\n    &lt;template x-for=\"event in events\"&gt;\n      &lt;!-- There can only be one element within the template --&gt;\n      &lt;div&gt;\n        &lt;span x-text=\"event.name\"&gt;&lt;\/span&gt;\n      &lt;\/div&gt;\n    &lt;\/template&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n<p>(replacing <code>demo<\/code> with your church name, and the hex string with your\nconfiguration unique id).<\/p>\n\n<h3>License<\/h3>\n\n<p>The plugin itself is released under the GNU General Public License. A copy of\nthis license can be found at the license homepage or in the <code>csjs-integration.php<\/code>\nfile in the top comment.<\/p>\n\n<!--section=installation-->\n<ul>\n<li><p>From within Wordpress - In the Wordpress Dashboard use the menu to go to\nPlugins and from there choose 'Add new plugin'.  Search for 'churchsuite'\nand then look for this plugin.  Select the 'install' button on the plugin\nto install it, and once installed use the 'activate' link to activate the\nplugin.<\/p><\/li>\n<li><p>If you want to install from github:<\/p>\n\n<ul>\n<li>Download from 'releases'<\/li>\n<li>Rename the zip file downloaded 'cs-js-integration.zip' (i.e. remove any\nversion info in the filename)<\/li>\n<li>In Wordpress use the Install New Plugin page to upload the zip file, or\nalternatively, unpack and upload the cs-integration directory to your\n'\/wp-content\/plugins\/' directory.<\/li>\n<li>Once you have done either of the above, Activate the plugin through the\n'Plugins' page in the WordPress dashboard.<\/li>\n<\/ul><\/li>\n<li><p>Once you have used either method to install the plugin, you need to then\nadd a shortcode (see examples below) to your wordpress posts or pages where\nyou need them<\/p><\/li>\n<\/ul>\n\n<!--section=faq-->\n<dl>\n<dt id=\"the%20shortcode%20produces%20no%20output\"><h3>The shortcode produces no output<\/h3><\/dt>\n<dd><p>Check that you have supplied the correct churchname and the correct\n    configuration id. You can check this by entering the following URL in a\n    browser with your church name and the configuration id you are trying to use:<\/p>\n\n<pre><code>https:\/\/demo.churchsuite.com\/-\/calendar\/62436903-841e-4239-bc95-e6952e17430e\/json\n<\/code><\/pre><\/dd>\n<dt id=\"how%20do%20i%20add%20my%20church%20so%20that%20i%20get%20the%20json%20feed%20for%20my%20church%3F\"><h3>How do I add my church so that I get the JSON feed for my church?<\/h3><\/dt>\n<dd><p>You must use the shortcode <code>church_name<\/code> parameter and a valid configuration\n    for the type of data being displayed by the shortcode you are using - e.g.:<\/p>\n\n<pre><code>[cs-js-event-cards church_name=\"mychurch\" configuration=\"62436903-841e-4239-bc95-e6952e17430e\"]\n<\/code><\/pre><\/dd>\n<dt id=\"i%20want%20to%20limit%20the%20number%20of%20events%20in%20the%20shortcode\"><h3>I want to limit the number of events in the shortcode<\/h3><\/dt>\n<dd><p>You have to modify any limits on number of events through the Configuration you\ncreate on ChurchSuite<\/p><\/dd>\n<dt id=\"i%20want%20to%20change%20how%20the%20output%20looks%3A\"><h3>I want to change how the output looks:<\/h3><\/dt>\n<dd><p>The output is formatted via css - just override the defaults in your theme.\n    If you want something arranged in a different order, the output is produced\n    by Alpine.js HTML files in the shortcode directory shortcodes\/public\/inc - \n    you can modify the HTML that is output there.<\/p><\/dd>\n<dt id=\"i%20want%20to%20write%20a%20different%20shortcode\"><h3>I want to write a different shortcode<\/h3><\/dt>\n<dd><p>That is actually really easy to do using our shortcodes as a base.  But its\n    too long to explain how to here - contact the plugin author.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<p><strong>2025-04-08<\/strong>\n* Minor changes to correct issues identified by the Wordpress Directory\nplugin team:\n- the username of the developer (in readme.txt)\n- remove comments in code which were being read by the reviewer\n(erroneously) as actual code (in class-cs-js-integration-public.php)\n- a global DEFINE which was not prefixed - now a CONST within a namespace<\/p>\n\n<h4>v1.0.0<\/h4>\n\n<p><strong>2025-03-24<\/strong>\n* Added SVGs to the calendar drop-down. Ensured Event List only shows\n  dates when the date has changed to a new date.<\/p>\n\n<p><strong>2025-03-21<\/strong>\n* Added Calendar shortcode and tidied up all the css styling across the\nshortcodes<\/p>\n\n<p><strong>2025-03-11<\/strong>\n* Initial release of a usable small set of shortcodes, given the\nlimitations of the v3 Churchsuite JSON API.  All commented and made ready\nfor future submission to the Wordpress Plugin Directory.<\/p>","raw_excerpt":"JS Integration for ChurchSuite is provides ChurchSuite event and smallgroup details for display in a Wordpress website.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/227849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=227849"}],"author":[{"embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/dramb"}],"wp:attachment":[{"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=227849"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=227849"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=227849"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=227849"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=227849"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/arg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=227849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}