Embed events in your website
In addition to embedding your public-facing event calendar into your website, you can also embed a "featured events" list - just like the featured events list that your church members see on the home page in My ChurchSuite. It's also possible to embed an event page itself directly into a page on your site, or even just the sign-up form. Here's how...
In this article
Embed a featured events list in your website
The "Featured Events" section in My ChurchSuite has been 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 allows you to create "Featured Events" embed code that can easily be copied and pasted into the "source code" section of a web page. The embedded list incorporates links to your ChurchSuite event pages - making it super easy for people to click through from a featured event to view the event page and sign up!
"Featured Event 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 a "Visible in Embed" visibility option when you are setting up events in the Calendar; meaning you can set your events to be visible in the 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 the "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 if you wish.
You can customise your embed code further by generating site-specific code (multi-site churches only), perhaps just creating embed code for featured events for a particular site or sites. 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" 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 text file temporarily. When you click "Save changes" for the module settings, the embed code generator settings are not saved and will 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 select tickets for your event (if sign-up is enabled on the event).
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 Featured Event feed; allowing your 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 one event sequence 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.
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, but in list format as follows...
Smaller screen devices may also render your web page and featured events block in this same list format.
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 an existing 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 to close the Customise Embed window.
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 or change the settings of any existing embedded code. 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.