Embedding events in your website

In addition to embedding your public-facing events calendar in your website, you can also embed a featured events list - just like the featured events your church members see in My ChurchSuite. You can also embed an event page, or even just the sign-up form, into your website.

In this article

Embed a featured events list in your website
Embed an event's sign-up form in your website

The "Featured Events" section in My ChurchSuite has been hugely popular among churches wishing to raise the profile of significant 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 allows you to create "Featured Events" embed code that easily be copied and pasted into the source code section of a web page. The embedded list incorporates hyperlinks to your ChurchSuite event pages - making it super easy for people to sign up!

Featured Events embed is configured in the Calendar module settings. Click the cog-wheels in the top right corner of the module - you'll need Administrator or Manage module permissions to do this.

Select the Embed tab. Here, if not already done so, you'll need to "Enable embedding". Doing so will allow you to select "Visible in Embed" when you are setting up events in the Calendar; meaning you can set your events to be visible in embed on an event-by-event basis.

The first embed code section relates to embedding your ChurchSuite events calendar - see the related support article to use this feature. The second embed code section relates to Featured Events embed. Click "Customise".

Now you can specify which Categories to filter the event list by and whether to display a Category filter option on the embedded 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.

You can customise your embed code further by generating site-specific code, perhaps just creating embed code for featured events for a particular site or sites (for multi-site churches only). This may be helpful if your church sites have their own designated event pages on your website.

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.

Having saved your changes, select "Preview featured events" to see what the list will look like. It's then a simple matter of copying and pasting the short line of embed code from the box into the source code section of your web page.

Do remember that the "Customise" feature is essentially an 'embed code generator' that allows 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 word document. When you click "Save changes" the embed code generator settings are not saved and revert back to the default settings.

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

Once embedded into your website, any web visitor who clicks on an event will be taken to the event page where they can sign-up and obtain tickets for your event (if sign-up is enabled on the event).

Intended Functionality

For events that are part of a sequence - whether 'sign-up to 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 Feature Event feed; allowing you other one-off 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 that event date passes, the next date in the Alpha course sequence will show, and so on. However, if the events within the same sequence have different event names then we do show the next uniquely-named featured event in the featured feed.

Embed an event's sign-up form in your website

Ordinarily, when someone clicks on an event in your web-embedded ChurchSuite calendar, the event page opens in a new browser page. However it's also possible to embed an event page, or just part of the event page (perhaps the sign-up form) into a page on your 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, there's an event-specific embed code generator, which you find on the event page within ChurchSuite's Calendar module.

Clicking 'Embed' opens the event embed code generator. 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 with your customised event embed page, simply copy the Embed Code from ChurchSuite into the 'source code' of the page on your website where you would like the event page embedded. Click 'Done' when you are finished.

Note

The event embed code generator is just that; it generates embed code based on the display options you select. Closing the "Customise Embed HTML" window will not save the display options you have selected. The display options will revert to default settings each time you close the window. You should therefore copy and paste your embed code before closing the window to avoid losing the settings you have customised.

Still need help? Contact ChurchSuite Contact ChurchSuite