It's easy to embed beautiful ChurchSuite events 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 events are styled, and are up for a little coding, skip ahead to the Embed using JSON Feeds section.
ChurchSuite also provides a wonderfully designed church calendar that you can quickly and easily embed in your church's website.
Not only is it customisable to your church's look and feel, but it stays up to date and even lets your members sign up to your events! On the calendar below, try clicking on some of the events!
Handy with HTML and CSS? You can use our JSON feed to style your upcoming events to fit in with your website's design! Using the feed also improves your site's SEO and helps users find your site.
In this example we're using Alpine.js with a script we wrote (that you can use in your website!) to pull in our demo data from the JSON feed in a simple way, and give it a bit of custom styling using Tailwind CSS. Check out the code we used below and see how you can adapt it for your website.
We've recently updated our Calendar events JSON feed (which this script uses) to add a selection of new filtering and merging parameters, and so we've released a new version (v2) of our script to make use of them. This has included a change from only showing Featured Events to being able to see all events - if you're already using the script and want to update without any visual changes, simply add a 'featured' parameter to the x-data.
<head>
<!-- In this example, we are styling using tailwind css, but you don't have to if you don't want to. -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link href="https://unpkg.com/@tailwindcss/[email protected]/dist/custom-forms.min.css" rel="stylesheet">
<!-- Alpine.js is required, though -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<!-- This is our ChurchSuite script, to make your life easy! -->
<script src="https://unpkg.com/@churchsuite/embed@^3"></script>
<!-- You will also need to add this inline script, and update it to the right URL for your church. -->
<script> CS.url = 'demo.churchsuite.com' </script>
</head>
<body>
<!-- Within the body, add a div with an x-data attribute. -->
<div x-data="CSEvents({featured: 1})" class="max-w-screen-lg mx-auto">
<div class="gap-x-4 gap-y-4 grid grid-cols-1 sm:grid-cols-2 mb-4 mx-4 sm:mx-auto">
<!-- Add the following input for a search bar. -->
<input
x-model="search"
placeholder="Search events..."
type="search"
class="bg-gray-200 border-2 border-gray-200 focus:bg-white focus:outline-none font-bold px-4 py-3 rounded-lg sm:col-span-2 text-gray-700"
/>
<!-- Category selector -->
<select x-model="category" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
<option value="">Filter by Category</option>
<template x-for="category in categories">
<option x-text="category"></option>
</template>
</select>
<!-- Site selector -->
<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>
<!-- This is the main event cards section -->
<div class="bg-gray-200 justify-around overflow-scroll sm:px-4 py-8 rounded sm:flex sm:flex-wrap w-full" style="height: 730px">
<!-- Add a template element with this x-for attribute. This is saying 'for each event, make a copy of this template' -->
<template x-for="event in events.slice(0,9)">
<div class="mx-2 relative">
<!-- If the event has a link, this anchor tag will make the card into a clickable link -->
<a :href="event.link" class="absolute inset-0 z-10" :class="{'hidden': event.link == ''}" target="_blank"></a>
<div class="bg-white duration-500 flex hover:-translate-y-2 mb-6 hover:shadow-xl rounded sm:flex-col sm:h-72 transform transition">
<!-- Event Image -->
<div>
<img :src="event.image" :alt="event.name" class="h-20 w-56 sm:h-32 sm:w-60 object-cover rounded-l sm:rounded-l-none sm:rounded-t">
</div>
<!-- Event Information -->
<div class="sm:mt-2 sm:h-full w-full sm:w-60 sm:px-3 sm:pb-3 flex flex-col justify-between ml-2 sm:ml-0">
<!-- Use the x-text attribute to show the event information -->
<h3 x-text="event.name" class="overflow-hidden h-6 mt-1 sm:mt-0 sm:h-full font-bold text-base sm:text-lg"></h3>
<div class="font-light text-sm sm:text-base text-gray-700 sm:mt-2 sm:mt-auto sm:text-right">
<p x-text="event.start.format('dddd, D MMMM')" class="hidden sm:block">></p>
<p x-text="event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma')" class="hidden sm:block">></p>
<p x-text="event.start.format('ddd D MMM, ') + (event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma'))" class="pb-2 sm:hidden"></p>
<p x-text="(event.online ? 'Online - ' : '') + event.location" class="hidden sm:block"></p>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</body>
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.
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/[email protected]/dist/custom-forms.min.css" rel="stylesheet">
<!-- Alpine.js is required for the ChurchSuite script -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<!-- This is our ChurchSuite script, to make your life easy! -->
<script src="https://unpkg.com/@churchsuite/embed@^3"></script>
<!-- You will also need to add this inline script, and update it for your church. -->
<script> CS.url = 'demo.churchsuite.com' </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 event data locally for a short period, so if you've recently updated an event on ChurchSuite and aren't seeing the changes in the browser, try clearing your browser's local storage!
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. You can also send extra URL parameters to the ChurchSuite API by passing them into CSEvents - check out our GitHub repo for available parameters. You'll notice that in our example, we're only showing Featured events, but you may also want to explore merge strategies or other filters.
<body>
<!-- Within the body, add a div with an x-data attribute. -->
<div x-data="CSEvents({featured: 1})">
<!-- Any elements you put in here can now access your ChurchSuite feed data! -->
</div>
</body>
We use Alpine's x-model to link an input element into your events data as a search parameter. Simply create an input element, drop in the yellow x-model attribute, and whatever you type in the searchbox will automatically filter your events!
<input
x-model="search"
placeholder="Search events..."
type="search"
/>
Note that with no API parameters or filters, events will default to merging with the signup_to_sequence strategy, so that you see a selection of different events. If filters are used (such as a search box or category dropdown), though, all events will show with no merging.
For example, a single Alpha Course might show by default, but by searching for Alpha, the whole sequence of events appears. See our API docs for more information, or alternative merge strategies.
In a similar way, we can use x-model to create dropdown filters to filter by category or site. The example below is filtering by category, but you can change each instance of 'category' to 'site' if you would like. If your ChurchSuite account is multisite and your events belong to one site, you may want to use the site filter - if an event is All Sites, it will always show.
<select x-model="category" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
<option value="">Filter by Category</option>
<template x-for="category in categories">
<option x-text="category"></option>
</template>
</select>
<div x-data="CSEvents({category: 12})">
<div x-data="CSEvents({num_results: 1, q: 'alpha'})">
The final piece of the puzzle is styling each event to match your website design. This works using Alpine and templates.
Create a template element containing the styled HTML for a single element card - in our example, we have the event image with details below, all wrapped in an anchor element so that it becomes a clickable link to the signup page. Add the Alpine x-for attribute (shown below in yellow) to the template, and when the page loads it will repeat the template for each event (or each event matching the search or category filters, if you are using them!).
Wherever you want text information about the event, 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 event. For the event link, create an anchor element (<a>) with an :href="event.link" attribute - note the colon! Similarly for images, create an <img> element and add a :src="event.image" attribute. For a full list of information keys you can use, see below.
Our script comes bundled with Day.js for fully flexible styling of dates and times. Simply use the format function on an event.start or event.end 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.
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="event in events">
<div class="mx-2 relative">
<!-- If the event has a link, this anchor tag will make the card into a clickable link -->
<a :href="event.link" class="absolute inset-0 z-10" :class="{'hidden': event.link == ''}" target="_blank"></a>
<div class="bg-white duration-500 flex hover:-translate-y-2 mb-6 hover:shadow-xl rounded sm:flex-col sm:h-72 transform transition">
<!-- Event Image -->
<div>
<img :src="event.image" :alt="event.name" class="h-20 w-56 sm:h-32 sm:w-60 object-cover rounded-l sm:rounded-l-none sm:rounded-t">
</div>
<!-- Event Information -->
<div class="sm:mt-2 sm:h-full w-full sm:w-60 sm:px-3 sm:pb-3 flex flex-col justify-between ml-2 sm:ml-0">
<!-- Use the x-text attribute to show the event information -->
<h3 x-text="event.name" class="overflow-hidden h-6 mt-1 sm:mt-0 sm:h-full font-bold text-base sm:text-lg"></h3>
<div class="font-light text-sm sm:text-base text-gray-700 sm:mt-2 sm:mt-auto sm:text-right">
<p x-text="event.start.format('dddd, D MMMM')" class="hidden sm:block">></p>
<p x-text="event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma')" class="hidden sm:block">></p>
<p x-text="event.start.format('ddd D MMM, ') + (event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma'))" class="pb-2 sm:hidden"></p>
<p x-text="(event.online ? 'Online - ' : '') + event.location" class="hidden sm:block"></p>
</div>
</div>
</div>
</div>
</template>
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 dates or times can also be localised.
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', 'sk' and 'sv'.
<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/[email protected]/dist/custom-forms.min.css" rel="stylesheet">
<!-- Alpine.js is required for the ChurchSuite script -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<!-- This is our ChurchSuite script, to make your life easy! -->
<script src="https://unpkg.com/@churchsuite/embed@^3"></script>
<!-- You will also need to add this inline script, and update it for your church. -->
<script> CS.url = 'demo.churchsuite.com'; CS.locale = 'de'; </script>
</head>
This is a list of data keys you can use for each event.
Finally, there is one more key you could use, should you need more information still.
Create events, take online payments, subscribe to iCal feeds and manage staff leave.