Embed events on your website

In addition to embedding a grid-view events Calendar into your website - explained in the related support article - you can also embed Events feeds of your featured and/or non-featured events. Event feeds are perfect for a website home page, giving website visitors an up-to-date feed of upcoming pertinent events. You can even generate category-specific event feeds, ideal for adding a children's event feed to your children's ministry section on your website. It's also possible to embed an individual event directly into a page on your site.

Your ChurchSuite Calendar module includes powerful Embed functionality that enables you to generate customised "Event Feed" embed code that can then be copied and pasted into the source code or embed block section of a page on your website. Once embedded - and as you add or make changes to events in the Calendar module - the feed on your website is updated automatically every 15 minutes.

Embedded event feeds only show those public-facing events whose visibility has been set to Show in Embed; private events with Show in Embed disabled are never surfaced in an event feed. You can generate embed code for an event feed of non-featured and featured events or just your featured events (i.e. events with visibility also set to Show in featured events). Unlike the embeddable 'grid view' Calendar, events feeds are lists of future events; as each event passes it disappears from the feed, so the feed is always up to date. The events listed in the feed are fully interactive, so website visitors can click on an event in the feed to be taken through to the event page and, depending on the event's settings, they can even signup.

You can further customise an event feed, perhaps to just include events for certain categories or to just show a fixed number of events. For sequence events, you can control how the sequence is displayed - perhaps just showing the next future date in the sequence or the next uniquely-named event in the sequence or all future dates in the sequence. You can even control the feed styling and layout.

It's important to remember that the Customise options described in this article are essentially an embed code generator, with new embed code being generated based on the embed options you select. In this way you can use the Customise options to produce embed code for multiple feeds, perhaps with different event categories for the category-specific pages on your website, like a Youth page, a Discipleship page or a Courses page.

Customising an event feed and generating embed code

To add an event feed to a page on your website, you'll first need to generate the embed code from within ChurchSuite, using the embed options located in the Calendar module's settings, accessed via the cogwheels icon in the top-right corner of the module. From here, select the Embed Options tab and, if not already enabled, click Edit to Enable embedding. If embedding is disabled, any existing embedded event feeds or calendars will cease to work until embedding is enabled.

Once enabled, you will see two embed options, shown below - the Calendar and the Events feed. See our related support article for further information about embedding your ChurchSuite Calendar. Remember, only events with visibility set as Show in embed are surfaced in an embedded Calendar or an embedded Event feed and only events with visibility set as Show in featured events will show in a featured-only event feed. Event visibility is managed on an event-by-event basis, which means you have complete control over which events will be visible/featured, through the embed, to your website visitors - see our related support article for further information about managing event visibility.

Check out our embed demonstration site

We've created a demonstration website to showcase all of ChurchSuite's embed functionality. The Events section of the site describes the simple 'copy and paste' method using iFrames - which is what's explained in detail in this article - or for more control and better search engine optimisation, check out the section on our events JSON feed functionality.

Let's now look at the Events feed Customise options. Notice how you can Preview the Events feed at any time to see what your customised feed will look like. Importantly, as you make changes to the embed options on the Customise pop-up, a new embed code is generated - it's this single line of embed code that you'll copy from ChurchSuite and paste into the source code or embed block of the appropriate page on your website. Note that if you navigate away from the module settings and later return, the embed options and embed code will reset back to system defaults, so be sure to copy any embed code you've generated before leaving the module's settings. If you later make changes to the Customise options, you'll need to copy and paste the newly-generated code to your website.

Clicking Customise opens the Embed options pop-up. There are lots of customisation options to choose from as you scroll down the pop-up, so let's look at each of them in turn...

You can optionally select the Categories to filter the event feed by, and whether to Show a category filter on the embedded event list. In this way you can create feeds for just selected categories and, if multiple categories are selected, the category filter will enable website visitors to select between those different categories. Note that selected categories with future-dated events will be shown in the category filter - categories with no future events will not be shown to your website visitors. By default, all events will be displayed in the feed but you can optionally set a fixed maximum number of Events to display - ideal if you have a busy calendar and wish to spare your website visitors from endlessly scrolling a long list of events!

Continuing down the Embed options pop-up, multi-site customers can optionally select to only show events for a selected Site. This may be helpful if your sites each have their own events section on a website. You can also optionally Show a site filter on the embed feed to give your website visitors a drop-down site selector.

Next, choose whether to provide your website visitors with an event Search bar, which will be located at the top of the embedded feed. As your website visitors begin to type a partial event name, the matching list auto-filters to show matching results. By default, an event feed will only include featured events - i.e. those events with visibility set to Show in Featured Events - but unticking Featured only will surface all events in the feed, whether featured or not.

Next, choose how similar events in a sequence are combined or whether to show all events in a sequence.

Combine similar events - explained...

There are four options controlling how event sequences are combined in an event feed.

1) By sign up to sequence (default)
For sequence events with "Sign up to sequence" enabled, the feed will only show the next uniquely-named future event in the sequence. And for sequence events that do not have "Sign up to sequence" enabled, the feed will only show the next future event in the sequence; however, the feed will also show all future-dated, ☑️ signup-enabled events. Consider these two examples:

Alpha Course (01-Jan-2022) Sign up to sequence enabled, so the first future date is included
~~Alpha Course (08-Jan-2022)~~ (name matches with the previous date, so excluded)
Alpha Away Day (15-Jan-2022) (unique name, so displayed)
~~Alpha Course (22-Jan-2022)~~ (name matches with the previous date, so excluded)

Sunday Service (01-Jan-2022) Sign up to sequence disabled
~~Sunday Service (08-Jan-2022)~~ (name matches with the previous date, so excluded)
☑️ Sunday Service (15-Jan-2022) (sign-up enabled, therefore included)
☑️ Sunday Service (22-Jan-2022) (sign-up enabled, therefore included)
~~Sunday Service (29-Jan-2022~~ ) (sign-up disabled, name matches previous, so excluded)

This option gives the most versatility for organisations with a busy events calendar; ensuring feeds just show the next pertinent date for each "Signup to sequence" enabled sequence and also showing all signup-enabled events where "Signup to sequence" is disabled.

2) By sequence
This option only shows the next upcoming event from each sequence. As each event passes, the next date in the sequence is shown. For example:
Alpha Course (01-Jan-2022)
~~Alpha Course (08-Jan-2022)~~ (event name is not a factor, so excluded)
~~Alpha Course Away Day (15-Jan-2022~~ ) (the unique name is not a factor, so excluded)

3) By sequence & name
This option shows the next upcoming, uniquely-named events in the sequence. Consider this sequence example:

Membership 101 (01-Jan-2022)
Membership 101: Beliefs (01-Feb-2022) (unique name, so displayed)
~~Membership 101: Beliefs (08-Feb-2022)~~ (name matches with the previous date, so excluded)
Membership 101: Next Steps (01-Mar-2022) (unique name, so displayed)
~~Membership 101: Next Steps (08-Mar-2022)~~ (name matches with the previous date, so excluded)

Subsequent events from the sequence that contains a repeated name are not displayed.

4) Show all events
This option doesn't combine any event dates in a sequence and shows all future events in the sequences.

Next, optionally customise the Styles, so that the events feed content blends with your website. As you make changes to the Styles settings, the Preview updates. You'll maximise visual accessibility by setting sufficient contrast between background colours and the foreground text and using colours that work best for those with colour vision deficiency.

Finally, click Done when you have finished customising all the embed options. You can now Preview your event feed but you can return to the Embed options pop-up again should you wish to make further changes. The embed code generated reflects the customised options you have selected. All that remains is to copy and paste the single line of embed code from the box in ChurchSuite into the source code or embed block section of the appropriate page on your website.

Top tips!

You can optionally further customise the height and width of the event feed iFrame. For height and width, locate the elements of the code that say height="400" and width="100%" and adjust accordingly to better suit the web page and the number of events you expect in your feed.

You can also choose whether website visitors can scroll vertically within the iFrame - essential for long lists of events in a busy calendar. Locate the setting for scrolling= and set the value to "yes" or "no".

Embedding an individual event into a page on your website

When your website visitors click on an event in your web-embedded ChurchSuite calendar or embedded Events feed, the Event Page is opened in a new browser page. While this is usually a desirable workflow - returning the website visitor to your website when the event page is closed - it is also possible to embed elements of the Event Page directly into a page on your website. This might be useful in the context of events where you already have a webpage styled and designed for your particular event but where you simply wish to embed the ChurchSuite "sign-up form" element and keep the website visitor on your web page. For example, you may have a web page devoted to your upcoming Church Weekend Away, with lots of information about the event. With the event embed functionality, you can embed the ChurchSuite signup form directly into a page on your website.

For events with visibility set to Show in Embed, clicking on the Embed link will open the Embed Code Generator for that event.

On the Embed pop-up, select each of the display Options you require and click Preview to see what the event embed looks like. Once you are happy, copy the Embed Code from the pop-up into the source code or embed block section of the page on your website where you would like the event page shown. Click X to close the Embed 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 or map - perhaps where you already have all that information on your web page and you just need the Sign-Up for embedded.

Embed events on your website