Kings Hope Logo

Small Groups

ChurchSuite Demo Church website

Photo by Sincerely Media on Unsplash

Embed small groups in your website

Make your small groups accessible on your website with ChurchSuite!

For a simple copy and paste method check out the iFrames section, or for more control and better search engine optimisation, check out our JSON feed.

Embed using iFrames

It's easy to embed beautiful ChurchSuite groups data in your website. Check out our Support Article to see how you can do it, just by copying and pasting a single line of code to your website!

If you want complete control over how your groups are styled, and are up for a little coding, skip ahead to the Embed using JSON Feeds section.

Customisable iFrames Group List

The example below shows "Special Interest" groups and lets you filter them by day of the week.

Embed Maps

How about a beautiful map that shows where all your small groups meet? ChurchSuite provides a line of code for you to paste in your website - find out how!

Embed Small Groups using JSON feeds.

If you're up for a bit of coding, using our JSON feeds will give you maximum control over how your data is presented, as well as being super SEO (Search Engine Optimization) friendly! It takes a little more work than using an iFrame, but it means you can tailor the design to match your website perfectly.

Below is an example of how to display your groups with various filters - if you don't want a filter on your website, just don't include the code! Take a look at the code and explanation to see how replicate this on your website.

		
<head>
	<!-- We use Tailwind CSS for styling, because we think it's great, but you don't have to. -->
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.min.css" rel="stylesheet">
	
	<!-- Alpine.js is required for the ChurchSuite script -->
	<script src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js" defer></script>
	
	<!-- This is our ChurchSuite script, to make your life easy! -->
	<script src="https://unpkg.com/@churchsuite/embed@1.1.0"></script>	
	
	<!-- You will also need to add this inline script, and update it for your church. -->
	<script> CS.url = 'demo.churchsuite.co.uk' </script>
</head>
<body>
	<!-- Within the body, add a div with an x-data attribute. -->
	<div x-data="CSGroups" class="max-w-screen-lg mx-auto">
		<!-- 
			There are 3 ways to filter your groups - by day, tag, or by searching.
			If you don't want to include a filter, simply remove its input element - none of them are required.  
		-->
		<div class="gap-x-4 gap-y-4 grid grid-cols-1 sm:grid-cols-2 mb-4 mx-4 sm:mx-auto">
			<!-- Search box -->
			<input
				x-model="search"
				placeholder="Search groups..."
				type="search"
				class="bg-gray-200 border-2 border-gray-200 col-span-full focus:bg-white focus:outline-none focus:shadow font-bold px-4 py-3 rounded-lg text-gray-700"
			/>

			<!-- Cluster Dropdown -->
			<select x-model="cluster" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
				<option value="">Filter by Cluster</option>
				<template x-for="cluster in clusters">
					<option x-text="cluster"></option>
				</template>
			</select>

			<!-- Day Dropdown -->
			<select x-model="day" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
				<option value="">Filter by Day</option>
				<template x-for="day in days">
					<option x-text="day"></option>
				</template>
			</select>

			<!-- Tag Dropdown -->
			<select x-model="tag" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
				<option value="">Filter by Tag</option>
				<template x-for="tag in tags">
					<option x-text="tag"></option>
				</template>
			</select>

			<!-- Site Dropdown -->
			<select x-model="site" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
				<option value="">Filter by Site</option>
				<template x-for="site in sites">
					<option x-text="site"></option>
				</template>
			</select>
		</div>

		<!-- Group Cards Section -->
		<div class="flex flex-wrap text-gray-800 lg:h-screen-2/3 overflow-auto w-full">
			<template x-for="group in groups">
				<!-- We've wrapped everything in an anchor tag to link to the groups sign up page. -->
				<a :href="group.link" class="flex flex-col items-center lg:w-1/3 my-6 px-2 w-full" target="_blank">
					<div class="flex flex-col sm:flex-row lg:block relative">
						<!-- Group Image -->
						<img :src="group.image" :alt="group.name" class="h-auto lg:w-full object-cover overflow-hidden sm:w-1/2 w-full">
						
						<!-- Group Information -->
						<div class="lg:absolute lg:top-0 p-4 lg:bg-black lg:bg-opacity-50 flex flex-col lg:h-full lg:opacity-0 lg:hover:opacity-100 
							lg:text-center transition duration-300 text-sm lg:text-white overflow-auto sm:w-1/2 lg:w-full w-full">
							<p x-text="group.name" class="lg:hidden font-semibold text-lg uppercase"></p>
							<p><span x-text="group.frequency" class="capitalize"></span>: <span x-text="group.day.format('dddd')"></span></p>
							<p x-text="group.time.format('h:mma')"></p>
							<p x-text="group.location"></p>
							<p>Started: <span x-text="group.dateStart.format('MMM YYYY')"></span></p>
							<p x-show="group.signupCapacity"><span x-text="group.signupCapacity - group.members"></span> spaces left</p>
							<!-- Add group.description with the x-html attribute. -->
							<p x-html="group.description" class="mt-5 text-left"></p>
						</div>
					</div>
					<p x-text="group.name" class="hidden h-8 p-2 font-semibold lg:block lg:h-16 mb-2 text-center text-lg sm:text-xl uppercase"></p>
				</a>
			</template>
		</div>
	</div>
</body>
		
	

Adding in your data

To add data to your site, we use Alpine.js with a script we've written to make life easy for you, to bring our ChurchSuite JSON feeds into your website in an easy to use package. Check out the example in the Code tab as we track the portions highlighted in yellow.

Script tags

The first thing you'll need are a few <script> tags within the head section of your HTML document, without which nothing will work. Tailwind is optional (but recommended - it's great!), Alpine and ChurchSuite are required.

You will also need to add the inline script at the bottom, and update the yellow text to the URL you use to log into your church's ChurchSuite account.

					
<head>
	<!-- We use Tailwind CSS for styling, because we think it's great, but you don't have to. -->
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.min.css" rel="stylesheet">
	
	<!-- Alpine.js is required for the ChurchSuite script -->
	<script src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js" defer></script>
	
	<!-- This is our ChurchSuite script, to make your life easy! -->
	<script src="https://unpkg.com/@churchsuite/embed@1.1.0"></script>	
	
	<!-- You will also need to add this inline script, and update it for your church. -->
	<script> CS.url = 'demo.churchsuite.co.uk' </script>
</head>
					
				

These are best placed in the head, but if you don't have access to the head, you can also put them in the body before your code.

We cache the group data locally for a short period, so if you've recently updated a group on ChurchSuite and aren't seeing the changes in the browser, try clearing your browser's local storage!

x-data

Add an x-data attribute to the outer container (in this case, a div element) of your ChurchSuite section. This comes from Alpine, but allows you to access all of your ChurchSuite feed data in any child elements.

					
<body>
	<!-- Within the body, add a div with an x-data attribute. -->
	<div x-data="CSGroups">
		<!-- Any elements you put in here can now access your ChurchSuite feed data! -->
	</div>
</body>
					
				
You can use multiple x-data sections on one page if you like - perhaps you want to have a separate section for groups from each cluster, using the filters below.

You can also extra URL parameters to the ChurchSuite API if you need to - check out our GitHub repo for available parameters, and send any you need by passing an object to CSGroups like this:
						
<div x-data="CSGroups({tag: 1})">
						
					

Adding a search box

We use Alpine's x-model to use an input element as a searchbox. Simply create an input element, drop in the yellow x-model attribute, and whatever you type in the searchbox will automatically filter your small groups!

Adding a searchbox or dropdown filters is optional - include any that you want, or leave them all out to show all events!

					
<input
	x-model="search"
	placeholder="Search groups..."
	type="search"
/>
					
				

Adding dropdown filters

In a similar way, we can use x-model to create dropdown filters to filter by day, tag, cluster or site. The example below is filtering by day, but you can change each instance of 'day' to 'site', 'cluster' or 'tag' to filter by different properties. Tags are set in ChurchSuite, and can be used to group Small Groups by type. If your ChurchSuite account is multisite and your groups belong to one site, you may want to use the site filter - if a group is All Sites, it will always show.

					
<select x-model="day" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
	<option value="">Filter by Day</option>
	<template x-for="day in days">
		<option x-text="day"></option>
	</template>
</select>
					
				
Want to only show events from one day, tag or site, without showing a dropdown? Simply add an x-init attribute next to your x-data="CSGroups"!
						
<div x-data="CSGroups" x-init="{filter} = {value}">
						
					
For example, to only show events on a Tuesday, your container would look like this:
						
<div x-data="CSGroups" x-init="day = 'Tuesday'">
						
					

Styling each group

The final piece of the puzzle is styling each group to match your website design. This works again using Alpine and templates.

Templating

Create a template element containing the styled HTML for a single element card - in our example, we have the group image with overlayed details that display when hovering over the image. This is all wrapped in an anchor element so that it becomes a clickable link to the signup page. Add the x-for show below to the template, and when the page loads it will repeat the template for each small group (or each group matching the search and day/tag filters, if you're using them!).

Wherever you want text information about the group, such as name or location, simply create a text element (such as a <p> or <span>) and give it an x-text attribute - when the template runs, it will fill in the information for each group. For the group link, create an anchor element (<a>) with an :href="group.link" attribute. Similarly for images, create an <img> element and add a :src="group.image" attribute.

Dates and Times

Our script comes bundled with Day.js for fully flexible styling of dates, days and times. Simply use the format function on a group time or date property to format it however you would like - check out the Day.js docs for a list of format options. Any of the options listed, including preset localised formats (see localisation for more information) are available for your use.

For a full list of information keys you can use, see below.

All the classes you see in our code with strange names like w-60 or font-bold - that's Tailwind CSS. It doesn't do anything functionally, so you could remove it and use standard CSS if you like!

					
<template x-for="group in groups">
	<!-- We've wrapped everything in an anchor tag to link to the groups sign up page. -->
	<a :href="group.link" class="flex flex-col items-center lg:w-1/3 my-6 px-2 w-full" target="_blank">
		<div class="flex flex-col sm:flex-row lg:block relative">
			<!-- Group Image -->
			<img :src="group.image" :alt="group.name" class="h-auto lg:w-full object-cover overflow-hidden sm:w-1/2 w-full">
			
			<!-- Group Information -->
			<div class="lg:absolute lg:top-0 p-4 lg:bg-black lg:bg-opacity-50 flex flex-col lg:h-full lg:opacity-0 lg:hover:opacity-100 
				lg:text-center transition duration-300 text-sm lg:text-white overflow-auto sm:w-1/2 lg:w-full w-full">
				<p x-text="group.name" class="lg:hidden font-semibold text-lg uppercase"></p>
				<p><span x-text="group.frequency" class="capitalize"></span>: <span x-text="group.day.format('dddd')"></span></p>
				<p x-text="group.time.format('h:mma')"></p>
				<p x-text="group.location"></p>
				<p>Started: <span x-text="group.dateStart.format('MMM YYYY')"></span></p>
				<p x-show="group.signupCapacity"><span x-text="group.signupCapacity - group.members"></span> spaces left</p>
				<!-- Add group.description with the x-html attribute. -->
				<p x-html="group.description" class="mt-5 text-left"></p>
			</div>
		</div>
		<p x-text="group.name" class="hidden h-8 p-2 font-semibold lg:block lg:h-16 mb-2 text-center text-lg sm:text-xl uppercase"></p>
	</a>
</template>
					
				

Localisation

ChurchSuite supports a number of languages, and so does our Embed script. Almost all of the data comes straight from your ChurchSuite account, so will already be in whichever language you use, but any days, dates or times can also be localised. This will also translate the days provided in the day dropdown filter, if you choose to use it.

To set your ChurchSuite embedded sections to use a particular locale, add an extra command in your <head> next to where you defined your ChurchSuite URL - the default locale is 'en', but other locales available are 'da', 'de', 'es', 'fr', 'it', 'nl', 'pl', 'se' and 'sk'.

					
<head>
	<!-- We use Tailwind CSS for styling, because we think it's great, but you don't have to. -->
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.min.css" rel="stylesheet">
	
	<!-- Alpine.js is required for the ChurchSuite script -->
	<script src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js" defer></script>
	
	<!-- This is our ChurchSuite script, to make your life easy! -->
	<script src="https://unpkg.com/@churchsuite/embed@1.1.0"></script>	
	
	<!-- You will also need to add this inline script, and update it for your church. -->
	<script> CS.url = 'demo.churchsuite.co.uk'; CS.locale = 'de'; </script>
</head>
					
				

Available Group Data

This is a list of data keys you can use for each Small Group.

  • group.cluster

    The name of the cluster a group belongs to.
  • group.customFields

    If you have custom field data, group.customFields contains an array of that data. You may want to use another template 'x-for' to list all the custom fields, as shown below. Custom field properties available are 'field.id', 'field.name', 'field.value' and 'field._original' (_original contains the complete raw data).
    							
    <template x-for="field in groups.customFields">
    	<span x-text="field.name"></span>
    </template>
    							
    						
  • group.dateStart

    The date the group started, as a Day.js object. For example, try group.dateStart.format('LL').
  • group.day

    The day of the week the group meets, as a Day.js object. For example, try group.day.format('dddd').
  • group.description

    The group description, in HTML format, ready to drop into a text element. Use this with an x-html attribute instead of x-text.
  • group.frequency

    The frequency of meetings, for example 'weekly'. If a group has a custom frequency, group.frequency will contain a description of the frequency.
  • group.image

    The group image URL - set it as the :src attribute on an element to display your group image. If there is no image available, the brand emblem will display. Note that there are more size options in _original, below, if required.
  • group.link

    The URL to the small group signup page on ChurchSuite.
  • group.location

    The location name, for example 'Bonnie's house'.
  • group.members

    The integer number of members in the group.
  • group.name

    The group name.
  • group.online

    A boolean true or false as to whether a group is online or in person - if true, the group is online.
  • group.signupCapacity

    The integer maximum number of signups for a group, if group signup is in use.
  • group.signupStart

    The date that signups open for a group, if group signup is in use, as a Day.js object. For example, try group.signupStart.format('LL').
  • group.signupEnd

    The date that signups closes for a group, if group signup is in use, as a Day.js object. For example, try group.signupEnd.format('LL').
  • group.tags

    An array of tags for the group - each tag is an object with id and name properties. You can use Alpine's 'x-for' to display this data, like the custom fields example above.
  • group.site

    The name of the ChurchSuite site the group belongs to.
  • group.time

    The start time of group, as a Day.js object. For example, try group.time.format('LT').

Finally, there is one more key you could use, should you need more information still.

  • group._original

    This is an object containing the original JSON response. There is other information in here such as the site and other sizes of image - have a look and see, or check out our ChurchSuite JSON feeds.

Small groups with ChurchSuite

Small Group management for churches – software that helps build community.

Start your free trial today! Don’t just take our word for it. Try it for yourself! We’d love you to take up this 30 day free trial so you can see how ChurchSuite will benefit you.