Embed your ChurchSuite calendar in your website

Embedding your ChurchSuite events calendar into your church's website is really easy and means that your website always includes the latest events. You can preview all of ChurchSuite's event Embed functionality on our demonstration website here.

Enabling calendar embed

Working within the Calendar module, click into the module's settings, accessed via the cog wheels icon in the top right corner of the module.

Select the Embed Options tab. Click Edit to Enable embedding.

The Calendar embed and Featured Events embed sections are now surfaced (see related article for further information on the Featured Events embed).

You can Preview the embed calendar at any time - especially while you're still customising. Select Customise to open the Embed options pop-up. Here you customise the functionality and appearance of the embed calendar, perhaps selecting to embed just certain categories of events and showing a Category filter. Multi-site customers will also be able to further filter events by site - only events for the selected categories and sites will be included in the embed.

Clicking Done to close the Embed options pop-up now surfaces updated embed code. Note that you can further customise the height and width of the calendar - find the bits of the code that say "height=800" and "width=100%". To make the calendar higher, for instance, you could replace the number with a bigger number. Additionally, you can prevent scrolling within the embedded calendar's iFrame but setting the scrolling="yes" parameter to scrolling="no".

Once you are satisfied, you can copy and paste the long line of embed code out of ChurchSuite and into the source code or embed block section of the calendar page on your website.

Following the above steps you can use the Customise option as many times as you wish to generate multiple embed codes, perhaps for use in different areas of your website. For example, imagine a student event calendar embed that surfaces all your student-related events on the Student page of your website!

Important!

It's important to remember that the the Customise option is essentially an embed code generator, allowing you to generate multiple embed codes for different uses if you wish. Once you've made your customise selections click Done. You must then copy and save the generated embed code (perhaps to a text document) before closing the Embed Options page. When navigate away from the Embed Options the embed code resets back to its default state.

Similarly, if you subsequently create new Categories in the Calendar module - be sure to update any category-specific embed code in your website to reflect the changes; otherwise the events in your new category will not be shown in the embed calendar.

Importantly only events set as Show in Embed are shown in an embed calendar - Leave, user birthdays and public holidays, which do show on your ChurchSuite calendar, are now displayed in an embed calendar. The Show in Embed visibility option is only available if Enable embedding is ticked in the Embed Options.

That's all there is to it - your ChurchSuite calendar is embedded - as you make changes to events and add new events to ChurchSuite, your website is instantly up to date with the changes.

Note that only events whose visibility is set to Show in embed are surfaced in an embed calendar.

Top Tip!

You can further customise your embedded calendar to use any Google Font. Include the font family 'name' in the iFrame URL and you'll be able to choose a font that matches perfectly with your website!

For example, if your Google font family is "Hammersmith One", ( https://fonts.google.com/specimen/Hammersmith+One), note the font family name from the end of the Google font URL, and append it to the end of the embed code URL like this...
The iFrame embed code will then look something like this example:

<iframe frameborder="0" height="800" scrolling="yes" src="https://demo.churchsuite.co.uk/embed/calendar? font_family=Hammersmith+One" style="border-width:0" width="100%"></iframe>

Still need help? Contact ChurchSuite Contact ChurchSuite