Embed events in your website

In addition to embedding your public-facing events calendar into your website, you can also embed a featured events feed - just like the featured events list that your church members see on the home page in My ChurchSuite. It's also possible to embed individual events directly into a page on your site. Here's how...

In this article

Embedding a featured events list in your website
Embedding an individual event page in your website

The Featured Events section in My ChurchSuite is hugely popular among churches wishing to raise the profile of important upcoming events among church members. Wouldn't it be great if you could do the same on your website? Well, you can!

ChurchSuite's Calendar module includes Embed functionality that enables you to create "Featured Events" embed code that can easily be copied and pasted into the source code or embed block section of a web page. As you add events to the Calendar module and set the event visibility to Show in Embed and Show in featured events, your web site is immediately updated. Unlike the the embeddable calendar, the featured events list is a feed, showing the next X featured events (you can set X) - as one event passes, the next event become visible in the feed. From the embedded list of featured events, web site visitors can click through to the featured event page and sign up!

In order to deploy a featured event feed to your web site, you'll first need to generate the embed code. Working within the Calendar module, click into the module's settings, accessed via the cogwheels icon in the top right corner of the module.

Select the Embed Options tab and, if not already enabled, click Edit to Enable embedding. The are two embed options - the Calendar and the Featured Events feed. See the related support article for further information about embedding your ChurchSuite Calendar. Note that only events set as Show in embed are shown in either Embed, but only events set as Show in featured events are shown in the Featured Events embed. Event visibility can be managed on an event-by-event basis - see the related support article for further information.

You can Preview your Featured Events feed at any time - helpful while you Customise the embed code to get the feed just the way you want it. Click Customise - as you make changes to the embed option here, updated embed code is generated - it's this embed code that you'll copy and paste into the source code of embed block of the page on your website.

The Embed options are essentially an embed code generator. You must copy and save the generated code (perhaps to a text file) before navigating away from the Embed Options - the embed code will reset to default when you leave the page.

On the Embed options pop-up (shown above), you can select which Categories to filter the event list by and whether to show a Category filter option on the embedded featured event list. By default, all featured events in the selected categories will be displayed in the embed, but you can also set the maximum number of Events to display if you wish. Multi-site customers can also select the site(s) from which events are to be included - perhaps just creating embed code for featured events for a particular site or sites. This may be helpful if each site has their own events section on a web site. Finally, you can also customise the Colour Styling so that your featured events list blends seamlessly with your website. Click Done when you have made your changes.

The embed code generated reflects the customisations you have made. Click Preview to see what the featured events list will look like. It's then a simple matter of copying and pasting the short line of embed code from the box (shown below) into the source code or embed block section of the appropriate page on your web site.

Do remember that the Customise feature is essentially an 'embed code generator' that enables you to potentially create multiple embed codes for different areas of your website if you wish. Each time you make changes, be sure to copy and paste your embed code - perhaps into a text file temporarily. When you navigate away from the Embed Options tab, the embed code generator settings are not saved and will reset back to the default settings.

The example below has customised settings that show the Category filter and only display the next 6 featured events.

Intended functionality

For featured events that are part of a sequence - whether Sign up to the sequence is enabled or not - we only display the next upcoming date in the sequence where the event names used within the sequence are not unique. So when your event calendar is quiet, you won't see duplicates of the same event filling up the Featured Event feed; allowing your other one-off featured events an opportunity to be featured too! For example, if you have a weekly "Alpha course" running as a Featured Event and you don't have any other Featured Events running at that time, you will just see the next Alpha course date in the "Featured" feed. Once one event sequence date passes, the next date in the Alpha course sequence will show, and so on. However, if you do wish to show multiple dates from the same event sequence, ensure each date has different event names - each next uniquely-named featured event in a sequence is shown in the featured events feed.

Displaying your Featured Event feed

Ordinarily, the Featured Events "embed" will render your events in block format as follows...

However, if due to the page width, the iFrame 'width' falls below 992px, the iFrame content will be responsively re-rendered to display the same feed in a list format as follows...

Smaller screen devices may also render your web page and featured events block in this same list format.

Top tips!

You can optionally customise the height and width of the calendar. For height and width, find the bits of the code that say "height=400" and "width=100%". To make the calendar higher, for instance, you could replace the "400" with "600", or "800".

You can additionally choose whether or not your embedded calendar is to have the option to scroll up and down available events within itself or not - define the 'scrolling=' value appropriately as yes or no.

Embedding an individual event page in your website

When someone clicks on an event from your web-embedded ChurchSuite calendar or featured events list, the Event Page opens in a new browser page. However it's possible to embed an Event Page into a page on your own website. This might be useful in the context of certain church events where you already have a webpage styled and designed for your particular event, and you just want to embed the ChurchSuite sign-up form for that event, rather than re-direct the user to the ChurchSuite event page in a new browser page.

For events set as Visible in the embeddable calendar (shown below), clicking the Embed link will open the Embed Code Generator for that event.

On the Embed customisation pop-up that opens, select (or deselect) each of the display Options you require and click Preview to see what the event page will look like. Once you are happy, copy the Embed Code from ChurchSuite into the source code or embed block section of the page on your website where you would like the event page embedded. Click X to close the pop-up when you are finished.

Using the Options above, it's possible, for example, to select not to show any of the event details, image, description, location and map - perhaps where you already have all that information on your own web page, and you just need the Sign-Up Form embedded.

Still need help? Contact ChurchSuite Contact ChurchSuite